Full Stack Web Development with Backbone.js

Chapter 6. Advanced View Templates

So far, you’ve only used embedded view templates in the code base for Munich Cinema. However, Backbone provides several options to combine advanced HTML templates with Backbone views.

The task of integrating view templates into a Backbone project raises new design questions on an application stack. You could argue that you need support of server-side rendering of views for the first page load or for search engine optimization (SEO) purposes.

For Munich Cinema, support of server-side rendering is not needed. Here, a pure client-side application is sufficient, because our main goal is to provide a subapplication for a better browsing experience. Similar concerns apply if you work on mobile applications or other data-driven interfaces.

In this chapter, we extend the knowledge we’ve gained in previous chapters regarding how to integrate view templates. Also, we will add some better view templates and a basic build process with Grunt.js. With Grunt.js, we easily can “uglify” frontend assets for better transport.

The following Node-based tools for frontend development will be discussed:

• ECO view templates
• JST view templates
• Grunt, including how to set up a build process

Views and Templates

In the prototype of Munich Cinema, the DOM nodes from Backbone.Views were very basic. By embedding templates in views, the views easily bloat up, as you can observe from the current Layout view. Also, if you collaborate with developers that work on HTML and CSS only, ...