Table of Contents

The following graphs compare the number of stars added on Github over the last 12 months. We analyzed projects coming from bestof.js.org, a curated list of the best projects related to the web platform.

This Front-end Frameworks category is maybe the one that is responsible for what was called the JavaScript fatigue in 2016.
It seemed that every month a new contender made the buzz, pushing the pace of innovation!

To be exact, 2 kinds of projects are mixed in the category:

Full frameworks that include all features to create a modern web application (routing, data fetching, state management). Angular 1, Angular 2, Ember or Aurelia fall in this category.

We have already mentioned Vue.JS (number 1 overall), let's see the other contenders.

React and its contenders

React is number 2, no front-end developer can ignore React and its rich eco-system.

React is so popular that it inspired a lot of other libraries that aim to take the best of React, without the fat, in order to improve both performance in the browser and building time.

Inferno was the most popular project in this category, it claims to be the fastest alternative to React.

Following closely Inferno in our rankings, Preact is a nice alternative to React too.
Its eco-system is quite mature, for example there is a boilerplate with offline capabilities, a router, a compat module so that you can use any existing React library inside your Preact project.

Angular 1 and 2

Angular project has been split into 2 repositories because Angular 2 is a full rewrite of Angular 1, even if some concepts remain the same.

Angular 2 is written in TypeScript and takes advantage of ES6 to deliver a modern and thorough framework.

Angular 1 (called "AngularJS" on Github) is still used in many projects and will remain popular for a while.

It's worth to mention that Ember, despite its large eco-system and its community is not in the top 10.

So it seems that, rather than opting for full frameworks with all features "out of the box", developers in 2016 flavored lighter approaches and prefer to compose their own solution "à la carte".

When you build a web application with node.js, Express is often considered as the de-facto web server.
Its philosophy (a minimalistic core that you can extend using middleware packages) is familiar to most of node.js developers.

Keystone is one of the best solutions I know to get an admin client up and running, in order to manage the content coming from a MongoDB database.
The Admin UI is automatically generated from the models, has all CRUD actions and nice filters.

Loopback is another mature framework with a lot of built-in features, including authentication with token and connectors to any kind of database.

The killer feature is the API explorer that lets developers check all API end-points in an intuitive way, with the ability to check any user's token.
It's definitively a good choice if you have to build an API.

Facebook addressed the need by providing a lighter approach called Create React App that is a very convenient way to start a new React project.

Dan Abramov (the creator of Redux, now working for Facebook) did a great job, finding the right balance between simplicity and features. For example there is no fancy styling solution (just plain CSS), no server-side rendering, but everything is well packaged and the developer experience is really good.

The main difference with its contenders is that if you use Create React App, it becomes a dependency of your project, all the magic is hidden and what you see is only your application code. You can upgrade the dependency at any time, it's not just a starting point.

The well named React boilerplate has everything you need, including Redux and some nice offline features, taking advantage of the web workers technology.

It lets developers create what is called Progressive Web Applications (or PWA): web applications that run offline, using a technology called Service Worker, for more information you can read this article from Nicolás Bevacqua.

Next.js, created by the busy folks from Zeit, has a server-side rendering feature that can be used to create universal applications (or isomorphic applications, as we used to say in 2015), that is to say applications that run more or less with the same code client AND server-side.

With React Native, from the same code base, you can build iOS and Android real native mobile applications, using concepts familiar to React developers. To know more about building applications for both iOS and Android, read this tutorial.

Other solutions, based on Cordova, used to rely on Webview to render the screens and were not as efficient as a native solution.
"Write Once Run Everywhere"... This is a developer's dream came true!

We are talking here about compilers (or "transpilers") that generate JavaScript from any language (or any variation of JavaScript).
They transform the code into "standard JavaScript" code that the browser (or node.js) can execute.

For example compilers let developers write code using the latest version of JavaScript (ES6) without having to worry about browser support.

The most trendy transpiler was TypeScript, it brings to web developers the static types used by Java and C# developers.
The fact that Angular 2 uses TypeScript added even more traction.
There are pros and cons about using types in JavaScript, read these 2 article to make your own point of view:

Babel, along with Webpack, almost became a standard to compile ES6 code and templates used by libraries like React (JSX) in standard JavaScript. Initially created to compile ES6, it became a much more generic tool that can accomplish any code transformation, thanks to a system of plugins.

Flow is not a compiler, it's a static type checker used to "annotate" the JavaScript code.
Basically using Flow inside a code base means adding comments to describe expected types (read more about using Flow to write modules here).

It's used inside the code source of Facebook projects. Since Facebook became one of the major actors of the open source world (with projects like React, React Native, Flux, Immutable, Jest...), that means a lot.

In 2016, it's difficult to imagine a web application without any kind of building process.
You usually need a building process to compile templates and optimize assets in order to ship your web application in production.

Browserify, because of its simplicity is usually loved by node.js developers.

Basically it takes several node.js packages as an input and generates one single "build" file for the browser as an output. But it seems that a more opinionated tool like Webpack is a a better fit to web application workflows.

Looking forward...

A module bundler to follow in 2017, that emphasizes on performance: rollup.

It uses ES6 modules with a feature called Tree shaking to create bundles that include only functions you use in your code, instead of shipping the full library.

Jest, another Facebook project, got a lot of traction over the last weeks. It's well-known in the React community, more and more people are moving to Jest (read this story for example) and it may become the most popular testing framework in 2017.

Jest has good built-in mocking abilities, whereas other testing frameworks usually rely on libraries like Sinon.JS.

Atom, pushed by Github and built with Electron (like several other desktop applications, including the Slack desktop client) is not far behind Visual Studio Code. An interesting fact about Atom: its main language is CoffeeScript!

Static site generators (or "SSG") are tools that generate a bunch of .html, .css and JavaScript files that you can deploy on any simple web server (Apache or NGNX) without the fuss of setting up a database.
As Gatsby web site says:

Build sites like it's 1995

Static web sites are fast, robust and easy to maintain.

SSG are very popular because there are a lot of very good solutions to host static web site for free:

In 2016, the most popular SSG built with node.js was Hexo. It's a thorough SSG, close to CMS systems like Wordpress, that can be used to build a blog for example.
It has a lot of features including an internationalization plugin.

The newcomer Gatsby is a very interesting solution, it stands out from its contenders because it uses React ecosystem to generate static html files. The fact that you can combine React components, Markdown files and server-side rendering makes it very powerful.

We have been talking about projects that got traction on Github in 2016 but what really matters is developer's satisfaction.
So if you want a more qualitative approach, check the results from Sacha Greif’s State of JavaScript survey. More than 9,000 responses were collected!

It's time to think about 2017, where are the next rising stars?

Here are my 10 picks of the year, the projects and the ideas I liked in 2016 and that will keep up growing in 2017: