In this chapter, we will cover the following recipes:
- Rendering objects using Handlebars
- Rendering objects using EJS
- Rendering objects using Jade
- Rendering arrays using Handlebars
- Rendering arrays using EJS
- Rendering arrays using Jade
- Simplifying templates with helpers in Handlebars
- Reusing templates with partials in Handlebars
- Reusing templates with partials in EJS
- Using filters in Jade
- Using mixins in Jade
- Using layouts and blocks in Jade
Modern service apps are often built for multiple platforms, where only one of those platforms is the Web. Other platforms may include iOS, Android, and other websites that need to use the service through an API. Some of those platforms might not support HTML. They might also need to show different HTML for the same data or do preprocessing before displaying the data.
As a result, there has been a shift in web apps from using server-side HTML rendering to client-side HTML rendering. The service serves the serialized raw data (most often as JSON, sometimes XML) and the client decides how to display the data.
In this chapter we're going to take a look at several popular client-side template languages, each with a different approach to templating:
- EJS, which combines HTML with the full power of JavaScript
- Handlebars, which combines HTML with a succinct but more restricted block structures
- Jade, which replaces HTML syntax with a cleaner-looking version that has support for dynamic facilities
We're going to learn how to do some common tasks in each, such as displaying basic objects, displaying lists (or looping), and using partial templates.