Monday, July 30, 2018

For the last few years, I have been using a home grown HTML template syntax/system on our web-sites. Mostly for lists - repeating the same block of HTML through client side JavaScript. This system uses server side (ASP.NET) compilation of templates to JavaScript, and the result is very light weight and fast rendering in browsers.

In hindsight, I could have used a standard syntax/system like Mustache or HandleBars. This would have saved me development time, and made it easier for other developers to understand the templates...

Anyway - I recently realized that I need something more powerful for upcoming development efforts, and so I started looking into the "big" JavaScript frameworks like React, Angluar, and Vue. For various reasons (another story), I settled on Vue.js.

So in order to standardize things and stay focused going forward, I would now like to move as much as possible to Vue.js - including the web-pages with that home grown template system.

The only problem is that most of those web-pages don't need reactivity and all the other great stuff that comes with Vue.js, and the users of those pages really don't need the extra overhead.

Now if only there was a way to use the Vue.js template syntax for simple rendering (no reactivity) without the Vue.js client library, perhaps even with ASP.NET server side template compilation to JavaScript, then I could use one standard template syntax everywhere, and scale up and down as needed.

It then dawned on me that all the coding that I had already done for the home grown template system, could fairly easily be adapted to the Vue.js template syntax.

Introducing "Vue Light .NET" - a .NET compiler which transforms Vue.js template syntax into JavaScript which in turn renders (non-reactive) HTML in the browser:

https://github.com/jesperhoy/VueLight

And a companion library containing 3 ASP.NET Web Form controls which make it easier to use both Vue.js and the Vue Light .NET compiler - and to switch between the two:

https://github.com/jesperhoy/VueLightWebForms

Share: Facebook /  LinkedIn /  Google+ /  Twitter    
Copyright © 2006-2018 Jesper G. Høy