JavaScript Templating: What is Templating?

JavaScript templates take simple web apps to the next level, keeping your application logic separate from your presentation and your HTML and JS files clean. This course provides a look at popular JavaScript template solutions for modern web apps that consume and display data. Joe Marini reviews four popular templating libraries: JQuery Template, a simple solution that plugs straight into jQuery; Handlebars and Mustache, which provide greater flexibility; and Dust, the templating engine for more complex scenarios. Watch more at: JavaScript Templating.

Topics include:

• What is templating?
• Defining templates in jQuery Template
• Using simple Mustache templates with sections and conditions
• Adding conditionals and loops to Handlebars templates
• Working with Dust templates

JavaScript Templating

JavaScript templating refers to the client side data binding method implemented with the JavaScript language. This approach became popular thanks to JavaScript’s increased use, its increase in client processing capabilities, and the trend to outsource calculus to the client’s web browser. Popular JavaScript templating libraries are AngularJS, Backbone.js, Ember.js, Handlebars.js, and Mustache.js. A frequent practice is to use double curly brackets (i.e. {{key}}) to call values of the given key from data files, often JSON objects.

Template Engine

The template engine is responsible for:

• connecting to the data model;
• processing the code specified in the source templates; and
• directing the output to a specific pipeline, text file, or stream.

Additionally some template engines allow additional configuration options. A template engine is ordinarily included as a part of a web template system or application framework, and may be used also as preprocessor or filter.

A diagram illustrating all of the basic elements and processing flow of a template engine.

A template engine is a specific kind of template processing module that exhibits all of the major features of a modern programming language. The term template engine evolved as a generalized description of programming languages whose primary or exclusive purpose was to process templates and data to output text. The use of this term is most notably applied to web development using a web template system, and it is also applied to other contexts as well.

Benefits of using template engines

• encourages organization of source code into operationally-distinct layers (see e.g., MVC)
• enhances productivity by reducing unnecessary reproduction of effort
• enhances teamwork by allowing separation of work based on skill-set (e.g., artistic vs. technical)

Templating becomes useful when the information distributed may change, is too large to be maintained in various HTML pages by available human resources and not large enough to require heavier server-side templating.

See more resources:

JavaScript Templates, Mozilla Developer Network
The client-side templating throwdown: mustache, handlebars, dust.js, and more
Best Practices When Working With JavaScript Templates

Website:
Build My Site

Originally published at buildmy-site.com on December 12, 2014.