2016 is over, you may think you missed something important? Don't worry, we are going to review what were the main trends.
Let's see by the numbers which projects got traction in 2016, by comparing the numbers of stars added on Github, over the last 12 months.
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.
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:
Vue.JS project got more than 25,000 stars on Github last year, it means 72 stars by day, it's more than any other framework, 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.
To be exact, 2 kinds of projects are mixed in the category:
We have already mentioned Vue.JS (number 1 overall), let's see the other 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. It's 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 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".
In 2016 it has never been easier to create and deploy a node.js application with solutions like:
Projects like 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?
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.
Feathers is a very flexible solution to create a "service oriented" architecture, it's a good fit to create node.js microservices.
Nodal framework targets stateless and distributed services connected to PostgreSQL databases.
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 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 no-SQL.
Loopback is an other mature framework with a lot of features built-in, including authentication with token and connectors to any kind of database.
The killer feature is the API explorer feature that let 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"...
Facebook addressed the need by providing a lighter approach called Create React App that is a very convenient to start a new React project.
Dan Abramov (the creator of Redux, working now 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.
It let developers create what is called Progressive Web Applications (or PWA): web application that run offline, using a technology called Service Worker, 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 than a native solution. "Write Once Run Everywhere"... This is a developer's dream came true!
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.
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.
During years CoffeeScript and its lean syntax, inspired by Python and Ruby syntax, was the most popular compiler but it was less more trendy in 2016, a lot of developers moved from CoffeeScript to ES6 with Babel.
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 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 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.
Nevertheless it can play well with webpack even if developers tend to use npm scripts instead.
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.
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, an other 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 mocking abilities built-in, whereas other testing frameworks usually rely on libraries like Sinon.JS.
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.
In our results, Microsoft leads the way with Visual Studio Code.
It provides a nice integration with TypeScript and node.js. Some developers mention improvement about development speed thank 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, 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!
Build sites like it's 1995
Static web site 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.
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:
Thank you for your attention, feel free to share this article or to reach us on Github!