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