Table of Contents
Most Popular Projects Overall
Trends in 2017
GitHub data
- Created2013-07
- Total stars80.7k☆
Links
- GitHub
- Homepage
React
Trends in 2017
GitHub data
- Created2013-05
- Total stars86.2k☆
Links
- GitHub
- Homepage
Create React App
Trends in 2017
GitHub data
- Created2016-07
- Total stars41.4k☆
Links
- GitHub
Puppeteer
Trends in 2017
GitHub data
- Created2017-05
- Total stars24.0k☆
Links
- GitHub
Axios
Trends in 2017
GitHub data
- Created2014-08
- Total stars34.5k☆
Links
- GitHub
VS Code
Trends in 2017
GitHub data
- Created2015-09
- Total stars42.5k☆
Links
- GitHub
- Homepage
Prettier
Trends in 2017
GitHub data
- Created2016-11
- Total stars20.4k☆
Links
- GitHub
- Homepage
React Native
Trends in 2017
GitHub data
- Created2015-01
- Total stars58.7k☆
Links
- GitHub
- Homepage
Element
Trends in 2017
GitHub data
- Created2016-09
- Total stars22.4k☆
Links
- GitHub
- Homepage
Electron
Trends in 2017
GitHub data
- Created2013-04
- Total stars55.5k☆
Links
- GitHub
- Homepage
Front-end Frameworks
Vue.js
Trends in 2017
GitHub data
- Created2013-07
- Total stars80.7k☆
Links
- GitHub
- Homepage
React
Trends in 2017
GitHub data
- Created2013-05
- Total stars86.2k☆
Links
- GitHub
- Homepage
Angular
Trends in 2017
GitHub data
- Created2014-09
- Total stars32.2k☆
Links
- GitHub
- Homepage
Preact
Trends in 2017
GitHub data
- Created2015-09
- Total stars17.3k☆
Links
- GitHub
- Homepage
Hyperapp
Trends in 2017
GitHub data
- Created2017-01
- Total stars10.3k☆
Links
- GitHub
- Homepage
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!
Node.js Frameworks
Express
Trends in 2017
GitHub data
- Created2009-06
- Total stars36.2k☆
Links
- GitHub
- Homepage
Koa
Trends in 2017
GitHub data
- Created2013-07
- Total stars19.3k☆
Links
- GitHub
- Homepage
Fastify
Trends in 2017
GitHub data
- Created2016-09
- Total stars6.0k☆
Links
- GitHub
- Homepage
Gun
Trends in 2017
GitHub data
- Created2014-07
- Total stars7.2k☆
Links
- GitHub
- Homepage
micro
Trends in 2017
GitHub data
- Created2016-01
- Total stars5.9k☆
Links
- GitHub
- Homepage
Of course JavaScript is no more limited to the front-end side of web applications, it's more and more used to create the back-end too, and Mikeal Rogers, an influent member of the node.js community, predicts that Node.js Will Overtake Java Within a Year.
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.
React Ecosystem
Create React App
Trends in 2017
GitHub data
- Created2016-07
- Total stars41.4k☆
Links
- GitHub
Ant Design
Trends in 2017
GitHub data
- Created2015-04
- Total stars23.1k☆
Links
- GitHub
- Homepage
Next.js
Trends in 2017
GitHub data
- Created2016-10
- Total stars21.4k☆
Links
- GitHub
- Homepage
Storybook
Trends in 2017
GitHub data
- Created2016-03
- Total stars19.1k☆
Links
- GitHub
- Homepage
Gatsby
Trends in 2017
GitHub data
- Created2015-05
- Total stars17.7k☆
Links
- GitHub
- Homepage
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.
Vue Ecosystem
Element
Trends in 2017
GitHub data
- Created2016-09
- Total stars22.4k☆
Links
- GitHub
- Homepage
iView
Trends in 2017
GitHub data
- Created2016-07
- Total stars12.4k☆
Links
- GitHub
- Homepage
Vuex
Trends in 2017
GitHub data
- Created2015-07
- Total stars12.3k☆
Links
- GitHub
- Homepage
Weex
Trends in 2017
GitHub data
- Created2017-01
- Total stars7.5k☆
Links
- GitHub
- Homepage
Nuxt
Trends in 2017
GitHub data
- Created2016-10
- Total stars9.2k☆
Links
- GitHub
- Homepage
Vuetify
Trends in 2017
GitHub data
- Created2016-09
- Total stars7.8k☆
Links
- GitHub
- Homepage
Mint UI
Trends in 2017
GitHub data
- Created2016-05
- Total stars9.4k☆
Links
- GitHub
- Homepage
vux
Trends in 2017
GitHub data
- Created2016-02
- Total stars11.0k☆
Links
- GitHub
- Homepage
vue-router
Trends in 2017
GitHub data
- Created2013-12
- Total stars8.5k☆
Links
- GitHub
- Homepage
Vue material
Trends in 2017
GitHub data
- Created2016-06
- Total stars5.3k☆
Links
- GitHub
- Homepage
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?
![](/img/guests/evan.jpg)
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.
Mobile
React Native
Trends in 2017
GitHub data
- Created2015-01
- Total stars58.7k☆
Links
- GitHub
- Homepage
Weex
Trends in 2017
GitHub data
- Created2017-01
- Total stars7.5k☆
Links
- GitHub
- Homepage
Ionic
Trends in 2017
GitHub data
- Created2013-08
- Total stars33.0k☆
Links
- GitHub
- Homepage
Quasar
Trends in 2017
GitHub data
- Created2015-10
- Total stars4.8k☆
Links
- GitHub
- Homepage
NativeScript
Trends in 2017
GitHub data
- Created2015-03
- Total stars12.2k☆
Links
- GitHub
- Homepage
JavaScript is so versatile that it can also be used to build mobile applications, meaning that you can share components between the web and the mobile platforms.
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
Like in 2016, React Native is the trendiest solution, based on JavaScript, to build a native application, whether it's for iOS, Android or Windows systems.
As highlighted in this video Cross platform apps with React Native, the promise: "Write Once, Run Everywhere" was fulfilled!
Compilers
TypeScript
Trends in 2017
GitHub data
- Created2014-06
- Total stars30.2k☆
Links
- GitHub
- Homepage
Babel
Trends in 2017
GitHub data
- Created2014-09
- Total stars25.4k☆
Links
- GitHub
- Homepage
Flow
Trends in 2017
GitHub data
- Created2014-10
- Total stars15.1k☆
Links
- GitHub
- Homepage
Reason
Trends in 2017
GitHub data
- Created2015-11
- Total stars4.7k☆
Links
- GitHub
- Homepage
Purescript
Trends in 2017
GitHub data
- Created2013-09
- Total stars4.4k☆
Links
- GitHub
- Homepage
Here we talk about languages that compile to regular JavaScript code.
You may need such a compiler in your building workflow for 2 reasons:
- You want to enjoy all the features of the latest version of the JavaScript language (ES7) while making your code compatible with a maximum of Web browsers. This feature made the success of Babel, which a lot of projects depend on.
- 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?
JavaScript has basic dynamic types but not static types. A lot of developers feel like they need types in their code, especially in big code base, to make it more robust and easier to read/understand.
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
Build Tools
Parcel
Trends in 2017
GitHub data
- Created2017-08
- Total stars16.9k☆
Links
- GitHub
- Homepage
Webpack
Trends in 2017
GitHub data
- Created2012-03
- Total stars36.1k☆
Links
- GitHub
- Homepage
Gulp
Trends in 2017
GitHub data
- Created2013-07
- Total stars28.5k☆
Links
- GitHub
- Homepage
Rollup
Trends in 2017
GitHub data
- Created2015-05
- Total stars11.6k☆
Links
- GitHub
- Homepage
Poi
Trends in 2017
GitHub data
- Created2016-04
- Total stars3.1k☆
Links
- GitHub
- Homepage
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.
Testing Frameworks
Jest
Trends in 2017
GitHub data
- Created2013-12
- Total stars15.0k☆
Links
- GitHub
- Homepage
AVA
Trends in 2017
GitHub data
- Created2014-11
- Total stars12.5k☆
Links
- GitHub
Mocha
Trends in 2017
GitHub data
- Created2011-03
- Total stars14.4k☆
Links
- GitHub
- Homepage
Jasmine
Trends in 2017
GitHub data
- Created2008-12
- Total stars13.2k☆
Links
- GitHub
- Homepage
Tape
Trends in 2017
GitHub data
- Created2012-11
- Total stars4.4k☆
Links
- GitHub
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
describe
andit
keywords - 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
VS Code
Trends in 2017
GitHub data
- Created2015-09
- Total stars42.5k☆
Links
- GitHub
- Homepage
Atom
Trends in 2017
GitHub data
- Created2012-01
- Total stars42.9k☆
Links
- GitHub
- Homepage
Reactide
Trends in 2017
GitHub data
- Created2017-03
- Total stars7.6k☆
Links
- GitHub
- Homepage
Brackets
Trends in 2017
GitHub data
- Created2011-12
- Total stars28.6k☆
Links
- GitHub
- Homepage
Nuclide
Trends in 2017
GitHub data
- Created2015-03
- Total stars7.4k☆
Links
- GitHub
- Homepage
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
- Autocomplete for a lot of things: JavaScript syntax, local file paths when you
require
orimport
a 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!
CSS in JavaScript
Styled Components
Trends in 2017
GitHub data
- Created2016-08
- Total stars12.8k☆
Links
- GitHub
- Homepage
CSS Modules
Trends in 2017
GitHub data
- Created2015-05
- Total stars8.9k☆
Links
- GitHub
Polished
Trends in 2017
GitHub data
- Created2016-11
- Total stars3.0k☆
Links
- GitHub
- Homepage
Glamorous
Trends in 2017
GitHub data
- Created2017-04
- Total stars3.0k☆
Links
- GitHub
- Homepage
Emotion
Trends in 2017
GitHub data
- Created2017-05
- Total stars2.7k☆
Links
- GitHub
- Homepage
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 className
s to your components. But then your component is not self-contained anymore, since its style is being managed elsewhere.
To address this issue, the "CSS in JavaScript" category has emerged.
The concept is simple: with React you already manage both your component logic and its template using JavaScript. Why not go further and encapsulate the styles in your components, using JavaScript for styling too?
Styled Components was by far the trendiest project in this category this year. It lets developers include regular CSS syntax inside the React components, using a recent addition to the JavaScript language: tagged template literals.
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
Mark Dalgleish, one of the authors of CSS Modules, wrote one of the most interesting articles about the CSS-in-JavaScript approach: A Unified Styling Language. This article is highly recommended for people who might be somewhat skeptical about this new technique.
Static Sites
Gatsby
Trends in 2017
GitHub data
- Created2015-05
- Total stars17.7k☆
Links
- GitHub
- Homepage
Hexo
Trends in 2017
GitHub data
- Created2012-09
- Total stars20.3k☆
Links
- GitHub
- Homepage
React Static
Trends in 2017
GitHub data
- Created2017-09
- Total stars3.2k☆
Links
- GitHub
Phenomic
Trends in 2017
GitHub data
- Created2015-09
- Total stars2.8k☆
Links
- GitHub
- Homepage
Metalsmith
Trends in 2017
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 web server without the fuss of setting up a database. Static web sites are fast, robust and easy to maintain.
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.
GraphQL
Gatsby
Trends in 2017
GitHub data
- Created2015-05
- Total stars17.7k☆
Links
- GitHub
- Homepage
React Starter Kit
Trends in 2017
GitHub data
- Created2014-04
- Total stars16.7k☆
Links
- GitHub
- Homepage
Apollo client
Trends in 2017
GitHub data
- Created2016-02
- Total stars5.7k☆
Links
- GitHub
- Homepage
GraphQL
Trends in 2017
GitHub data
- Created2015-07
- Total stars7.1k☆
Links
- GitHub
- Homepage
GraphiQL
Trends in 2017
GitHub data
- Created2015-08
- Total stars4.8k☆
Links
- GitHub
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.
Conclusion
We hope you enjoyed this round-up of the JavaScript universe in 2017.
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!
And for another point view on the latest trends, be sure to also check out the State of JavaScript 2017 survey, where we collected and analyzed responses from more than 23,000 developers.
So going forward, which projects do you think will be the next JavaScript Rising Stars in 2018?
- 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!
Overview
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?
.vue
file 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.
Axios
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
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: