❤
npm
Sign UpSign In

The State of JavaScript Frameworks, 2017

Laurie Voss, co-founder and COO, npm, Inc.
January 3rd, 2018

« Part 1: Front-End Frameworks Part 3: Back-End Frameworks »

Part 2: The React Ecosystem

The React ecosystem as a share of the npm Registry

Let’s examine the ecosystem of packages related to React. While Facebook builds React itself, many of these packages are from third parties within the open source community. These packages use React and supplement it with additional functionality to provide a full application experience. Several of them compete with each other to provide similar functionality.

React Router

React Router as a share of the npm, Inc. Registry

A common feature of a rich web application is serving multiple “routes,” which are essentially different pieces of functionality, represented as separate URLs in a browser. React doesn’t need to use routes for simpler applications and sometimes is used in contexts such as desktop and mobile applications where routing is not a requirement at all. Therefore, React Router, while overwhelmingly the most popular routing solution for React apps, is only half as popular as React itself.

This is part of the lesson of React: by constraining itself to a well-defined problem area and having well-defined interfaces, it made itself applicable to a much broader range of applications than its original designers envisioned. This decision has increased the pool of developers using and working on React, which has further improved it and expanded its ecosystem, creating a beneficial cycle. This is a surprising result given that, by being a partial solution, React is intrinsically less convenient to use than full frameworks like Ember and Angular.

Flux

Flux as a share of the npm, Inc. Registry

One of the other pieces of a full-fledged application not addressed by React is a data layer. When React was introduced, Facebook also introduced Flux, a method of managing state within an application, and GraphQL, a system for communicating between the client and the server. Both have been less popular than React itself, showing again how constraining React to a small subset of the problem meant that Facebook’s design choices could rise or fall separately on their own merits.

Flux was introduced soon after React itself and it gained popularity until mid-2015, rising in sync with React Router — a sign that the two were being used in concert in web apps. However, their trajectories diverged sharply after mid 2015, with Flux following a slow decline in popularity.

Redux

Redux as a share of the npm, Inc. Registry

One explanation for the downfall of Flux is the rise of Redux. Addressing exactly the same portion of application functionality but with a different developer experience, Redux was introduced in mid-2015 and rapidly accelerated past Flux, which began to decline at the exact same time. Redux is now almost exactly as popular as React Router, and the two closely track each other in dips and increases in popularity. This suggests that Redux has supplanted Flux as the state management system of choice in React web apps.

MobX

MobX as a share of the npm, Inc. Registry

MobX is a competitor to Flux and Redux introduced in mid 2016. It’s growing rapidly right now but remains a small player in the space. It’s worth keeping an eye on.

RxJS

RxJS as a share of the npm, Inc. Registry

A curiosity in this ecosystem is RxJS, another state management component competing with Flux and Redux. RxJS’s popularity presents no easy pattern for tracking or explanation. Firstly, it has two extant versions, a legacy version called rx and a current version called rxjs. Both get a lot of downloads, although rx is declining while rxjs is increasing.

RxJS usage appears to be driven as a sub-dependency of other projects, in particular the Angular CLI. This means all usage of Angular drives an equal amount of usage of RxJS. It is also incorporated into a couple of other popular command line tools.

We tried to account for this in our tracking of popularity, but as with Ember, it means our estimate of its true popularity and trajectory is uncertain.

GraphQL

GraphQL as a share of the npm, Inc. Registry

Although it was developed internally at Facebook around the same time as React, GraphQL is not intrinsically tied to React; it is simply a way for web clients to query servers for data. It is gaining in popularity via two competing libraries called Relay and Apollo, both of which provide a web app with convenient ways to generate GraphQL and manage data flow.

Relay was released first and it is growing, but it has been eclipsed by Apollo, which was released half a year later but is already more popular and growing significantly faster. While still small in absolute terms, Apollo’s growth trajectory means it’s worth digging in and finding out if GraphQL is for you.

React ecosystem summary

React ecosystem growth and popularity 2016–2017

Looking again at just the last 12 months of growth, we can visualize the relative positions of players in the React ecosystem. Again, the trends become clear:

  • Apollo is growing extremely quickly.
  • Flux is in decline.
  • React Router and Redux are both very popular and so closely linked in usage that we combined their bubbles.
  • MobX has good growth but is yet to challenge Redux.
  • React itself is huge.

Up next

Take us to work

Millions of developers at hundreds of thousands of companies depend on npm to discover, share, and reuse code to build amazing things.