My Javascript Stack

Introduction

List of javascript libraries which I had used over the years. Take note that the listing here will be somewhat opinionated.

Backbone stack

• Backbone (used up to 1.1.1)
• Lo-Dash or Underscore.js
• Handlebars even though Underscore.js is a must to Backbone
• Backbone.Marionette - this makes Backbone much much more easier
• Backbone-relational - I used this to make nested Backbone models
• Backbone.stickit - used to support two-way data binding for Backbone

Extjs 3.X stack

• Ext JS 3.X (used up to 3.4)
• jQuery (used up to 1.11)
  • Handling event which ExtJS cannot support very well eg hide and show on some elements
  • Allows this $(“#header”).html() to complement usage of other templating libraries
• Lo-Dash or Underscore.js and Handlebars
  • More comfortable in using this to handle templating as compared to using Ext.Template or Ext.XTemplate
• Font Awesome - used in template but not directly on Ext JS generated div

With ExtJS as the main libraries, the other libraries are used to complement the weaker points on ExtJS

jQuery and its plugins

• jQuery (used up to 1.11)
• jQuery UI - given a choice will try to use Bootstrap instead of this
• jquery-idle-timeout
• jQuery Switch
• jQuery File Download very useful for Single Page Application to implement file download without affecting the rest of the page
• Minimalect - good to use if don’t want to use Select2
• MultiDatesPicker - used this to add additional features to jQuery UI datepicker
• qTip2 - used this to enhance the tooltip display
• jquery Timepicker - used this to add additional features to jQuery UI datepicker
• iCheck - used this to enhance checkboxes

CSS style frameworks/libraries

• SASS/SCSS (node-sass based)
• Less coupled with Grunt
• Bootstrap (up to 3.0) coupled with Bootswatch
• Font Awesome

Grid libraries

• DataTables - the first one which I will try if I’m using Bootstrap
• jqGrid - the API is abit messy as compared to DataTables but during that short period of time I cannot find a suitable library which can do subgrids, pivot grid, comprehensive grouping option with grouping summary

If Ext.js is not around or simply cannot use Ext JS’ grid to get the job done

Testing libaries

• mocha
• chai

So far, I only used this to completment the Selenium testings in Java BDD

Other supporting Javascript libraries

• Humanize-plus - makes it easier to format Currencies and Numbers etc
• buckets - got something like java.util.Map for Javascript
• math.js - got something like Java’s Math.abs for Javascript
• NVD3.js based on D3 - for charting

Tools

• NPM
• Bower
• Grunt - this is my javascript Maven
• Browserify - this provides an easier way to integrate with existing website as compared to RequireJS
• RequireJS this library makes me feel more comfortable with forming up the web client bundle especially if you have a lot of Javascript libraries

Currently Learning

• Vue.JS 2

Looks interesting but no chance to use yet

• From Backbone’s model straight to database ? BackboneORM, Bookshelf.js
• Alternative client side routing instead of using Backbone’s route - Crossroads.js, flatiron’s Director, Finch.js
• Generate spritesheet - grunt-spritesmith
• Paperclip.js
• FormatJS
• slick - the last carousel
• uilang
• Drag and drop etc
• Buttons