With React Distros there are no longer frontend platform battles, and musings on the current and future state of React meta frameworks #React.

React is a kind of kernel. Bootloaders are Webpack/Create React App. Now it’s your turn. The nearest we’ve come to distros are js and Gatsby.

We believe we need more distros.

If you’re like me and have no idea what a bootloader is, Google explains: “A bootloader is a piece of code that runs before any operating system runs.” Bootloaders are used to start other operating systems; each operating system usually has its own collection of bootloaders. Webpack’s runtime is probably that, but it’s also a compilation mechanism from /src to /dist.

The X-axis represents the time span of 20 to 50 years, and the Y-axis represents the percentage of population penetration. This has happened several times over the last century, and adoption is speeding up as we improve distribution:

The basic concept is that there is an initial breakthrough, followed by a “frenzy” of competing innovations with massive development, and finally a turning point where the technology achieves synergy and maturity.

The Installation Age is concerned with development and creativity, which often results in creative destruction (read: massive churn). The Deployment Age is concerned with maintaining continuity and meeting the needs of later, often larger consumer segments. Hobbyists and speculators prevail in the former, and things are always simpler. The suits take over in the latter, and a lot of time is spent on the finer points.

React Distros and JavaScript Frameworks’ Deployment Age

We believe JS Frameworks reached a tipping point a year or two ago. Every month, we don’t get a new frontend framework. For the past 31 months, React has topped the Hacker News Job Board. But it’s not just React; Vue and Angular have both found steadfast acceptance in large organizations that are unlikely to migrate anytime soon.

Metaframeworks – frameworks built around frameworks – have risen as a result of the Deployment Age to resolve deployment challenges that the original frameworks were not designed to address. Next.js and Gatsby are available in React, Nuxt.js and Gridsome are available in Vue, Sapper is available in Svelte, and Scully was recently added to Angular. The frameworks were designed to take care of a single DOM element and manage a tree of dynamic elements within it in most cases, and their metaframework extends that to provide routing and static/server-side rendering for the entire site/app.

We’ve always compared metaframeworks to the Hulkbuster armor that wraps around the Iron Man suit, not just because they’re heavier but also because I’m a huge Marvel fan.

Let us now discuss React Distros

Clearly, the comparison is right. Vue is MacOS, and Angular is Windows if React is Linux. Except, in this case, Linux has the most users. There are hundreds of Linux distributions designed for different types of users, all of which use the same underlying technology. This is almost a literal true analogy since React executes many of the functions of an operating system on top of the browser. This is why, last year, I made the following observation:

The unwillingness to React to have an opinion on items like style and routing is both its greatest source of dissatisfaction and its greatest source of success.

There isn’t just one React framework; there are thousands of artisanally hand-rolled fws. All of them are credited to Respond.

This is both React’s best and worst feature: because of its limited surface area and lack of opinion on many important issues, you not only get to pick and choose what you pair with it, but you almost have to.

We disagree with James’ assertion that CRA is a bootloader; We believe it is also a React distro, although a good one for Single Page Apps.

The following is a partial list of React Distros:

• React Native – It is an iOS and Android app development framework. One of the few React distributions with strong default components (because the target ecosystems do).
• React Boilerplate – Possibly the first React distro, it’s just a boilerplate that can be cloned.
• React Boilerplate The electron is a subatomic particle for web applications.
• React 360 – React for Virtual Reality? Yes, absolutely.
• React Ink – React for CLI’s? After all, why not?
• Hybrid Server, Serverless, and Static Rendering are all examples of javascript. Surprisingly, the plugin tale is still in its infancy. Data is pulled from pages.
• Gatsby.js – Static Rendering with GraphQL Data Layer Gatsby.js – Static Rendering with GraphQL Data Layer There are a plethora of plugins available. Data can be pushed and pulled to and from sites.
• React Static – Static rendering with a simplified data layer. Data is pushed to pages by you.
• Create a React App – A simple single-page app with no data layer.
• Ionic React has over 100 great React modules, as well as cross-platform targets and React Router.
• Docusaurus is a static rendering system that focuses on documents. From markdown to preset models, the workflow has been tightened.
• Storybook is a playground for the Component Library that can document and view non-React components.
• Meteor.js is a full-stack application that was later updated to include React.
• Redwood is a new full-stack architecture from Tom Preston-Werner that includes a backend GraphQL layer.
• Brandon Bayer’s latest Rails + React metaframework, Blitz.js.

Metaframeworks was built on top of metaframeworks:

• James’ projects Navi and CURA add some form of routing and SSR on top of CRA.
• Docz – On top of Gatsby, static rendering of documents with default TypeScript and MDX setups.
• Expo is a fantastic React Native distribution that prioritizes developer experience.
• React Native Web is a web-based RN distribution. See my article on the RN singularity for more details.
• Microsoft’s RN distro, React XP, provides the ability to build Windows native applications.

And, most likely, Parcel and Rome would collapse the metaframework into the construct tool, as per the Collapsing Layers thesis (instead of having the metaframework circumscribe the build tool). Metro, a dedicated bundler, and Hermes, a dedicated JS engine, are both included in React Native.

What other React Distros are there supposed to be?

However, we agree that more React Distros are needed, particularly as the community begins to address clearly identified use-cases:

• But, in any case, this is my ideal React distribution:
• SSR that works right out of the box.
• If you want it, CSS-in-JS is easy.
• Routing and data fetching/caching defaults that are reasonable, and.
• It works even if you don’t have GraphQL installed.
• But it’s not as good as CRA.
• Webpack configuration is supported, as well as fs-based routing.

We believe there are a number of toggles you can experiment with to consider your requirements and either roll your own React distro or use one off the shelf. Any of this was discussed in the State of /r/Reactjs Survey.

• Create a goal.
• Administration of the State.
• Data Layer is a type of data layer.
• The art of styling.
• Support for TypeScript.
• Testing.

Routing is absent due to React Router’s de facto supremacy, but Gatsby, Next.js, React-Static, and Navi all have their own router due to the need to incorporate the data layer. React Native used to have more routing contention, but React Navigation now appears to be the de facto norm.

Toolmakers’ for React

Why do only software developers have access to React Distros?

We also assist in the upkeep of TSDX, a toolchain for creating React + TypeScript libraries such as Formik. We should start making software to help us make tools when we start to be able to bet on a secure basis in the Deployment Phase.

ReactJS for web development

Stay Connected!