What is Javascript Templating
Good place to start is to describe what exactly
JS Templating is and what a good use-case could be. For me, I have data that I've retrieved client side and I need to transform it into repetitive markup then I use a templating library.
Now sure Angular and Knockout are pretty popular approaches for rich client side data-binding but in alot of cases they are too bloated and overkill for certain scenarios.
Say I have a legacy app that uses a heavy amount of JQuery (pretty common scenario for me!) and im tasked to render data from a REST API endpoint to the UI. I dont want to add a whole new client side dependency just to render the data. JS Templating, in particular
Handlebars precompiler, is perfect for this scenario.
For more detailed comparisons between templating libraries and performance reviews, please refer to the links below.
The UI controls are an opinionated out-of -the-box solution while Angular and Knockout require their sizable libraries.
Getting Started
The source for this demo can be obtained
here. I haven't created any grunt tasks, im just bringing it all together to offer a solution for this demo.
- grunt
- grunt-handlebars-compilar
- grunt-contrib-watch
- handlebars
Please note im using v1.3.0 of the handlebars package.
If you copy the following
Package.json into the root directory, then these packages can be added automatically by running the following command.
npm install
The benefit of using precompiled handlebar templates is that we only now need to use the runtime library. Once minified this is only a 7kb file.
Copy the file to your solution directory. The file should be located in the following location.
\node_modules\handlebars\dist\handlebars.runtime.min.js
Im then going to create a directory for my templates to live and then create my first handlebar template file.
mkdir templates
echo. 2>templates/demo-list.handlebars
The next step is to configure the grunt file.
This link will give you further details as to how and why we do this. Below configures the handlebars task with the compile target. I then associate this task to the watch task.
This will now run the handlebars task when a file defined in the watch file pattern is changed and saved.
To test this, run the following command.
grunt watch
And edit the contents of the template.
This should then create
scripts/handlebars-templates.js file.
Putting it all together
All thats left to do now is to fetch our arbitrary data and render the markup. To do this ive used githubs free api as you can see from the gist of my gist below.
Finally we add the JS references to our page and the container we want to render the markup inside and were done.
All the code for this demo has been added to github so please feel free to pull it down
here.
Any queries please let me know and vist my website
http://www.zirafon.org for more contact details.
Thanks for reading. Always appreciate your thoughts and comments.
Checkout my
website for further info and contact details.