JavaScript for Line of Business Applications

I will say just few words about AngularJS, specifically the module, the controller and the data binding in order to make sense of the given code, before describing Underscore in more detail.

AngularJS is a structural framework for dynamic web apps, is what HTML would have been had it been designed for applications. AngularJS lets you extend HTML vocabulary for your application. AngularJS is a toolset for building the framework most suited to your application development. It is fully extensible and works well with other libraries.

In JavaScript|MDN or in W3Schools you can find the generic methods in order to manipulate your data that you store in an array, an object or in a collection.

Just to remind you the 14 Array Object Methods. But is that all? Is there any way to enrich our utility belt?

UnderscoreJs is a javaScript library that provides a series of functional utilities. It makes working with collections, arrays, objects and functions much easier, compared to the native support found in the javaScript.

Manipulating an array, filtering a collection, applying a function over each item in a collection, extracting the keys or the values from an object  are much easier operations by means of the many more functions that you can just call like _.difference(array, *others)

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:

I've been using Lo-Dash in place of underscore for a while now, because it's faster, it has AMD support, and it has extra functionality that Underscore lacks. Because it's 100% compatible, if I have a library that requires Underscore (Backbone, for example) or an existing code base that already uses Underscore, I get all that performance for free just by dropping Lo-Dash in its place. That's great!

There are numerous scenarios to throttle input so that you aren’t reevaluating your filters every time they change. The more appropriate term is “debounce” because essentially you are waiting for the input to settle before you invoke a function, so you stop bouncing to the server. The canonical case would be a user entering input into a text box to filter a list. If your filter involves some overhead (for example, it is implemented using a REST resource that executes a query on a backend database) you don’t want to keep rerunning and reloading the results while the user is typing. Instead, you want to wait for them to finish typing their filter and then perform the task once.