2017 JavaScript Rising Stars

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?

• 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 .vue file 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.

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:

• 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

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!

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.

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.

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.

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!

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

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 describe and it 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.

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 or import 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!

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.

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 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.

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.