JavaScript
Article
By Craig Buckler

Best JavaScript Frameworks, Libraries and Tools to use in 2017

By Craig Buckler
Help us help you! You'll get a... FREE 6-Month Subscription to SitePoint Premium Plus you'll go in the draw to WIN a new Macbook SitePoint 2017 Survey Yes, let's Do this It only takes 5 min

It seems there are more JavaScript frameworks, libraries, and tools than there are developers. As of May 2017, a quick search on GitHub reveals more than 1.1 million JavaScript projects. There are 500 thousand usable packages on npmjs.org with almost 10 billion downloads every month.

2017.05.29: The article was updated to reflect the current state of the JavaScript ecosystem.

This article endeavors to explain the basics and rudimentary differences between the most popular client-side JavaScript frameworks, libraries, and tools. Whether they are “best” for you is another question. Choose something and stick with it for a while. Just be aware your favorite option will be superseded by something “better” no matter what you select!

Please accept the following terms and conditions before reading this article…!

  • The JavaScript landscape changes on a daily basis. This article will be out of date the moment it’s published!
  • By “best” I mean “the most popular general-purpose projects”. All are free/open source but the list may not include your favorites.
  • Discontinued projects such as YUI are not included even though they may still have high use across the web.
  • Only client-side projects are referenced. Some can work server-side but the list does not include pure server-based frameworks such as Express.js or Hapi.
  • Information about each project is intentionally brief to provide an overview for further research.
  • Each project provides a usage popularity indicator but statistics are notoriously difficult to collate and can be misleading.
  • I’m biased. You’re biased. Everyone else is biased! I haven’t tried every tool here and will declare my favorites but you should make your own assessment based on your requirements.
  • Neither I nor SitePoint are liable for any disastrous decisions you make!

Tricky Terminology

The terms “framework”, “library” and “tool” can mean different things to different people at different times depending on the context. The general definitions used here:

Libraries

A library is an organized collection of useful functionality. A typical library could include functions to handle strings, dates, HTML DOM elements, events, cookies, animations, network requests, and more. Each function returns values to the calling application which can be implemented however you choose. Think of it like a selection of car components: you’re free to use any to help construct a working vehicle but you must build the engine yourself.

Libraries normally provide a higher level of abstraction which smooths over implementation details and inconsistencies. For example, Ajax normally relies on the XMLHttpRequest API but this requires several lines of code and there are subtle differences across browsers. A library may provide a simpler ajax() function so you’re free to concentrate on higher-level business logic.

A library could cut development time by 20% because you don’t have to worry about the finer details. The downsides:

  • a bug within a library can be difficult to locate and fix
  • there’s no guarantee the development team will release a patch quickly
  • a patch could change the API and incur significant changes to your code.

Frameworks

A framework is an application skeleton. It requires you to approach software design in a specific way and insert your own logic at certain points. Functionality such as events, storage, and data binding are normally provided for you. Using the car analogy, a framework provides a working chassis, body, and engine. You can add, remove or tinker with some components presuming the vehicle remains operational.

A framework normally provides a higher level of abstraction than a library and will help you rapidly build the first 80% of your project. The downsides:

  • the last 20% can be tough going if your application moves beyond the confines of the framework
  • framework updates can be difficult – if not impossible
  • core framework code and concepts rarely age well. Developers will always discover a better way to do the same thing.

Tools

A tool aids development but is not an integral part of your project. Tools include build systems, compilers, transpilers, code minifiers, image compressors, deployment mechanisms and more.

Tools should provide an easier development process. For example, many coders prefer Sass to CSS because it provides code separation, nesting, render-time variables, loops, and functions. Browsers do not understand Sass/SCSS syntax so the code must be compiled to CSS using an appropriate tool before testing and deployment.

Don’t Label Me!

The distinction between libraries, frameworks, and tools is rarely clear. A framework could include a library. A library may implement framework-like methods. Tools could be essential for either. I’ve attempted to label each project but the scope can vary.

If this sounds too complicated, you could consider coding vanilla JavaScript. That’s fine, but you will inevitably write your own library and/or framework code which must be maintained. JavaScript itself is an abstraction on a tower of browser and OS abstractions!

JavaScript Frameworks and Libraries

Projects in order of popularity…

jQuery

jQuery
type library
website jquery.com
repository github.com/jquery/jquery
current version 3.2.1
developer jQuery team
launch date August 2006
typical size 30kb min
typical use general purpose
usage 72.4% of all websites

jQuery remains the most-used JavaScript library ever created and is distributed with WordPress, ASP.NET and several other frameworks. It revolutionized client-side development by introducing CSS selector to DOM node retrieval plus chaining to apply event handlers, animations, and Ajax calls.

jQuery has fallen from favor in recent years but remains a viable option for projects which require a sprinkling of JavaScript functionality.

Pros:

  • small distribution size
  • shallow learning curve, considerable online help
  • concise syntax
  • easy to extend

Cons:

  • adds a speed overhead to native APIs
  • less essential now that browser compatibility has improved
  • usage has flat-lined
  • some industry backlash against unnecessary use.

React

React
type library
website facebook.github.io/react/
repository github.com/facebook/react
current version 15.5.4
developer Facebook and contributors
launch date March 2013
typical size 21kb min
typical use single-page applications
usage low

Perhaps the most-talked about library of the past year, React claims to be a JavaScript library for building user interfaces. It focuses on the “View” part of Model-View-Controller (MVC) development and makes it easy to create UI components which retain state. It was one of the first libraries to implement a virtual DOM; the in-memory structure computes the differences and updates the page efficiently.

React usage appears low in statistics perhaps because it’s used in applications rather than websites. Almost 38% of developers claim to be using the library.

Pros:

  • small, efficient, fast and flexible
  • simple component model
  • good documentation and online resources
  • server-side rendering is possible
  • currently popular and experiencing rapid growth

Cons:

  • new concepts and syntaxes to learn
  • build tools are essential
  • can require other libraries or frameworks to provide the model and controller aspects
  • can be incompatible with code and other libraries which modify the DOM

Learn more about React with our Premium course, React the ES6 Way

Lodash and Underscore

Lodash
type library
website lodash.com/
repository github.com/lodash/lodash/
current version 4.17.4
developer John-David Dalton
launch date April 2012
typical size 4kb – 24kb min
typical use general purpose
usage low
Underscore
type library
website underscorejs.org/
repository github.com/jashkenas/underscore
current version 1.8.3
developer Jeremy Ashkenas
launch date October 2009
typical size 6kb min
typical use general purpose
usage low

Lodash and Underscore are combined in this section because they provide hundreds of functional JavaScript utilities to supplement native string, number, array and other primitive object methods. There is some overlap so you are unlikely to require both libraries in a single project.

Client-side usage appears low but either library can be adopted for server-side Node.js applications.

Pros:

  • small and simple
  • easy to learn with good documentation
  • compatible with most libraries and frameworks
  • does not extend built-in objects
  • can be used on the client or server

Cons:

  • some methods are available in ES2015 and later editions of JavaScript.

AngularJS 1.x

AngularJS
type framework
website angularjs.org
repository github.com/angular/angular.js
current version 1.6.4
developer Google
launch date October 2010
typical size 144kb
typical use single-page applications
usage low

Angular is the first framework – or MVC application framework – to appear on this list. The most popular edition is version 1.x which extended HTML with two-way data-binding while decoupling DOM manipulation from application logic.

Angular 1.x is still in development despite the release of version 2 (which is now version 4!) Confused? See below…

Pros:

  • a popular framework adopted by several large companies
  • a single solution to produce modern web applications
  • part of the “standard” MEAN stack (MongoDB, Express.JS, AngularJS, NodeJS) so many articles and tutorials are available

Cons:

  • steeper learning curve than some alternatives
  • large code base
  • impossible to upgrade to Angular 2.x
  • despite being a Google project, Google do not appear to use it?

Angular 2.x (now 4.x)

Angular
type framework
website angular.io
repository github.com/angular/angular.js
current version 4.1
developer Google
launch date September 2016
typical size 450kb min
typical use single-page applications
usage low

Angular 2.0 was released in September 2016. It was a complete rewrite which introduced a modular component-based model created with TypeScript (which is compiled to JavaScript). To add to the confusion, version 4.0 was released in March 2017 (v3 was skipped to avoid semantic version issues).

Angular 2+ is radically different to v1. Neither is compatible with the other – perhaps Google should have given the project a different name!

Pros:

  • a single solution to produce modern web applications
  • still part of the MEAN stack although fewer Angular 2+ tutorials are available
  • TypeScript provides some advantages to those familiar with statically-typed languages such as C# and Java.

Cons:

  • steeper learning curve than some alternatives
  • large code base
  • impossible to upgrade from Angular 1.x
  • Angular 2.x has experienced relatively low uptake compared to 1.x
  • despite being a Google project, Google do not appear to use it?

Vue.js

Vue.js
type framework
website vuejs.org
repository github.com/vuejs/vue
current version 2.0
developer Evan You
launch date February 2014
typical size 19kb min
typical use single-page applications
usage low

Vue.js is a lightweight progressive framework for building user interfaces. The core offers a React-like virtual DOM-powered view layer which can be integrated with other libraries but it is also capable of powering single-page applications. The framework was created by Evan You who previously worked on AngularJS but wanted to extract the parts he liked.

Vue.js uses an HTML template syntax to bind the DOM to instance data. Models are plain JavaScript objects which update the view when data is changed. Additional tools provide facilities for scaffolding, routing, state management, animations and more.

Pros:

  • rapid adoption and increasing popularity
  • simple to get started with high level of developer satisfaction
  • small dependency and good performance

Cons:

  • a newer project – risks may be greater
  • some reliance on a single developer for updates
  • fewer resources than alternatives

Backbone.js

Backbone.js
type framework
website backbonejs.org
repository github.com/jashkenas/backbone/
current version 1.3.3
developer Jeremy Ashkenas
launch date October 2010
typical size 8kb min
typical use single-page applications
usage low

Backbone.js was one of the earliest client-side options to provide an MVC structure commonly found in server-side frameworks. Its only dependency is Underscore.js which was created by the same developer.

Backbone.js claims to be a library because it can be integrated with other projects. I suspect most developers consider it to be a framework, albeit less opinionated than some others.

Pros:

  • small, lightweight and less complicated
  • does not add logic to HTML
  • great documentation
  • adopted for many applications including Trello, WordPress.com, LinkedIn and Groupon

Cons:

  • a lower level of abstraction than alternatives such as AngularJS (although that could be considered a benefit)
  • requires additional components to implement features such as data binding
  • more recent frameworks have moved away from MVC architectures

Ember.js

Ember.js
type framework
website emberjs.com
repository github.com/emberjs/ember.js
current version 2.15.0
developer Ember team
launch date December 2011
typical size 95kb min
typical use single-page applications
usage low

Ember.js is one of the larger opinionated frameworks which is based on a Model-View-ViewModel (MVVM) pattern. It implements templating, data-binding, and libraries in a single package. The convention-over-configuration concepts will be immediately familiar to those with Ruby on Rails experience.

Pros:

  • provides a single solution for client-side applications
  • developers can be instantly productive – it uses jQuery
  • good backward compatibility and upgrade options
  • has adopted modern web development standards

Cons:

  • large distributable
  • considered monolithic compared to other frameworks which are moving toward smaller component structures
  • steep learning curve – it’s the Ember way or no way

Knockout.js

Knockout.js
type framework
website knockoutjs.com](http://knockoutjs.com/)
repository github.com/knockout/knockout
current version 3.4.2
developer Steve Sanderson
launch date July 2010
typical size 59kb min
typical use single-page applications
usage low

One of the older MVVM frameworks, Knockout.js uses observers to ensure the UI stays synchronized with underlying data. It features templating and dependency tracking.

Pros:

  • small and lightweight with no dependencies
  • excellent browser support going back to IE6
  • good documentation

Cons:

  • larger projects can become complex
  • development has slowed
  • usage appears to be on the wane

Notable Mentions

Hungry for more? The following projects are less popular but worth considering:

  • Polymer – a library which enables cross-browser support for HTML5 web components
  • Meteor – a full-stack platform for web applications.
  • Aurelia – a relatively new, lightweight, cross-platform framework
  • Svelte – a very new project which transforms framework source code into clean JavaScript
  • Conditioner.js – a new library which automatically loads and unloads modules based on state.

Tools: General-Purpose Task Runners

Build tools automate a variety of web development tasks such as pre-processing, compilation, optimizing images, minifying code, linting, and running tests. Tasks can be managed together in a single executable package. The most popular options:

Gulp.js

Gulp.js
website gulpjs.com
repository github.com/gulpjs/gulp
current version 3.9.1
monthly downloads 3 million

While it was not the first task runner, Gulp quickly became the most popular and is my personal favorite. Gulp uses easy-to-read JavaScript code which loads source files into a stream and pipes the data through various plugins before they are output to a build folder. It’s simple, fast and fun – examine Gulp.js before any other option.

npm

npm
website npmjs.com
repository github.com/npm/npm
current version 4.5.0
monthly downloads 3 million

npm is the Node.js package manager but its scripts facility can be used for general-purpose task running. It’s an attractive option for simpler projects with few dependencies. However, more complex tasks can rapidly become impractical.

Grunt

Grunt
website gruntjs.com
repository github.com/gruntjs/grunt
current version 1.0.1
monthly downloads 2 million

Grunt was one of the first JavaScript task runners to achieve mass adoption but the speed and complicated JSON configuration led to the rise of Gulp. The worst issues have now been resolved and Grunt remains a popular option.

Tools: Module Bundlers

Managing more than a few JavaScript files quickly becomes a chore. By default, browser files are not compiled so dependencies must be loaded or concatenated in an appropriate order. There are various options such as ES6 Modules and CommonJS but browser support is limited so a module bundler becomes essential.

Webpack

Webpack
website webpack.js.org
repository github.com/webpack/webpack
current version 2.5.1
monthly downloads 6 million

Webpack supports all popular module options and has become synonymous with React development. Although claiming to be a module bundler, Webpack can be used as a general-purpose task runner.

Browserify

Browserify
website browserify.org
repository github.com/substack/node-browserify
current version 14.3.0
monthly downloads 2.6 million

Browserify supports CommonJS modules as used by Node.js to compile all modules into a single browser-compatible file.

RequireJS

RequireJS
website requirejs.org
repository github.com/jrburke/r.js
current version 2.3.3
monthly downloads 1 million

RequireJS is an in-browser module loader although it can also be used in Node.js.

--ADVERTISEMENT--

Tools: Linting

“Linting” analyses your code for potential errors or deviation from syntactical standards. You’ll never miss a closing bracket or undeclared variable again!

ESLint

ESLint
website eslint.org
repository github.com/eslint/eslint
current version 3.19.0
monthly downloads 6 million

ESLint is a pluggable linting tool. Every rule is a plugin so it can be configured to your liking.

JSHint

JSHint
website jshint.com
repository github.com/jshint/jshint
current version 2.9.4
monthly downloads 2 million

A flexible JavaScript linter which strikes a good balance between genuine errors and pedantic syntactical demands! JSHint is my personal favorite.

JSLint

JSLint
website jslint.com
repository github.com/reid/node-jslint
current version 0.10.3
monthly downloads 50,000

One of the first linters and it implements a strict set of default rules. It’s a little too uncompromising for my taste!

Tools: Test Suites

Test-Driven-Development requires you to write code to test your code before you start writing it. You’re welcome to write code to test your test code too!

There are many options including Ava, Tape and Jest but the three most popular options are…

Mocha

Mocha
website mochajs.org
repository github.com/mochajs/mocha
current version 3.3.0
monthly downloads 5 million

Mocha is a JavaScript testing framework which can run tests in Node.js or a browser. It supports asynchronous testing and is often paired with Chai to enable test code to be expressed in a readable style.

Jasmine

Jasmine
website jasmine.github.io
repository github.com/jasmine/jasmine-npm
current version 2.6.0
monthly downloads 2 million

Jasmine is a behavior-driven test suite which can automate the testing your UI and interactions in a browser.

QUnit

QUnit
website https://qunitjs.com/
repository github.com/kof/node-qunit
current version 1.0.0
monthly downloads 25,000

Unsurprisingly, QUnit is a unit-testing framework which can examine function results when specific arguments are passed. It will also report test coverage to ensure you’ve not missed particular code branches.

Tools: Miscellaneous

Despite my best efforts, I accept not everyone loves JavaScript! Compilers such as TypeScript, LiveScript and CoffeeScript can make your development life a little more pleasurable. Alternatively, consider Babel which transforms modern, concise ES2015 source into cross-browser-compatible ES5 code.

There are dozens of JavaScript-powered HTML template engines including Mustache, Handlebars, Pug (Jade) and EJS. I prefer lightweight options which retain JavaScript syntax such as EJS and doT.

Finally, why write your own documentation when you can automate it? ES2015-compatible documentation generators include ESDoc, JSDoc, YUIdoc, documentation.js and Transcription.

Summary and Recommendations

If you choose to follow the wisdom of crowds, momentum is currently behind React and other libraries are moving in a similar technical direction. It’s a safe, general-purpose option for web applications but you should also consider Vue.js.

Monolithic frameworks have fallen from favor but, should you require a strict structure for larger projects, AngularJS remains a popular option. The majority has stuck with version 1.0 but that’s possibly out of necessity than choice. Longer term, version 4+ could be a safer bet if you’re willing to learn TypeScript.

Do not discount jQuery. It’s not trendy and is rarely mentioned in the technical press, but it’s actively developed and more than capable for websites and applications. jQuery has a shallow learning curve and is understood by many developers worldwide.

If you’re feeling adventurous, Svelte is an interesting client/server option which pre-renders JavaScript at build time and could change the way we approach development.

Tools choice is less critical and can vary from project to project. Most use Gulp but WebPack is increasingly popular. You can’t go wrong with ESLint and Mocha for testing but there are plenty of alternatives.

That all said, every project, team and skill set is different. You have limited time to make an assessment so it’s tempting to use what you know. This article will receive comments recommending FrameworkX but everything looks like a nail when you have a hammer.

Finally, never forget that libraries, frameworks, and tools are optional! JavaScript development has been revolutionized during the past decade; we’ve gone from a few rudimentary helper libraries to an overwhelming choice. It’s easy to fall into a trap of ever-increasing complexity or switching to the latest hot framework every few months. Consider vanilla JavaScript for smaller or personal tasks. That knowledge will not date and becomes invaluable when choosing frameworks for other projects.

Have I missed your favorite JavaScript library, framework or tool? Of course I have! Comments welcome…

This article was peer reviewed by Panayiotis Velisarakos and Sebastian Seitz. Thanks to all of SitePoint’s peer reviewers for making SitePoint content the best it can be!

Login or Create Account to Comment
Login Create Account
Recommended
Sponsors
Get the latest in JavaScript, once a week, for free.