You might be familiar with Smarty or Blade templating engine, but generating markup in the server side is sooo old fashioned way of doing things. With the recent improvement of the browsers, we could start harnessing the processing power of the user's device instead of doing everything in the server.
Templating in the most basic sense is seperating the data from the layout codes. In javascript, layout codes might be your html and css codes, while the data is a JSON object. The advantage of doing the templating in the client side is you dont have to serve html markup via http each time the data needs to be represented. You could just send a JSON data which can be parsed by browser and then fed into the template.
Below is a sample code of templating implemented using Handlebars.js
It simply takes an JSON data, and display each JSON object as a p tag.
handle bars demo
Line 5 and 6 loads jQuery and handlebar.js library
lines 7-11 defines an "Expression", this is specific to handlebar.js, the things inside the curly braces acts as placeholder for the actual data
Line 15 defines the data that will be parsed and displayed
Line 16 gets the defined html expression
Line 17 "compiles" the template
and Line 18 ultimately displays the result
Very simple huh. Of course this is just a very very basic use of client side templating, you can do a lot complex operations like this.
You can download the sample to study more about it.
Did you find this useful?
I'm always happy to help! You can show your support and appreciation by Buying me a coffee (I love coffee!).