Thursday, January 1, 2015

A Web Developer’s Guide to JavaScript Frameworks

Mike Mcdermott, Senior Solutions Architect

When working at a technology consulting company, you get exposed to discussions about a lot of different technologies. With web applications in particular, these "water cooler" discussions will often revolve around the latest and greatest JavaScript frameworks. I have spent quite a bit of my career designing and building out the back end of applications - it's where I traditionally felt most at home. As a result, I would sometimes tune out during these conversations. However, with more and more functionality being shifted to the client, along with a "mobile first" attitude and responsive design becoming primary design factors, I've started to perk up my ears when someone starts talking about a particular framework.

What I found when I started to listen in a little more carefully, is that there are a plethora of frameworks out there available to web developers that do all sorts of things and achieve all sorts of goals and the sheer volume of frameworks available can rapidly become overwhelming. The days of being able to rely on the out of the box tools in Visual Studio to quickly and cleanly develop rich, client-biased web applications are over. Honestly, those days have been over for a while, but the latest version of MVC (and ASP.NET) does ship with some of the frameworks in this guide, and the rest are available via NuGet so I think it's important to have cursory knowledge of the most popular ones. If for nothing else, they're simply additional tools for a web developer's tool kit.

The purpose of this guide is to list the frameworks, group them, and give a quick description or a few bullet points about what functionality they bring to the table. What I am not going to do is to go into a lengthy pro/con discussion about each framework - that's what the water cooler (or beer tap) is for.


Disclaimer: some of these frameworks have been around longer than others and have seen more use, but anecdotally speaking they're all getting enough use in the wild to warrant mention here. This isn't meant to be an exhaustive list of all available JavaScript frameworks, instead it's simply a list of frameworks I or some of my colleagues have been using or hearing about fairly regularly. The inclusion or exclusion of a particular framework doesn't indicate an opinion of its value one way or the other.


When I started listing out the frameworks and doing some basic research on each, I noticed that they tended to fall into 1 of 4 groups. Some of the frameworks include quite a bit of functionality, and as a result they span more than one group and you'll see them listed under each group that they apply to.


 

Utilities

jQuery - this is the framework most web developers are familiar with. At its core, it's simply a DOM manipulation library that makes things like document traversal and element manipulation much easier than with vanilla JavaScript. It leverages CSS selectors which fits in quite nicely within the web development paradigm.

  • Simplified DOM manipulation
  • Simplified AJAX API/support
  • Event handling
  • Animations
  • UI Widget Library (via the jQuery UI extensions)

Bootstrap - from the same folks who brought you Twitter comes Bootstrap. This framework includes CSS files for doing easy, advanced layouts right out of the box and is also very "responsive"-centric. It includes useful JavaScript helper functions, some that overlap with jQuery, some that complement it.

  • CSS Standardization
  • Supports CSS Preprocessors ({less}, Sass)
  • UI Widget Library

Modernizr - Modernizr is a framework that utilizes browser feature detection (instead of the unreliable, and possibly evil method of user agent checking) to help a developer determine whether or not to use a certain HTML element or CSS feature. It effectively allows a developer to build the same (or very similar) user experience for down level browsers. Very useful when you have a requirement to support IE 7 or IE 8. Despite its name, one thing Modernizr does not do is to actually modernize the targeted browser - you'll still need to supply your own polyfill for that, but Modernizr can help with the conditional loading of said polyfill.

Moment - A utility to parse, validate, manipulate, and display dates and times in JavaScript. If you've ever done a lot of client side datetime manipulation, you know that vanilla JavaScript doesn't really have the built in features that other languages (like C#) do, but Moment goes a long way towards fixing that.

Underscore - This is a library that provides dozens of helper functions that solve common problems in JavaScript (helpers that other languages ship with) and prevent the developer from having to reinvent the wheel. Things like array helpers and utilities, math utilities, collection and object helpers, etc.

Lo-Dash - To quote Daft Punk, Lo-Dash is the better, faster, harder, stronger version of Underscore. A framework full of great helper extensions that adds even more goodness and runs faster than Underscore.


Templating

Mustache - Mustache a logic-less templating engine that's actually available for lots of different languages. The gist of it is that you create an HTML template with placeholders indicated by double curly braces, pass it a JSON object and the framework does the rest. Simple, easy to use.

Handlebars - Handlebars is a superset of Mustache that can actually use an existing Mustache implementation and templates but adds conditionals and iterators along with some other helper goodies.

  • Just like Mustache, leverages templates with placeholders delineated with double curly braces
  • Adds conditionals and iterators
  • Supports block expressions

Angular - Angular is actually a client side MV* framework which I'll talk more about below, but it also can be used for HTML templating.

Knockout - Another client side MV* framework with native built-in templating.


MV* Frameworks

Angular - This is a client side MVC (model, view, controller) framework from Google built on the idea of separating application logic from DOM manipulation. It supports two-way data binding which simplifies templating code. Angular does have a bit of a learning curve to it because of how powerful it is, but it is a popular framework used for SPAs or to augment server side web frameworks like .NET MVC.

  • Extensible
  • 2 way data binding
  • Steep learning curve

Knockout - A client side MVVM (model, view, view model) framework that, like Angular, attempts to separate data, UI views, and application logic via declarative bindings. Knockout supports two way data binding and HTML templating.

  • Declarative data binding
  • 2 way data binding
  • Supports native templating

Ember - Another client side MVC framework designed for single page applications. Supports two way binding, the concept of routes, and templating when using in conjunction with Handlebars.

Backbone - A client side MVP (model, view, presenter) framework that is very lightweight and was designed with SPAs in mind. It has a hard dependency on Underscore but can be used in conjunction with other JavaScript frameworks.

React - This is a client side view model framework from Facebook. It leverages a custom data syntax called JSX to bind to elements, and only supports one way binding for simplicity. For those of you thinking of using React with a .NET web project, there is an extension called ReactJS.NET to help integrate React and JSX with MVC and C# code.


Graphing Frameworks

D3 - D3 stands for Data Driven Documents. It's a framework that allows you to bind DOM elements to data and apply data-driven transformations on those elements. I uses W3C standard selectors much like jQuery. Other than the selectors, the syntax isn't terribly intuitive, so there is a bit of a learning curve.

  • Very lightweight
  • Standards based (CSS, HTML, SVG)
  • Leverages selectors like jQuery does

Highcharts - A graphical charting framework. Bar charts, line charts, etc. Works well with jQuery, but is standalone and not a plug in. Non-commercial usage of Highcharts is free, but enterprise/commercial usage does incur a licensing cost. Supports many types of charts as well as maps. Also supports free-form drawing, similar to Raphaël

ChartJS - A very lightweight charting framework with 6 built in chart types. Not as fully featured as Highcharts, but is open source and much smaller. Works with or without jQuery.

Raphaël - This isn't a charting framework per se, but rather a JavaScript wrapper to make implementing SVG much easier. There are built in functions that can be leveraged for charting, but because this isn't charting specific, any sort of vector graphics can be implemented easily.


Summary

In summary, you can and should consider mixing and matching your frameworks depending on your goals and requirements. Take the time to try implementing a simple SPA or .NET MVC application with each of the MV* frameworks to compare and contrast their benefits and drawbacks. Several of these frameworks have training courses on Plural Sight and that is another great way to get familiar with them.

Happy Coding!