The "State of JavaScript 2019" report offers a glimpse into the future of frontend development. In this article, we'll review explore some tools for managing data that are poised to take center stage in 2020.
What is StateOfJS
The "State of JavaScript" report is an annual survey that records and beautifully visualizes the opinions of more than 21,000 developers around the world. The data points cover frontend web development frameworks, databases, state management, relationships between frameworks, reception and ease of use, languages that compile to JavaScript, mobile frameworks, build tools, JavaScript testing tools, and a whole lot more.
In my opinion, the "State of JS" report is the first JavaScript-only developer survey to gain universal respect in the JS community. Other popular resources include StackOverflow's annual developer survey and Jetbrain's "State of Developer Ecosystem" report, which query 100,000 and 7,000 respondents, respectively.
Data layer tools
To start, let's take a look at the most in-demand JavaScript tools that are used to manage data based on factors such as awareness, overall happiness, usage by company size and salary range, show of interest, ease of use, and reach.
Redux
Redux is an open-source JavaScript library for managing JavaScript application state. It is most commonly used with libraries such as React for building user interfaces. It was created by Dan Abramov and Andrew Clark and it helps you build apps that is consistent over various environments from client side to server side to even native. It has a powerful devtool that helps so much in debugging your app, it is currently being used by almost a million projects.
According to survey insights, Redux had a good 2019 as the retention rate even increased by 0.6% in the last 12 months. It is very remarkable to see that retention rate did not drop even though there was a little drop in the interest level.
Apollo
Apollo Client is a complete state management library for JavaScript applications. It handles user interface updates as well as requesting and data caching with a simple GraphQL query. Fetching data with Apollo Client guides you to structure your code in a predictable, declarative way consistent with modern React best practices. With Apollo, you can build high-quality features faster without the hassle of writing data plumbing boilerplates.
There is a big increase in the volume of return users of Apollo in the last 12 months, this volume rose from 11% to an impressive 24%. The knowledge and awareness gap is getting bridged as more people now know (and are willing to learn) about Apollo in the last year.
GraphQL
GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data. GraphQL provides a complete and understandable description of the data in your API, this ensures your requests returns exactly the subset of the data object that you need at the particular instance. This makes it easier to evolve APIs over time, and enables powerful developer tools.
According to the survey insights, one very remarkable thing is that almost every developer now knows about GraphQL, the retention rate also increased from 20% to 38%. Getting started and all kinds of beginner content resources will greatly help the community as about 50% of developers would want to learn to use GraphQL.
Relay
Relay is known as the production-ready GraphQL client for React built for scale. Relay was designed to be performant from the ground up, and to support scaling your application to thousands of components, while keeping management of data fetching clean, and fast iteration speeds as your application grows and changes. Relay automatically aggregates the data requirements for your entire application, so that they can be fetched in a single GraphQL request. Relay also support executing GraphQL Mutations, optionally with optimistic updates, and updates to local data, while ensuring that visible data on the screen is always kept up to date.
In the last 12 months, more people have heard about Relay and over 2,000 projects use Relay currently. There is still a big awareness gap the Relay team should invest resources to fill especially in the React community, I believe this can be achieved by pushing out more beginner friendly content.
MobX
MobX is a battle tested library that makes state management simple and scalable by transparently applying functional reactive programming (TFRP). The philosophy behind MobX is that if anything can be derived from the application state, it should be derived automatically. React and MobX together are a powerful combination. React renders the application state by providing mechanisms to translate it into a tree of renderable components. MobX provides the mechanism to store and update the application state that React then uses.
Both React and MobX provide an optimal and unique solutions to common problems in application development. React provides mechanisms to optimally render UI by using a virtual DOM that reduces the number of costly DOM mutations. In the survey insights, we see MobX has gained a lot of attention in the past year, as about 70% of all the developers that were survey have heard about it. The interest level for MobX grew by 2% and the percentage of repeat users of MobX in the past year also increased by over 3%.
In general
Up until 2017, we have experienced this interest and satisfaction shift from Redux to newer players like GraphQL and Apollo. This says a lot about the organic growth experienced by the both and looking into the future, it is almost certain they are both here to stay. GraphQL especially had a great year in 2019, winning the award for the technology with the most interest.
Conclusion
Other data layer tools were also used by developers in the survey, most prominent were Vuex, Ember, NgRX, RxJS and others with Vuex taking the lead with a big gap. There is a chance that with more adoption and awareness, Vuex will become the next big thing after GraphQL in the data layer category. Which of these data layer tools do you use?
Top comments (0)