A Single Codebase of ReactJS Can Get Both Your Website and Mobile APP by RSD
Table of Content
- What’s new coming in React World?
- Should Frontend Developers be worried about it?
- What is React Strict DOM (RSD)?
- Was there a solution for Web + Native before RSD?
- What does RSD do, and what will it simplify?
- Potential Benefits and Considerations
- Keeping an Eye on the Future.
What’s New Coming in the React World?
React’s evolution continues with the introduction of ReactDOMStrict, the latest in a series of innovations, starting from class-based components to functional components with hooks and the cross-platform capabilities of React Native. Each step is aimed at simplifying the developer experience and enhancing application performance. Now, ReactDOMStrict emerges as an experimental effort to unify the styling of React components across Web and native platforms, promising further advancements in cross-platform development.
Should Frontend Developers Be Worried About It?
There’s no cause for alarm for ReactJS and ReactNative developers with the advent of ReactDOMStrict. This experimental integration, involving ReactDOM and StyleX, seeks to standardize the development of styled React components without disrupting current development practices. It represents an opportunity for future optimization rather than an immediate overhaul, allowing developers to continue their projects with the potential for more streamlined cross-platform development ahead.
What is React Strict DOM (RSD)?
It’s not part of the much-discussed React 19, but it warrants attention for its potential to ease the development process across multiple platforms. RSD is an experimental package introduced to simplify the development of cross-platform applications. At its core, this package aims to bridge the gap between Web and native app development, offering a unified approach that could significantly streamline the development process.
The question might arise: Don’t we already have React Native for building apps across iOS and Android? Yes, we do. However, React Strict DOM targets a broader spectrum, facilitating developers who wish to extend their applications beyond native platforms to include web applications, all from a single codebase.
Was there a solution for Web + Native before RSD?
Before the advent of RSD, developers seeking to bridge the gap between Web and native platforms had tools like react-native-web at their disposal. This library, available at react-native-web on GitHub, has been a pivotal solution for those looking to write once and seamlessly deploy across Web and mobile platforms. With over 19.5k Stars and contributions from 250 developers, react-native-web exemplifies the community’s effort to unify React’s ecosystem, allowing React Native components and APIs to be used in web applications. This approach has enabled developers to maintain a single codebase for multi-platform applications, streamlining the development process long before solutions like ReactDOMStrict entered the scene.
What makes RSD different from ReactNative and react-native-web?
react-native-web functions by translating React Native components and APIs for the Web, acting as a bridge that allows developers to write their applications once and deploy them across both native and web platforms. This process involves mapping the react-native exports to react-native-web, utilizing shims over React DOM and native DOM APIs to emulate React Native’s environment on the Web. While this approach effectively extends React Native’s reach to web applications, it comes with the complexity of implementing a large surface area of APIs and modifying standard behaviours to align with React Native’s specific implementations, which can impact both developer and user experiences.
On the other hand, react-strict-dom (RSD) adopts a more integrated strategy by focusing on a subset of DOM functionalities that are most relevant and compatible directly with the React Native framework across Web and native platforms. This method significantly simplifies the development process by reducing the reliance on shims and adaptations, aiming for a more native-like performance on the Web. The primary benefit of RSD lies in its efficiency and streamlined workflow, as it allows for the development of cross-platform applications with fewer discrepancies and performance overheads between web and native environments. By concentrating on a compatible feature set and leveraging a white-label CSS compiler like StyleX for styling on the Web, RSD offers a promising alternative for developers looking to maintain a single codebase for multi-platform deployments.
What does RSD do, and what will it simplify?
Suppose you want to build a mobile app for iOS & Android and, simultaneously, a web application based on the same code base. What if you wanna do that?
That’s more challenging to do right now. This package aims to simplify it because the main idea behind this package is essentially to give you a DOM emulation, you could say, that’s based on the browser DOM and how that works so that you can use a set of elements that also are, in the end, based on the elements you can use in web apps.
Source: https://github.com/facebook/react-strict-dom/blob/main/apps/examples/src/App.js
That will then translate to their fitting equivalents depending on whether you’re building for a mobile platform or the Web.
And that means that once it is stable, you could bring it into your React project with that package. You would use those elements by this package in your JSX code, and then, depending on which platform you’re building for, this would be translated to the fitting elements for the target platform. Look at the code here: https://github.com/facebook/react-strict-dom/blob/main/apps/examples/src/App.js
You can also see that in the source code of this package here because there, you find code where you can see how different elements are translated to different target elements based on which kind of platform you are building.
And it’s not just about elements; it’s also about giving you uniform access to some web and browser APIs, even if you’re not targeting the Web, so that the most common and popular features you might know from the Web, from the browser, can then also be used if you’re building native apps.
Potential Benefits and Considerations
Once React Strict DOM reaches a stable release, it promises to be a valuable tool for developers aiming to leverage a single codebase to target both mobile and web platforms. This approach can save development time and maintain consistency across different platforms. The package also aims to provide uniform access to shared web and browser APIs, ensuring that the developers can utilize familiar features even when targeting native platforms.
However, it’s crucial to note that React Strict DOM may only suit some developers in its current experimental status. Those focused solely on web applications with React or mobile applications with React Native may find little immediate use for this package. Moreover, developers who prefer customizing their applications extensively based on the platform may opt for separate projects to accommodate significant differences.
Keeping an Eye on the Future
Despite its experimental status and niche applicability, React Strict DOM represents a forward-thinking approach to application development. It embodies the ongoing efforts within the React community to provide more efficient and flexible development tools. It’s a project worth monitoring, especially for developers exploring cross-platform opportunities.
In conclusion, while React Strict DOM is not yet a staple in React development, its potential to simplify cross-platform application creation makes it an intriguing prospect. As with any emerging technology, its relevance and utility will become more apparent as it evolves towards stability. For now, it’s an additional tool in the React ecosystem that could, in time, become instrumental for developers looking to streamline their workflow across Web and native platforms.