React Native Internals for Web Developers
includes Architecture, internal tooling and comparison with web practices
7 min read
Table of contents
- Learn Mobile Development with React Native
Learn Mobile Development with React Native
Web developers often find themselves going between the realms of the client-side and server-side. And both are quite complex and abstracted as the usecases have grown with the ecosystem and community.
There's also mobile development that shoots off from the client-side library React – an open source, cross-platform framework called React Native. This is the frontend of cross-platform mobile development with various APIs to support smooth cross-platform development.
The developer experience has changed and has moved closer to the Web with React Native. It has a React-based UI and component-based rendering, though it has its own React Native elements for its UI. The UI development and state management is based on React hooks as well.
There are many bundlers known to web developers like Webpack, Parcel, Rollup, Vite.js etc., which basically promotes Asset optimization, developer productivity, fastness and framework agnostism
Metro has three separate stages in its bundling process: Resolution, Transformation, and Serialization
There is another lightweight bundler called Repack in reactnative ecosystem.
Storage System 🌐💾
Browser based apps and React Native apps have a similar storage system to store information for the app runtime and globally for various usecase like session for authenticated user, Long form data over multiple pages, low network response, store accessTokens or cookies, etc.
Local/Session storage for Web Developers Web storage objects localStorage and sessionStorage allow to save key/value pairs in the browser. Read more here
Async Storage and MMKV for React Native Developers. AsyncStorage is an unencrypted, asynchronous, persistent, key-value storage system that is global to the app. Read more here MMKV is an efficient, small mobile key-value storage framework developed by WeChat. Read more here
There are enormous variety of databases these days and it is very confusing to choose a database in web development already. Many Famous and effective dbs are MySQL, MongoDB, Oracle, Airtable and Firebase.
React Native has a good support with MySQL and Realm by MongoDB. There are two new cloud databases Supabase and PlanetScale, which you can try with your react native apps.
Web developers are well acquainted with url based navigation. To put it simply, when you to navigate to a different page on a web app, there is a definite route for that page on the web. For example, LOGIN page has
/www.example.com/login url and SIGNUP page has
But in React Native, there is no url bar, so the architecture that React Native follows is of Screens navigational flow. There are Stacks, Drawers and Tab based Navigation that is followed in React Native, a standard set by React Navigation
Expo team is trying to introduce, what we call, File based routing inside React Native and this will advance the world towards truly cross-platform development. You can follow up on that here
The new Architecture 📐
The current Architecture of React Native is released officially with rn
Several advantages of the new Architecture can be read here
Runtime engine 🏎️
A renderer teaches React to talk to a specific host environment and manage its host instances. You learn more upon it here
- Using C++ for cross-platform "shadow" layer;
- Immutable data structures (Shadow Trees, Props, Events);
- Shared memory ownership (between JS and native);
- Type-safe data structures;
- Opt-in synchronous execution where it benefits performance, the UI responsiveness and simplifying inherently-synchronous interop APIs.
- Fabric is all about modern, easy-to-interop and performant UI
Expose some native objects as JS objects and vice-versa;
Expose API for synchronous calling on this object in both directions.
Everything else should be built on top of that.
Advanced native modules accessible to non native language that is javascipt, because of the JSI architecture are now easy to hookup with new variations and manipulate with the common shadow tree generated in react native that resemble different native modules of android and iOS written in different languages like Java and Swift respectively
Over on twitter, @ericlewis published a sample repo with @chrfalch to showcase how to use directly C++ in a RN app (thanks to the JSI): github.com/ericlewis/react-native-hostobjec.. on https://github.com/react-native-community/discussions-and-proposals/issues/91
Web developers use Chrome Developer Tools while developing web apps to debug their application. React Native also lets developers debug with the same Chrome Dev Tools, with an option of
Debug JS Remotely and integrated Inspector from developer menu of the app.
You can read more about debugging in react native here
Web Developers are well aware and suited with the use of node modules and a marketplace for modules is npmjs.com . React Native Developers broadly uses
packages and modules from that same marketplace. These packages are built natively using JSI in C++ or Java (native code) . You can watch this video for better clarity.
Documentation updated [reactnative.dev/docs/native-components-andr.. (reactnative.dev/docs/native-components-andr..)
From here: 🌼
The web developers can easily switch/shift to mobile development. Hope this guide helps them understand the subtle differences. You can get started with React Native easily.
- Github Issue Comments
If you like the following blog, consider signing up for my newsletter, where I monthly share nuggets and my learnings about React Native and Next.js World for the community
Did you find this article valuable?
Support Agrit Tiwari by becoming a sponsor. Any amount is appreciated!