Table of Contents
Most Popular Projects in 2016
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
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.
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:
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?
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 non-SQL.
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.
Create React App
React Starter Kit
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 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.
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!
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 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 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, 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.
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 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, 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
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.
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
- 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!