JavaScript for Line of Business Applications

(This is a Handlebars.js Tutorial and a Handlebars.js Reference)

This is a complete tutorial, and indeed a reference, on Handlebars.js templating and, principally, JavaScript templating. Handlebars.js is a client-side (it can be used on the server, too) templating engine for JavaScript. It is a JavaScript library that you include in your page just like you include any .js files. And with it, you can add templates to your HTML page that will be parsed and interpolated (values of properties inserted in place) with the values from the data you passed to the Handlebars.js function.

Given the level of complexity of some behaviors and the need to use a lot of external libraries, our obvious choice has been Backbone: this allowed us fine-grained tweaking (DOM manipulation, response parsing, etc.) while keeping our code well organized. Underscore comes along with it, of course.

At Kreuzwerker we are big fans of Brunch when it comes to organize and build our Javascript applications. This project was no exception, and for the first time we integrated the build process in the automatic deployment process (using Capistrano, another XW favorite) with ease.

We picked SCSS for the stylesheets. We base our class-naming conventions on SMACSS and, as the application needed to be embedded in 3rd party pages as well, we adopted a name-spacing convention in order to reduce the chance of classes clashing. We also used a minimalistic build of Bootstrap providing the grid and the scaffolding style for a couple of plugins.

For our templates we relied on Handlebars. If you’re accustomed to Mustache templates, the transition is easy. Furthermore, Brunch has a module for it allowing automatic pre- compilation and minification of all your templates. But the key feature, and life saver, is the support for helpers. We needed massive data formatting for dates, number, locales (more  on that in the next paragraph), as well as finding labels via ids in specific configuration files, and Handlebars’ helpers were just the right tool for it.

Internationalization was needed, but we didn’t want to clutter the API with it, so we opted for i18next. If you have been working with any i18n implementation, this is pretty much it. The cool thing is, they provide helpers for Handlebars on their website ready to be used in your templates. Piece of cake.

Regarding maps we gave Leaflet a try and we’ve been impressed by it. We used to work with OpenLayers, but sometimes it’s just too big for the task. Leaflet is very easy to use and customize. It’s well documented and a lot of tutorials are available online. The perfect companion to Leaflet has been Mapbox. They offer customizable maps, tiles and single image services. Furthermore, it’s very cheap. Your customer will love that.

Raphaël provided the vector graphics needed for the 3D map. dc.js came handy for plotting data out of our big dataset.

Last but not least, Moment.js saved our day when it came to deal with dates. Dealing with dates is often underestimated, but when you need to format, convert and process dates, moment is the winner: