February 2022 Frontend Updates: The State of JavaScript, React 18 and monorepos!

This month we cover:

• The state of JavaScript survey
• React 18
• Monorepos

The State of JavaScript

By collecting data from thousands of developers, the annual State of JavaScript survey by Sacha Greif is a good indicator of the current and upcoming trends in the ecosystem.

The 2021 edition had to be pushed back all the way to 2022, but it has just been published. It collects data for over 15,000 developers, and these are some of the most notable highlights:

• TypeScript has gained a lot of ground: 69% of the devs are using it today compared to the 21% in the first State of JavaScript survey, back in 2016.
• It’s no surprise, but React and Vue have now been dominant for 6 years running, both in usage and dev satisfaction indexes. Angular is among the most used frameworks, but it’s ranking low in the dev satisfaction index. Svelte is gaining traction and is not only the fourth most used framework, but is one of the most loved by the devs too.
• The language has not stood still: The Optional Chaining and Nullish Coalescing APIs have rocketed up to be the most used new APIs, despite only being 2 years old.
• In the tooling ecosystem, Vite has been the star. It debuted at 98% satisfaction, but usage is already at 30% in its first year on the survey, even eclipsing esbuild. We spoke about it in the last frontend updates, check it out!
• It was the first year tracking monorepo tooling. Only 25% of developers report being happy with the state of the category, so there is still a lot of room to improve. We speak about it below.

Take a look at the full survey here!

React 18

The next major React version has already been in beta for three months, and its release date it’s getting closer. It comes with some out-of-the-box improvements to existing features and other new ones, which are called the ”Concurrent Features”:

Out-of-the-box improvements:

• Automatic batching for fewer renders
• SSR support for Suspense
• Fixes for Suspense behavior quirks

Concurrent features:

• startTransition: Lets you keep the UI responsive during an expensive state transition.
• useDeferredValue: Lets you defer updating the less important parts of the screen.
• : Lets you coordinate the order in which the loading indicators appear.
• Streaming SSR with selective hydration: Lets your app load and become interactive faster.

You probably realized that a lot of the changes in React 18 are related to the component. lets you “wait” for some code to load and declaratively specify a loading state while waiting. It has been there since React 16.6, but now it has been improved and there is an interesting experimental feature that, although won’t be rolling out with React 18.0, will likely come after the release: Suspense for Data Fetching.

It was the main topic discussed in our last knowledge sharing session, presented by the tech lead and Whitespectre partner Alex Naumchuck. It’s worth taking a look at the article in the React blog, because it will enable a lot of data fetching libraries to deeply integrate with React, improve the loading state management and avoid common waterfall data fetching issues.

To benefit from the out-of-the-box improvements and in order to use the new Concurrent Features, you just have to use the new Root API.

In the last frontend updates we spoke about React Conf 2021. Some of the keynotes there were React 18 related, check them out if you want to know more!

• React 18 Keynote
• React 18 for app developers
• Streaming Server Rendering with Suspense

Monorepos

A monorepo is a version-controlled code repository that holds many projects. These projects are usually related but logically independent, and they can be run by different teams.

Monorepos provide visibility of the whole project’s codebase without having to clone and track different repositories. They also provide consistency, because they make it easier to share things like configuration, UI component libraries, utilities and documentation. Continuous integration is usually easier too, but it’s dependency management where they really shine.

If you want to learn more about monorepos in the frontend space, check out this articles:

• JavaScript Monorepo Tooling: Compares some of the most popular tools and their different approach to solving monorepo problems.
• Guide to Monorepos for Front-end Code: A good explanation of what a monorepo is and their advantages and disadvantages.

Also, stay tuned for an upcoming article on how we’ve used monorepos to handle project scaling!

Anything you’d like to add? Think there is something missing? Ping us on @whitespectrehq or LinkedIn, we’d love to read your feedback!