It seems almost every other week there is a new JavaScript library taking the web community by storm! The web community is increasingly vibrant, diverse and is moving rapidly on multiple fronts. It would be an impossible feat to survey every major JavaScript framework and library. Instead, I will share some of the most famous and influential ones for front-end development. So let’s take a look at the top JavaScript web front-end framework, libraries & tools and when to use them.
Also:
- Please do not be offended if I did not include your favorite JavaScript thing here.
- Always remember to keep your frameworks & libraries updated. The latest version often has the best cross-browser and cross-device support. You can use tools like this scanner to help determine if an older version is compatible with the largest set of devices.
Alright, let’s get to the list!
AngularJS
Angular is the popular enterprise framework that many developers are using to build and maintain complex web applications. Angular’s popularity is immense, and companies using it are as diverse as Domino’s Pizza, Ryanair, iTunes Connect, PayPal Checkout, Google. Angular is an open source framework supported by Google. Angular describes itself as an extension to HTML for building complex web apps. Also if you’re familiar with TypeScript, that’s how Angular 2 was written.
Angular is an MVC-type framework. It offers two-way data binding between models and views. This data binding allows for an automatic update on both sides whenever there is a data change. It enables you to build reusable View Components. It provides a services framework to allow easily backend-frontend server communication. Finally, it is just plain JavaScript.
When to use AngularJS? When you are building a complex web front-end application and need a single modular framework to handle everything.
GitHub: https://github.com/angular/angular.js
Current Version: 1.4.7/1.2.29
Website: angularjs.org
React
React is this year’s favorite JavaScript project! Everyone seems to be talking about ReactJS. Every conference I have been to in the last year had at least a couple of talks on React and other libraries in the same family (Flux, Redux) React is open-source and developed mostly by Facebook with contributions from other major tech companies. React describes itself as a JavaScript library for building user interfaces.
React is mostly the V in MVC. It focuses entirely on that piece of MVC and disregards the architecture of the rest of your application. It provides a component layer that makes it easier to make UI elements and combine them together. It abstracts the DOM away so that it optimizes rendering and allows you to render React from node.js. Further; it implements a one-way reactive data flow that makes it easier to understand and use than other frameworks.
Being the V in MVC, several projects combine React with the likes of Angular or Ember.
When to use React? When you want a powerful View layer but don’t need an elaborate framework for the rest of your application or when you want a View layer to go with your Angular, Backbone, or Ember application. When you are trying to build an isomorphic web framework.
GitHub: https://github.com/facebook/react
Current Version: v0.14.0
Website: Facebook.github.io/react/
Backbone
Backbone is a famously simple framework that fits into a single JavaScript file. Backbone has been around for a while; developed by Jeremy Ashkenas from CoffeeScript and Underscore fame. Backbone is especially popular with teams looking for a simple structure for their small web applications without bringing in a large framework like Angular or Ember.
Backbone provides a full MVC framework along with routing. The Models allow for key-value binding and events for handling data changes. Models (and Collections) can connect to RESTful APIs. The Views have declarative event handling, and the Router does an excellent job of handling your URL and state management. Everything you need to build a Single Page Application without offering too much and without unnecessary complexity.
When to use Backbone? Backbone is my GOTO framework for simple web applications.
GitHub: https://github.com/jashkenas/backbone/
Current Version: 1.2.3
Website: backbonejs.org
Ember
Ember is an opinionated web app framework focusing on programmer productivity. Ember is relatively popular, and the core team includes smart people like Yehuda Katz, who was part of the Ruby on Rails and jQuery Core Teams. Ember describes itself as "a framework for creating ambitious web applications" that doesn’t waste your time. It is very opinionated and makes many choices for you.
Ember is also an MVC framework. It includes a templating and view engine that automatically updates when data changes, just like Angular, Backbone, and React. It includes the concept of web components that let you extend HTML with your own tags (just like Angular). It also has a routing and model engine that knows how to work with your RESTful API.
When to use Ember? When you just want a framework that just works. Use Ember when you do not need flexibility because you are on a tight budget or a hard deadline.
GitHub: https://github.com/emberjs/ember.js
Current Version: 2.1.0
Website: emberjs.com
JQuery
JQuery is the library that needs no introduction. It is single-handedly responsible for making cross-browser sites a reality and for bringing the web to where it is today. Web Standards have been adopted and genuinely respected by most major browser manufacturers and jQuery is one of the reasons why. The mission of jQuery Foundation is "to improve the open web, making it accessible for everyone, through the development and support of open source software, and collaboration with the development community."
JQuery is the most used JavaScript library in the world, and no app should ever go without it unless you dislike programmer productivity. It makes DOM traversal, event handling, animation, AJAX so much simpler and easier across all browsers.
When to use jQuery? Always, unless you want to use a lighter-weight version like Zepto.
GitHub: https://github.com/jquery/jquery
Current Version: v1.11.3 or v2.1.4
Website: jquery.com
Underscore & lodash
Sometimes what comes built-in to JavaScript is just not enough for programmers to be truly productive. There’s always a utility function that is missing or a function that would simplify the code. Underscore (and lodash) is a JavaScript library that provides a whole suite of utility functions without monkey patching the built-in JavaScript objects. Both libraries provide over 100 functional helpers and other specialized goodies; including functions like map, filter, invoke, reduce, template, throttle, bind, extend, pick, clone and so much more.
When to use Underscore? When you want a single JavaScript file that immediately augments programmer productivity.
Underscore GitHub: https://github.com/jashkenas/underscore
Underscore Current Version: 1.8.3
Underscore Website: underscorejs.org
When to use lodash? When you want a modular and slightly more performant version of Underscore with easier support for AMD and community plugins.
Lodash GitHub: https://github.com/lodash/lodash
Lodash Current Version: v3.10.1
Lodash Website: lodash.com
D3.js
Data visualization and charting is a common requirement for web applications. D3.js is the defacto standard when it comes to any data manipulation and visualization. It is one of the most popular projects on GitHub and is used by hundreds of organizations. Plenty of graphing, charting and visualization libraries build on top of D3.
D3 allows you to manipulate data documents from any source and apply a transformation into the DOM or/and SVG or/and CSS. D3 focuses on modern web standards and ensures you are free from any proprietary format like Flash or Silverlight.
When to use D3.js? Anytime you need visualization of any kind.
GitHub: https://github.com/mbostock/d3
Current Version: 3.5.6
Website: d3js.org
Babylon.js
Looking to build a video game that runs entirely on modern web standards and across browsers? Take a look at Babylon.js, a 3d game engine based on WebGL and JavaScript. You can create incredibly high-quality games complete with physics, audio and particle systems among other things.
When to use Babylon.js? Whenever you are building a video game or a complex 3D scene of any sorts.
GitHub: https://github.com/BabylonJS/Babylon.js
Current Version: 2.2
Website: babylonjs.com
Three.js
Want to build a 3D visualization but do not need a full-blown game engine? Three.js provides a lightweight 3D library that allows rendering 3D to an HTML5 canvas, SVG, and WebGL. It is quite a straightforward library, and there are hundreds of beautiful examples in the three.js showcase.
When to use Three.js? Whenever you need a simple 3D visualization that can output to a Canvas.
GitHub: https://github.com/mrdoob/three.js/
Current Version: r73
Website: threejs.org
Mocha & Chai
Testing JavaScript has been incredibly annoying for a long time. Scratch that, testing any code is typically seen as annoying, but it is something that every developer should do. Instead of testing their code, every developer seems always to disdain and ignore it. There is a fix to this hatred, and it comes in the form of Mocha and Chai. While both libraries take their names from yummy hot beverages, both libraries do help you test your code but in different ways.
Mocha is a JavaScript test framework that makes it easy to test the async code in your node module or browser app. Mocha tests can run in series and have the added quality of tracing exceptions to the correct test cases.
Chai is a behavior-driven development/test-driven development assertion library that can be paired with Mocha. It makes it simple to express what you are testing in a readable style.
When to use Mocha & Chai? ALWAYS! Please test your code and make the world a better place.
Mocha GitHub: https://github.com/mochajs/mocha
Mocha Current Version: 2.3.3
Mocha Website: mochajs.org
Chai GitHub: https://github.com/chaijs/chai
Chai Current Version: v3.4.1
Chai Website: chaijs.com
Karma
Having included Mocha and Chai on this list, it would be incomplete not to include a test runner to run these tests or perhaps to set up continuous integration testing. Karma is a tool designed to help automate running your tests against different browsers. It will help you run your Mocha and Chai tests on all the browsers out there.
Not every browser runs on every platform but luckily there are a couple of free tools you can use to test other browsers, take a look at Browser Screenshots. If you are running on OS X and want to test Edge or Internet Explorer, you can use this tool for free.
When to use Karma? Whenever you have a comprehensive test suite for your applications and want to ensure the tests pass on all the browsers.
GitHub: https://github.com/karma-runner/karma
Current Version: v0.13
Website: karma-runner.github.io
PhantomJS
Running full browsers to test your code is memory and CPU intensive. PhantomJS allows you to run a headless WebKit - the rendering engine behind Safari and previously Chrome (now Blink). It enables you to run your tests, capture screenshots, monitor the network and automate page browsing from a JavaScript API.
When to PhantomJS? When you need to do more testing, manipulate pages and monitor network requests.
GitHub: https://github.com/ariya/phantomjs
Current Version: v2.0
Website: phantomjs.org
Grunt & Gulp
Building websites for production typically involve some tasks to improve performance like minification of JavaScript and CSS, compilation of CoffeeScript/TypeScript, unit testing, lintin. Perhaps you already have a toolchain ready to prepare your website for production but if you do not, you want to use a task runner like Grunt or Gulp. Both have endless plugins to do just about any transformation to your website to get it ready for production.
When to use Grunt? When you prefer writing configuration files and don’t mind your task runner generating intermediary files.
Grunt GitHub: https://github.com/gruntjs/grunt
Grunt Current Version: v0.4.5
Grunt Website: gruntjs.com
When to use Gulp? When you prefer to write code over configuration and want to take advantage of node.js’ streaming capabilities for faster task execution.
Gulp GitHub: https://github.com/gulpjs/gulp
Gulp Current Version: v3.9.0
Gulp Website: gulpjs.com
Babel
JavaScript as a language is evolving quickly. ECMAScript 2015 was released last summer and many of its new features are implemented in the latest browsers. If you want to take a look at ECMAScript 2015 compatibility, you can take a look at this table from @kangax. You’ll notice that the latest versions of Edge, Firefox and Chrome have near-complete compatibility.
We do not live in a perfect world. As developers, we will need to continue supporting older browsers that do not have the latest and greatest JavaScript features. We do want to advance the web and improve our code bases. Babel is a JavaScript compiler that compiles the latest JavaScript standard to ES5-compliant JavaScript allowing you to run on browsers as old as IE9. It has some plugins that make it easier to develop with React and even use features that are not part of the specification (e.g. ES7).
When to use Babel? When you want to use new JavaScript language features and still support older browsers.
GitHub: https://github.com/babel/babel
Current Version: 6.1.2
Website: babeljs.io
More hands-on with Web Development
This article is part of the web development series from Microsoft tech evangelists and engineers on practical JavaScript learning, open source projects, and interoperability best practices including Microsoft Edge browser and the new EdgeHTML rendering engine.
We encourage you to test across browsers and devices including Microsoft Edge – the default browser for Windows 10 – with free tools on dev.microsoftedge.com:
More in-depth learning from our engineers and evangelists:
Our community open source projects:
More free tools and back-end web dev stuff:
