Table of Contents
Most Popular Projects Overall
Create React App
These are the hottest projects of the year, all categories included.
Vue.js strikes again
Once again, Vue.js is the trendiest project of the year, with more than 40,000 stars added on GitHub during the year.
It's far more than in 2016 (26,000 stars), and the gap with the next contender (React) is even bigger.
So what makes Vue.js special?
- First, it has a small learning curve, with a component approach similar to React but with a more familiar syntax.
- The ecosystem is well defined, including a set of de-facto standards: router: vue-router, State management library: Vuex
- The concept of single-file component that includes template, logic and styles in a single file
.vuefile is really nice.
- It's used by one of the most popular PHP frameworks, Laravel, as its default view engine.
- It's not backed by a big company of the Internet like Facebook or Google but maintained by Evan You as an open-source project sponsored through crowd-sourcing.
And this may be related with the last point, but Vue.js is very popular among developers from China. It's used by the biggest e-commerce platform of China (Alibaba), but also by companies like GitLab or Adobe.
React, number 2, again!
Like in 2016, React is number 2, with more than 27,000 stars added on GitHub (note that we're specifically talking about stars added over the year, not the total number of stars).
Create React App, the third project, is the recommended way to start a new project with React, and its success made a lot of React boilerplates less relevant than before.
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 Axios library is the most used HTTP client.
It can work on both the client side (AJAX requests from the client) or on the server-side (HTTP requests in a Node.js environment)
Its success may be related to Vue.js too, because a lot of Vue.js tutorials use it to query a distant API through HTTP.
Puppeteer is one of the great stories of the year. Made by the Google Chrome team, it's a headless Chrome browser, that is to say a browser that runs in the background and that can be piloted by code.
It can be used to do things like:
- Automatically testing web application UIs in real browsers.
- Taking snapshots of web pages to do server-side rendering.
- Generating PDF files using Google Chrome ability to save pages as PDF files.
The "front-end framework" category has been a battlefield for a while, but it seems that things are finally calming down, as we can see clearly 3 big players dominating the game.
The Big-3: Vue, React and Angular
We talked previously about the success of Vue.js and its integrated approach.
By opposition, the React landscape is still fragmented, and developers have to make more deliberate choices about all the things that go around the view layer:
- Routing between pages.
- How to fetch data.
- How to bind forms to data.
- How store the state of the application.
On the contrary, the Angular ecosystem is more controlled, more stable. There is an Angular Way to do things.
That's probably partly why Angular has a more "corporate" image. And this image has been emphasized with the usage of static types using TypeScript, which resonates with backend developers familiar with types from languages like C# or Java.
Less is more
Similar, most other contenders in this category emphasize a small footprint that leads to better performance in the browser in order to differentiate themselves from the big 3.
The best example about this motto is Hyperapp, a very hot project over the last weeks. It mixes the functional approach and the JSX syntax from React and a state management system inspired by Redux... In less than 1 KB!
But unlike other languages where de-facto standards have emerged over the years (think about Ruby on Rails for Ruby, Django for Python or Laravel for PHP), there is no golden standard or recommended architecture when you want to create a new node.js server.
It seems that Express minimalist approach perfectly matches the micro-services trend that promotes the creation of several decoupled smaller applications over the development of a single "monolith" application.
Compared to last year, 3 newcomers joined the TOP 10 node.js frameworks:
- Fastify is built as a general-purpose web framework, inspired by Hapi, but is well suited to building fast JSON-based HTTP APIs.
- Server.js aims to be a ‘everything works out of the box’ experience.
- Nest features an architecture familiar to Angular developers, made of modules and controller, written in TypeScript.
Create React App
In 2016 Create React App solved the problem of how to start coding a React application by providing a nice set of presets, very well packaged. Facebook keeps releasing new versions very often and it was by far the most popular project in 2017 among the React ecosystem.
But even if Create React App is often considered as the default "starter kit" for React, developers may need more opinionated starter kits: React boilerplate was the most popular project in this category, providing a lot of feature like the GraphQL integration.
Recompose's popularity denotes one of the features seasoned developers love about React: its "functional" approach, everything is just a function and Recompose provides a full set of helpers to go further in this direction.
Guest Writer: Evan You
As much as we admire Vue.js, we have to admit we're not that familiar with its ecosystem.
That's why we looked for an expert to give us their opinion on this year's stats, and who better than the creator of Vue.js himself?
With the rising popularity of Vue itself, many Vue ecosystem projects also enjoyed rapid growth in 2017.
Vuetify is a Material Design component framework that can be used for both mobile and desktop web apps, and is probably the most feature rich with server-side rendering, PWA and CLI template support. There's also Vue material which focuses more on providing a set components that strictly adhere to the Material Design spec.
Nuxt is a higher-level framework built on top of Vue that provides a very smooth development experience for building universal, server-rendering Vue applications. It is also very versatile - you can use the same codebase to ship a normal SPA, or even generate a static site.
Weex is a framework that allows users to develop native-rendering mobile apps using familiar Vue syntax and API. It is developed by Alibaba and used in production in some of the most heavily used mobile apps in the world, with a strong focus on performance.
In this category, we find again the 3 main actors of the "Front-end frameworks":
As highlighted in this video Cross platform apps with React Native, the promise: "Write Once, Run Everywhere" was fulfilled!
You may need such a compiler in your building workflow for 2 reasons:
- You want to add new features to the language... such as "type checking".
One of the hottest questions that divide developers is: types or not types?
It's maybe the biggest surprise of the year, the trendiest building tool is Parcel, a brand new project that gathered more than 14,000 stars since the project was launched on GitHub in August.
Parcel offers all the goodies of modern web development with a killer feature: zero configuration!
That's the main difference with Webpack, that relies on a whole ecosystem of plugins called "loaders".
Do not misunderstand the numbers, Webpack is still the most popular bundler for modern applications, with a total of 35,000 stars on GitHub and more than 500 contributors.
Webpack keeps on evolving, the version 2 lets developers implement features like "code splitting" very easily, through dynamic imports.
From the React blog
Rollup is a perfect fit for libraries like React that can be pre-built and then integrated into apps.
It was first created by Facebook to run tests for React components, but its evolution has been very fast over the last months (already 22 majors versions released!) and it can be used to write tests for front-end and back-end code.
Jest shines because of several points:
- No configuration needed, the default settings match the usually needs
- Great developer experience (intelligent watch mode, very nice error reporting...)
- Syntax close to Mocha, a lot of developers are familiar with
- No extra library required to make assertions, it's "battery included".
- Features a unique "snapshot" mode that records automatically the response expected for future tests.
AVA, number one last year, has still a lot of traction.
It has been created by Sindre Sorhus who uses it on all his projects... and that means a lot of great projects!
It emphasizes on speed by running tests in parallel, it has a smaller footprint and is closer to testing standards, with a syntax close to test frameworks like Tape.
IDEs & Editors
Here we talk about the text editors from the open source world, built with web technologies (sorry for Sublime users!).
They also led the way in 2017 but VS Code took a big advantage over its rival.
Every month, a new version of VS Code is released bringing, more and more helpful features to the IDE, without sacrificing performance too much. Out of the box, without installing anything, you have a great set of features:
- Git integration
importa module, NPM packages names...
- React syntax integration
If you add Prettier to the mix, asking the editor to automatically format your files every time you save, you have the perfect combo to enjoy code poetry!
There is still no consensus about the best way to style React components.
Or, if you need more flexibility, you can do it the "old way", using global CSS styles from a popular CSS toolkit like Bootstrap or Bulma, and assigning appropriate
classNames to your components. But then your component is not self-contained anymore, since its style is being managed elsewhere.
CSS Modules, number 2 in this category, adopts a more hybrid approach. It lets developers write styles in the language of their choice (regular CSS, Sass, Less, Stylus), using files that are located next to the related components and that are imported into the components
Number 2 in 2016, Gatsby gets revenge in 2017. It comes with a lot of great features to optimize your static site:
- Fast browsing & exporting
- Aggressive preloading
- Intelligent code splitting (templates + page data)
React Starter Kit
When future historians look back at the history of GraphQL, 2017 might very well be a turning point.
Beyond these two big players, companies like Graphcool have also released a plethora of tools and libraries, and GraphQL-powered full-stack frameworks like Vulcan are also starting to create their own niche.
It's also worth mentioning that this year's most popular static site generator Gatsby also uses GraphQL as part of its data processing chain.
With so many players venturing out in the GraphQL galaxy, it's only a matter of time before the technology becomes a widespread alternative to REST.
We have seen by the numbers that Vue.js is once again the winner of this year, and its success is not slowing down.
The React eco-system keeps growing up, after finally putting its license-related issues behind it.
But if we had to pick one project among the 2017 Rising Stars it would be Prettier. It's so nice to be able to write code without worrying about formatting!
- A new framework based on GraphQL?
- A library that takes advantage of the new WebAssembly standard to create a unique experience in the browser?
Let us know what you think! In the meantime, thank you for your attention, and feel free to share this article or reach us on GitHub if you have any feedback… and see you next year!