Top JavaScript Frameworks, Libraries and Tools and When to Use Them

By Rami Sayar

This article is part of a web development series from Microsoft. Thank you for supporting the partners who make SitePoint possible.

It seems like 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!

Versioning. A slightly sarcastic daily email for discerning web people. Sign up today!

1. 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

2. 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. Itfocuses 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/

3. 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

4. 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

5. 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

6. 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 amodular and slightly more performant version of Underscore with easier support for AMD and community plugins.
LodashGitHub: https://github.com/lodash/lodash
LodashCurrent Version: v3.10.1
LodashWebsite: lodash.com

7. 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

8. 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

9. 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

10. 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

11. 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 setup 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

12. 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

13. Grunt & Gulp

Building websites for production typically involvesome 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

14. Babel

JavaScript as a language is evolving quickly. ECMAScript2015 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 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.modern.IE:

More in-depth learning from our engineers and evangelists:

Our community open source projects:

More free tools and back-end web dev stuff:

  • Trần Quang Nhật

    Why not have sencha framework in this article??

  • Peter Kamps

    Another interesting addition might be GSAP for complex animations.

  • FredrickDominy

    Great article, thanks Rami

  • http://www.creative-sound.cz Tomáš Bílek

    I’am missing most promising mature project ClojureScript and fresh Om Next, steal to learn but worth it!

  • http://lukaszkups.net OfcaPL

    exactly

  • Gary Kaganas

    I think it would be worthwhile to include a mention of Backbone.Marionette in the Backbone entry. It super stable and takes Backbone to a whole different arena.

  • Andrew Balmus

    And I would propose Can.JS

  • Johannes Stein

    Hi Rami, I strongly disagree with a lot of points in this article.
    For me, it sounds a lot like “Use everything all the time!”. I would have been more cautious when recommending Angular and mention the missing upgrade path to 2.x. I would be more liberal with the recommendation of React and mention other uses of React, like React Native, React Canvas etc. I don’t really agree on the general recommendation of combining React with Angular or Ember. I would be going with a data layer that fits more into the philosophy of React, like Flux or Redux.
    I would also argue that you should be really careful when choosing to use jQuery. With the trends of using modular libraries, jQuery provides more than someone’s bargains for. It gives you DOM manipulation, AJAX, animations and most of the time you don’t really all of them. So in that case it bloats up your application size, unless you go into the trouble of specifying a custom build. Especially in the context of Virtual DOM libraries (React) you should be really careful with jQuery, as it may mess with the virtual DOM operations if it’s not being carefully enough.
    While I would agree that testing should always be done, I wouldn’t say that Mocha & Chai are always the right choice. Jasmine and Ava are also strong contenders and there are lighter assertion libraries than Chai out there.

  • Breth Dennan

    not really, webix is high level, it pairs with jquery-ui

  • عاطف بن علي

    and what about VueJs, it’s a cool framework too.

    • http://www.miftahafina.com/ Miftah Afina

      This article is wrote when vue js is not a framework, yet…

  • HMS10

    This article is great and needs to be updated frequently. Can you please make an article like this for PHP frameworks?

  • HMS10

    This article is great and needs to be updated frequently. Can you please make an article like this for PHP frameworks?

  • http://be.net/kossa kouceyla hadji

    Very strange, were is VueJS ?

    • http://www.miftahafina.com/ Miftah Afina

      This article is wrote when vue js is not a framework, yet.

  • http://obatkolesterol.agaricpro.info/ kez0223

    What’s the name of this JavaScript framework?

  • B.Max

    This article needs to be updated and fixed.

Recommended
Sponsors
Because We Like You
Free Ebooks!

Grab SitePoint's top 10 web dev and design ebooks, completely free!

Get the latest in Front-end, once a week, for free.