2016 JavaScript Rising Stars

Overview

By checking the 10 hottest projects of the year, you can get a good overview of what was the web development landscape in 2016, since you will find:

• 3 UI frameworks: Vue.js, React and Angular
• A new node.js package manager: yarn
• The leading solution to build desktop applications: Electron
• A solution to quicky start a new React project Create React App
• A mobile framework: React Native
• The most famous CSS toolkit: Bootstrap
• A state management library based on functional concepts: Redux
• A powerful and flexible chart library: D3

It tells a lot about JavaScript ubiquity and versatility in 2016.

And the 2016 winner is... 🏆

Vue.js project got more than 25,000 stars on GitHub last year, it means 72 stars per day, it's more than what any other framework got, including React and Angular.

The version 2, that takes advantage of the Virtual DOM for performance, was released in October.

Vue.js is used in production by big companies (including Alibaba, the biggest e-commerce company in China), so you can consider it as a safe choice.

There is already a quite mature eco-system around it, including a router (vue-router) and a state management library (vuex).

It seems that Vue.js took the best of React (the component approach) and Angular 1 (templates are html code enhanced by the framework features).

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, Ember or Aurelia fall in this category.
• Lighter solutions that focus on the UI layer, like React, Vue.js, Inferno...

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

In 2016 it has never been easier to create and deploy a node.js application with solutions like:

• Now
• Webtask.io
• Stdlib

Projects like Glitch (previously called Gomix) even lowered the barrier to the node.js world, making easy to anyone to write and share node.js code in a few clicks, right from the browser.

So if you have to build a web application, which framework to choose?

Express

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.

Koa

Koa philosophy is close to Express but it's built using ES6 generators to avoid a problem sometimes called Callback Hell.

Feathers

Feathers is a very flexible solution to create a "service oriented" architecture, it's a good fit to create node.js microservices.

Nodal

Nodal framework targets stateless and distributed services connected to PostgreSQL databases.

Keystone

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.

Sails

Sails is a full MVC framework, very inspired by Ruby on Rails (hence the name Sails!). It has been around for a long time. It can play with any kind of database, SQL or non-SQL.

loopback

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.

React is a great UI library but using React and the modern web development workflow tools require a lot of configuration. So how to start creating a real-world application?

It's the answer provided by the React "boilerplates" and other "starter kits"...

Create React App

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.

React boilerplate

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

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.

JavaScript is so ubiquitous that you can build native mobile applications using technologies web developers already know (HTML, JavaScript, CSS).

React Native

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!

Ionic

Ionic was a pioneer with the concept of "hybrid" applications. Under the hood, it's based on Cordova to access the mobile device features. It's very mature with a large eco-system.

NativeScript

NativeScript aims for the same goal as React Native (build real mobile applications using web technologies). It comes in 2 flavors, NativeScript Core and NativeScript + Angular 2

Looking forward...

A project to follow closely in 2017: Weex, a framework for building Mobile cross-platform UI built on top of Vue.js.

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.

TypeScript

The most trendy transpiler was TypeScript, it brings to web developers the static types used by Java and C# developers. The fact that Angular 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:

• You Might Not Need TypeScript
• TypeScript: the missing introduction

Babel

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

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.

CoffeeScript

During years CoffeeScript and its lean syntax, inspired by Python and Ruby syntax, was the most popular compiler but a lot of developers moved from CoffeeScript to ES6 with Babel in 2016.

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.

Webpack

Webpack is the main tool used to build a single-page application, it plays well with the React eco-system. The newly released version 2 comes with some promising enhancements (check this introduction)

Gulp

Gulp is a generic a task runner that can be used for any kind of automatic process involving the file system, so it's not a direct contender of Webpack or Browserify.

Like Grunt, Gulp works by aggregation: you can ask it to minify and concatenate a list of assets but it does not deal with modular JavaScript by itself, as Webpack or Browserify do.

Nevertheless it can play well with webpack even if developers tend to use npm scripts instead.

Browserify

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.