Table of Contents
Most Popular Projects Overall
Trends in 2017
- Total stars80.7k☆
Create React App
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
Without surprise, the 3 most popular UI frameworks are Vue.js, React and Angular
It's common to call these frameworks but, to be more accurate, the only framework is Angular, and we should call Vue.js and React libraries.
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
Behind the Big-3, it's very interesting to notice that Preact is number 4. Preact is a smaller alternative to React: the same API, but in less than 3KB.
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.
Despite its age, Express was not only the trendiest node.js framework in 2017 but it's also used as the backbone of many other frameworks or CMS, including Feathers, Keystone or Nest.
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
The React library being only the view layer, it creates space for a whole ecosystem that is moving very fast. In this category, we included projects built on top of React and React Native libraries.
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.
As an example of its success, we could mention StackBlitz, an online IDE that lets you run application created from Create React App, right from the browser, in a few seconds.
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.
Ant Design, Ant Design Pro and Material UI are sets of styled React components to help developers create a web application with React components, without worrying about the styling.
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.
Element and iView are the two most popular UI component kits, both focused on rapid desktop UI development. Mint UI and vux, on the other hand, are the two most popular mobile-focused UI kits.
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":
- React with React Native
- Vue with Weex and Quasar
- Angular with Ionic and NativeScript
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?
And then, if you think you need types, the 2 main contenders are: TypeScript, provided by Microsoft and Flow, provided by Facebook (and used on their main projects: React, React Native, Jest...)
Read this article from James Kyle to understand the difference: A Comparison Between Adopting Flow or TypeScript
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.
A lot of projects use it under the hood, including Create React App and Gatsby, 2 of the most popular projects of the year.
Webpack keeps on evolving, the version 2 lets developers implement features like "code splitting" very easily, through dynamic imports.
While Webpack and Parcel both target the building process of web applications, Rollup targets libraries. It focuses on performance by taking advantage of ES6 modules.
Rollup is used by some major libraries and it's worth to mention that the React team migrated their build system from Browserify to Rollup in 2017.
From the React blog
Rollup is a perfect fit for libraries like React that can be pre-built and then integrated into apps.
Poi has the same goal as Parcel: a build tool for modern web applications and libraries, it's zero-config by default but gives you the ability to extend via presets.
As we predicted last year (it's the first time we predicted something right!), Jest became the trendiest testing framework in 2017.
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!).
In 2016, VS Code, backed by Microsoft and Atom, backed by GitHub were really close at the top of the category.
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.
You can use a ready-made component toolkit like Material UI or Ant Design if your needs are pretty "standard" and you don't need too much customization.
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)
Gatsby uses React as the view layer and GraphQL to query the content at the building time. It has a strong community and React official web site itself is built with Gatsby.
React Static is the newcomer in this category. It aims to be a lighter alternative to Gatsby, with a focus on performance and simplicity, inspired by Create React App project.
It's worth to mention that both Next.js and Nuxt projects can also be used as Static Site Generators.
React Starter Kit
When future historians look back at the history of GraphQL, 2017 might very well be a turning point.
Major companies such as the New York Times have started adopting GraphQL, and on the library front both Relay and Apollo (the two main GraphQL client libraries) released major updates this year.
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!
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?
.vuefile is really nice.
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: