Each platform has its own code base. Android has one, iOS has another. Again, this complicates the development process. As a result, developers Jordan Volker and Christopher Chedo implemented the ability to generate native UI elements from the JS queue.
This was the prerequisite for the creation of RN. In 2013, the developers showed off the first version at a Facebook hackathon. The full-fledged RN made its debut in 2015. A few months later, iOS, Android, Windows Mobile, and Tizen already supported it. Learn Once, Write Anywhere — became the slogan of the framework. And today you can turn to React Native development services if you want to get a multiplatform product and still save money on building it.
RN is a cross-platform framework. Those who are good at it can write applications for different platforms. Although there are some limitations, which I will talk about next.
How the framework works
It’s similar to React but uses native components instead of web components. React Native development requires completely different approaches.
RN consists of the following components:
- Yoga framework;
- JavaScript Virtual Machine;
- Native Modules Bridge.
Yoga framework
The Yoga framework is a cross-platform UI engine written in C++. Its main goal is to standardize the UI so that regardless of the platform, the code is the same.
Because of this, the UI in React Native development is completely native. The whole system runs on flexboxes. However, this engine does not implement all the functionality of CSS Flexbox. For example, it lacks the non-layout properties responsible for color.
While Yoga is a part of React Native development, it can exist and be used separately. YogaKit for native development can help with this.
Also worth mentioning is the cool playgroup on the Yoga site. You can use it to change different blocks and parameters and get a better understanding of how everything works. For example, change the layout of elements from horizontal to vertical and remove paddings.
JavaScript Virtual Machine
JavaScripCore is also an engine for the Safari browser. In iOS applications, for security reasons, JavaScripCore does not handle JIT compilation (Just-in-Time). This is because Apple doesn’t allow any third-party processes to run dynamic code.
Therefore, the virtual machine runs in a slow-down mode of interpretation. That’s why things don’t go quite the way they’re supposed to. The reason lies in the design of JSVM. It consists of parts responsible for parsing, interpreting, etc.
Bridge
This element is almost a strategic object in React Native development. I like to joke that Bridge is like the yin and yang or the Alpha and Omega of the whole framework. It allows to even out the barriers between the native and JS parts of the code. If you follow the official documentation, Bridge enables bi-directional asynchronous non-blocking communication between queues.
To understand how Bridge works, let’s take a look at the diagram. It shows the base layer without any additional interpretations:
Bridge is a kind of bridge over which JSON files go from a JS queue to a native queue.
The JS Thread runs the JSVM, just the JavaScript Runtime. On the other hand, the current implementation of React Native development has three queues: Main Thread, Shadow Thread, and Native Modules.
Main Thread is the main thread where the code related to the UI part runs. Shadow Thread is where the Yoga framework is located. This is where the layout calculations take place and parameters are passed to the Main Thread, where the rendering takes place. Native Modules can create their own queues if needed.
Benefits of React Native development
- Declarative UI. Anyone who has worked with React Native development will agree: this is a great tool for writing quality UI.
- Hot Reloading. Gives you the ability to make changes to code that are instantly displayed on a device or simulator without recompiling the modified files.
- Code push. This cloud service allows you to deploy app updates directly to users’ devices without going through a review. But this is only reasonable for JS changes. Native code updates will still require a review. You can also roll back to a previous version.
- Stories & Storybooks. Allows you to create libraries of UI components (text fields, battens, switchers) and store them in any repository. The web interface will pull all created components. You will also be able to interactively change their parameters. It is useful in case of future modifications in the product design.
Myths about React Native development
Facebook and Instagram were created on RN
This is a very successful marketing move. It attracts a lot of interest in the tool. After all, developers seem to have an opportunity to work with the framework on which such powerful applications are created.
In fact, Facebook and Instagram developers once only created individual modules with React Native development. They still have them in apps, but it’s a framework for integrating into the native environment.
Two apps for the price of one
Some customers think that with React Native development they can almost save twice as much on developing apps for different OSes. This is almost impossible. Sometimes it is possible to save money. But the features of a particular product, its functionality, and the development process affect the budget of the project. For example, if the application is small, using RN will really speed up the work. But today most applications are complex and voluminous.
A cool tool for MVPs
When developing a prototype, there should be a detailed roadmap of the application with a list of the planned functionality. If you don’t have such a list, you may later add features that are problematic to implement via the framework. Of course, React Native development is a great tool, but for certain tasks.
Conclusions
There are many myths that prevent us from understanding the tool correctly. But at the same time, with the help of React Native development, you can implement a variety of projects and save a significant amount of money. In the future, you can go in a variety of ways to implement new features and capabilities. And if you are just planning to launch your startup — this framework is just what you need.
