Table of Contents
Most Popular Projects in 2016
Trends in 2016
GitHub data
- Created2013-07
- Total stars79.3k☆
Links
- GitHub
- Homepage
React
Trends in 2016
GitHub data
- Created2013-05
- Total stars85.4k☆
Links
- GitHub
- Homepage
Electron
Trends in 2016
GitHub data
- Created2013-04
- Total stars55.1k☆
Links
- GitHub
- Homepage
React Native
Trends in 2016
GitHub data
- Created2015-01
- Total stars58.3k☆
Links
- GitHub
- Homepage
Redux
Trends in 2016
GitHub data
- Created2015-05
- Total stars37.2k☆
Links
- GitHub
- Homepage
Front-end Frameworks
Vue.js
Trends in 2016
GitHub data
- Created2013-07
- Total stars79.3k☆
Links
- GitHub
- Homepage
React
Trends in 2016
GitHub data
- Created2013-05
- Total stars85.4k☆
Links
- GitHub
- Homepage
Angular
Trends in 2016
GitHub data
- Created2014-09
- Total stars31.8k☆
Links
- GitHub
- Homepage
Angular 1
Trends in 2016
GitHub data
- Created2010-01
- Total stars57.8k☆
Links
- GitHub
- Homepage
Inferno
Trends in 2016
GitHub data
- Created2015-02
- Total stars12.0k☆
Links
- GitHub
- Homepage
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".
Node.js Frameworks
Express
Trends in 2016
GitHub data
- Created2009-06
- Total stars36.0k☆
Links
- GitHub
- Homepage
Koa
Trends in 2016
GitHub data
- Created2013-07
- Total stars19.1k☆
Links
- GitHub
- Homepage
Feathers
Trends in 2016
GitHub data
- Created2011-10
- Total stars8.2k☆
Links
- GitHub
- Homepage
Keystone
Trends in 2016
GitHub data
- Created2013-07
- Total stars11.7k☆
Links
- GitHub
- Homepage
Sails
Trends in 2016
GitHub data
- Created2012-03
- Total stars18.2k☆
Links
- GitHub
- Homepage
In 2016 it has never been easier to create and deploy a node.js application with solutions like:
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 Ecosystem
Create React App
Trends in 2016
GitHub data
- Created2016-07
- Total stars40.7k☆
Links
- GitHub
Material UI
Trends in 2016
GitHub data
- Created2014-08
- Total stars32.1k☆
Links
- GitHub
- Homepage
React Router
Trends in 2016
GitHub data
- Created2014-05
- Total stars27.4k☆
Links
- GitHub
- Homepage
React boilerplate
Trends in 2016
GitHub data
- Created2015-02
- Total stars16.7k☆
Links
- GitHub
- Homepage
React Starter Kit
Trends in 2016
GitHub data
- Created2014-04
- Total stars16.6k☆
Links
- GitHub
- Homepage
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.
Mobile
React Native
Trends in 2016
GitHub data
- Created2015-01
- Total stars58.3k☆
Links
- GitHub
- Homepage
Ionic
Trends in 2016
GitHub data
- Created2013-08
- Total stars32.9k☆
Links
- GitHub
- Homepage
NativeScript
Trends in 2016
GitHub data
- Created2015-03
- Total stars12.1k☆
Links
- GitHub
- Homepage
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.
Compilers
TypeScript
Trends in 2016
GitHub data
- Created2014-06
- Total stars29.8k☆
Links
- GitHub
- Homepage
Babel
Trends in 2016
GitHub data
- Created2014-09
- Total stars25.2k☆
Links
- GitHub
- Homepage
Reason
Trends in 2016
GitHub data
- Created2015-11
- Total stars4.6k☆
Links
- GitHub
- Homepage
CoffeeScript
Trends in 2016
GitHub data
- Created2009-12
- Total stars14.5k☆
Links
- GitHub
- Homepage
ClojureScript
Trends in 2016
GitHub data
- Created2011-07
- Total stars7.5k☆
Links
- GitHub
- Homepage
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:
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.
Build Tools
Webpack
Trends in 2016
GitHub data
- Created2012-03
- Total stars35.7k☆
Links
- GitHub
- Homepage
Gulp
Trends in 2016
GitHub data
- Created2013-07
- Total stars28.4k☆
Links
- GitHub
- Homepage
Rollup
Trends in 2016
GitHub data
- Created2015-05
- Total stars11.5k☆
Links
- GitHub
- Homepage
Browserify
Trends in 2016
GitHub data
- Created2010-09
- Total stars11.7k☆
Links
- GitHub
- Homepage
Grunt
Trends in 2016
GitHub data
- Created2011-09
- Total stars11.7k☆
Links
- GitHub
- Homepage
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.
Testing Frameworks
AVA
Trends in 2016
GitHub data
- Created2014-11
- Total stars12.4k☆
Links
- GitHub
Jest
Trends in 2016
GitHub data
- Created2013-12
- Total stars14.7k☆
Links
- GitHub
- Homepage
Mocha
Trends in 2016
GitHub data
- Created2011-03
- Total stars14.3k☆
Links
- GitHub
- Homepage
Jasmine
Trends in 2016
GitHub data
- Created2008-12
- Total stars13.2k☆
Links
- GitHub
- Homepage
Tape
Trends in 2016
GitHub data
- Created2012-11
- Total stars4.3k☆
Links
- GitHub
The 2 most famous testing frameworks are Jasmine and Mocha but 2 more recent projects got more traction in 2016: AVA and Jest.
AVA
AVA, created by the prolific Sindre Sorhus puts emphasize on performance (parallel test) and ES6. AVA's syntax is close to standard test frameworks like Tape and Node-tap.
Jest
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.
IDE
VS Code
Trends in 2016
GitHub data
- Created2015-09
- Total stars41.8k☆
Links
- GitHub
- Homepage
Atom
Trends in 2016
GitHub data
- Created2012-01
- Total stars42.7k☆
Links
- GitHub
- Homepage
Brackets
Trends in 2016
GitHub data
- Created2011-12
- Total stars28.6k☆
Links
- GitHub
- Homepage
Deco IDE
Trends in 2016
GitHub data
- Created2016-05
- Total stars5.5k☆
Links
- GitHub
- Homepage
About IDE (Integrated Development Environment), it's worth to mention that 2 of the most popular IDEs are open-source projects made with web technologies.
VS Code
In our results, Microsoft leads the way with VS Code.
It provides a nice integration with TypeScript and node.js. Some developers mention improvement about development speed thanks to the IntelliSense feature (a mix of highlighting and autocomplete).
Saying "open source" and "Microsoft" in the same sentence is no more an oxymoron!
Atom
Atom, pushed by GitHub and built with Electron (like several other desktop applications, including the Slack desktop client) is not far behind VS Code. An interesting fact about Atom: its main language is CoffeeScript!
Static Site Generators
Hexo
Trends in 2016
GitHub data
- Created2012-09
- Total stars20.1k☆
Links
- GitHub
- Homepage
Gatsby
Trends in 2016
GitHub data
- Created2015-05
- Total stars17.1k☆
Links
- GitHub
- Homepage
Metalsmith
Trends in 2016
GitHub data
- Created2014-02
- Total stars6.5k☆
Links
- GitHub
- Homepage
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:
Hexo
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.
Gatsby
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.
Conclusion
Despite the JavaScript fatigue™ and the dramas (remember the "leftpad gate"), 2016 was a great year for the community, with the rise of projects like Vue.js and React Native, and new projects like Yarn or Create React App.
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:
- Vue.js: the momentum will not stop
- Electron
- Create React App
- React Native
- Gatsby (used to build this page!)
- Yarn: a fast, reliable and secure dependency management that can replace npm, you can read about the state of node.js package managers here
- The concept of "Progressive Web Applications"
- Node.js micro-services made easy to deploy with a hosting solution like Now
- The evolution of Node.js: the latest releases support very well the ES6 syntax
- And one more pick would be GraphQL: all my friends told me that something big is coming!
Thank you for your attention, feel free to share this article or to reach us on GitHub!
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:
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).