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 by 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 feature 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 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!