Modern software development requires reliable tools and technologies. Among them is React Native. It took the world by storm and it’s proven very useful across different industries. Its widespread popularity has many reasons. What is React Native, what do you need to know when you have a project and what major changes to the architecture are there in 2023? Dive into the article and find out.
What is React Native?
React Native is an open-source solution for mobile applications. It’s based on React and it uses a Java Script framework. The technology is designed to build projects across different operating systems and environments. With it, you can develop on iOS, Android and web applications. The best part – you can utilize the same code base for every iteration. That means cost and time optimization.
React Native and ReactJS for web development were built by Facebook. It was conceived as a solution for a burning problem within a company – the need for maintaining two separate code bases for their app. It wasn’t ideal and burned money and resources. Plus, work was duplicated, so at times the company could have two different solutions for the same problem that occurred in different version of the app. React Native was a simple and elegant solution to fix all that.
React and React Native
React is based on an open-source JavaScript library and is used to build fast and reliable frontend layer of the application. It’s based on reusable components that can play similar or even the exact same role in different apps. React Native is a natural extension of the base technology. It’s a mobile framework that gives you the opportunity to build near-native apps with JavaScript.
Both frameworks are similar and closely related but they were thought as solutions for different problems. While React is used for web development, React Native is used to bring to life mobile products.
Pros of React Native development
There are many pros to using React Native. Here are some of the most beneficial in terms of development itself.
Cost efficiency. It lies at the heart of every cross-platform development project. Because the framework uses same code on multiple platforms, you are able to use a smaller team to bring the project home. Team augmentation services are still there, if you need them. Thanks to interoperability of code, you are able to work with one team to deliver the product on two operating systems instead of just one.
Large developer community. Thanks to its open-source nature, the community is constantly expanding. That means a large talent pool and growing number of developers that frequently add to the code pile. They constantly work on improvements and additional elements that extend the framework. That means growing number of features (more on that later) and large number of people willing to help you with the problem and might not yet been addressed.
Code reusability. The option to develop an app for multiple platforms at the same time is one of the strongest suits of React Native. It translates to faster time-to-market and easier maintenance in the future. It also carries weight for new developers – the same code base means quicker onboarding and time optimization.
Performance aka native feel and look. React Natives allows usage of natively written code. Because of that it’s not as laggy as web-based cross-platform solutions. Developers behind the framework claim that the framework gives a “native-like” performance and it’s somewhat true. Although some specialists call it a near-native performance, which is a little more than semantics. The working experience is not perfect but it’s still better than what web-based offers.
UI-focused. React Native makes app interfaces fast and responsive by using the React JavaScript Library. It is capable of rendering great graphics and employs a component-based approach that makes it simple to create complex UI designs.
If you’re considering React Native, here’s what you need to know
React Native for web will continue to improve in stability. The lack of third-party support was always an issue for React Native for web.
Navigation and rendering were two of the primary issues that, until now, prevented React Native from displacing React as the dominant web framework. However, in 2022, Fernando Rojo released a new external library called Solito that enabled navigation to work seamlessly between Next.js and React Native.
It’s become essential for everyone, as now developers can now make navigation work seamlessly across mobile and web with a single codebase. Combined with Vercel’s Next.js framework, it solves a long-standing rendering issue and enables React Native to deliver performance and discoverability at the same time. The server delivers HTML code that search engines can read, and developers can still build with all the dynamism of client-side rendering.
Before you commit to React Native…
It’s all fine and dandy but there’s also a challenge here. Data collection. As the focus on user privacy grows, the topic of data collection is more important than ever. Your apps, no matter on what platform they are on, require transparency and compliance. It’s good to take a long conversation with your Product Manager and team about KPIs are measured in that regard.
It’s worth noticing that attribution libraries like AppsFlyer will become less reliable as iOS and Android privacy tightens, and those kinds of changes will have knock-on effects for marketing and business decisions.
How exactly does it work?
There are some alternatives to React Native like Ionic, for example. Unlike them, React Native doesn’t rely on webviews but on materials provided by native platforms. It has built-in access to the native views and components, and can utilize native-written code and allow the API access to OS-specific features inside the app.
The framework is based on a concept of “bridge”. This allows for asynchronous communication between the JavaScript and Native elements. This is the reason behind React Native’s flexibility.
When we trigger the app to open, the native thread produces the javascript VM thread, which runs the javascript code with all the application’s business logic. After that native thread sends messages to the javascript thread to start the application via RN bridge. Then the JS thread starts issuing instructions to the native thread.
These instructions specify the information we should display, the information we should retrieve from hardware, etc.
The instructions are an array of JSON, and communication(asynchronous) happens via React Native bridge. So, the instructions which are collected from the JS thread are sent to the UI manager in native code to create the respective UI on the asynchronous thread (Native Queue or Main thread), and these instructions are sent to MessageQueue and processed them.
The threading modal
There are three main threads we have to remember about:
Main thread. When we start the application, this thread spawns. So Native code listens to the touch and press events, and the react native bridge passes these commands to the JS thread. Then JS thread sends what needs to be rendered after the javascript is loaded completely. There is another thread called the shadow node thread. It does the calculation of the layouts and view’s relative positions. Layout calculation is done by the Yoga platform provided by React Native (The actual input for this from the frontend perspective is the Flexbox that we are using for styles, but the output is the relative positions of where each element should be structured). As you can see below, these instructions passed to the main thread to native code and rendered on the screen.
JS thread. This is the thread which our javascript code runs (the code we write on React Native).
Native modules thread. Native modules are used in cases where native capabilities are needed that react native doesn’t have a corresponding module yet, or when the native performance is better. Native modules included Views, Images as built-in components. So in IOS, every native module has its thread, and in Android, every native module shares the same thread. These are working independently to reduce the workload of the JS thread.
React Native’s popularity
React Native is gaining popularity among developers and is being widely adopted by almost all industries out there, left and right. According to 2022 Stack Overflow Developer Survey, React Native is currently one of the most popular frameworks out there.
With the adoption of 13% among professional developers and another 13% expressing interest in using it for their projects (means using it at least from time to time), the framework has solid foundations for the future.
What companies are using React Native?
If you are interested in some of the best applications build with React Native, wait for our article about the apps. Today we can make a sneak peek with some additional info on the framework. Facebook and Instagram (which is a part of the company’s empire) are natural members of the club. Who else is using it?
Walmart. It’s one of the largest retail companies in the world. Originated in U.S. it makes deals with China (85% of the production and supply chain value) and other big countries. The company is using the framework to maintain the app written almost entirely in React Native (95% of the code).
The framework, in the company’s own words, leverages same automation suites on iOS and Android. The other benefit is the control over the update release dates for both platforms at the same time.
Tesla. The company used React Native to build its companion app. The product acts as an assistant and companion for all Tesla vehicles models. The app syncs iOS and Android devices with the car. It lets owners monitor and control features like locks, lights, charger, or the panoramic roof. Even the horn.
React Native 2023 architecture update
There are many things that are worth to know when it comes to features and architecture update for 2023. Let’s go over them together.
First, let’s take a look about reasons to have a new React Native architecture. The drawbacks of the current one are:
- the dependency of the bridge for inter-communication of threads in an application
- slow data transmission
- unexpected page jumps triggered by asynchronous UI updates
- a serilizable bridge demands additional copying
- at times, problematic delivery time of the message at the destination, since an asynchronous model doesn’t guarantee quality all the time.
The new architecture rollout v 0.70, introduced in October 2022 (we are currently at 0.71), increases the performance and flexibility of the framework. Here are parts of the backbone for this new architecture.
Bridgeless
The progressive replacement of the Bridge with the redesigned JavaScript Interface (JSI) component is one of the primary objectives of the new architecture.
While it is clear why the Bridge is being fully removed from the new React Native, the major causes are that it created unneeded issues and doubts about whether data was received and/or considerable delays.
The layer that will entirely supersede the Bridge is called React Native JSI or JavaScript interface. The major goal is to enable communication between the JavaScript and Native sides without the need for the Bridge as an intermediary step.
The JS bundle’s independence from JSC is one modification made possible by JSI (JavaScript Core). This implies that a different JavaScript engine, like Chrome Engine V8, could eventually take the place of the JSC engine.
Additionally, by utilizing JSI, JavaScript would be able to recognize and connect with Native components explicitly by holding references to C++ Host objects and invoking their methods.
Fabric renderer
Fabric is a misnomer that is frequently used to refer to the entire new React Native architecture. In actuality, Fabric only illustrates one tier of the whole structure, i.e., the UI layer.
In the beginning, Fabric enabled direct Shadow tree creation in C++ with the aid of UIManager, thus enhancing UI interactivity by removing the necessity to travel between threads.
Additionally, Fabric leverages the JSI to disclose the UI functionalities to the Javascript side. This leads to direct interaction from both ends, rather than connecting with the Javascript side through the Bridge. The Javascript side can prioritize time-sensitive UI tasks and perform them concurrently ahead of any other tasks. All the credit goes to this control, which enables prioritized queues for the UI side.
Hermes engine
It results in faster application start time and a smaller APK (Android) file size. While the IPA (iOS) file size may have increased slightly, there is a memory consumption reduction. Hermes is designed to optimize performance by reducing app launch time and precompiling JavaScript into efficient bytecode.
Hermes is not just good for React Native applications, but contributes a considerable reduction in bundle size, load time, and consumption size with a GUI to visualize the performance metrics of your application during development. This feature is helpful for developers to learn how applications will perform after release and to production.
In a nutshell, Hermes makes React Native faster. Here’s the official article covering the specifics.
Codegen
Codegen is another practical component of the new React design. The RN program will automatically check for synchronization and interoperability between the Javascript and Native threads. Herein, more native code will be produced during build time as opposed to run time.
The interface components utilized by Turbomodules and Fabric will be defined by Codegen. All of this is intended to eliminate the need for duplicating code and enable transferring data without doubt and much more quickly since there is no longer a requirement for data validation at each iteration.
Turbo module
In essence, Turbomodules are the old Native modules with new implementation and behavior.
The best feature of Turbomodules is that they are lazy loaded. In other words, it means that the Javascript code will only load each module as needed and maintain an explicit reference to it. For programs that have a large number of Native modules, this can drastically reduce startup time.
How to migrate to a new architecture?
As the redesigning of React Native architecture takes on continued development, more data is becoming accessible and readable. Hence, this new design aims to enhance performance and brings it nearer to native apps. It facilitates the integration of React Native framework with a JavaScript-based hybrid framework.
If you want to migrate to a new architecture, you should start with the official React Native knowledge repository.
Summary
Yes, there is a competition. Ionic or Flutter is also considered when it comes to interoperability. Yes, both of them have some advantages. The fact is that Code & Pepper chose React Native for its performance and usability features. It’s also future proof, so don’t worry about solution’s market worth and your investments in it evaporating in a heartbeat.
There is an army of people working towards making React Native better. With over 2,000 GitHub contributors, we are experiencing a steady progress within the technology. We also expect the trend to continue in the future. So, if you want to experience not only read about it, contact us. We are happy to make React Native updates work for you.