Rahul Verma

How come React Native is so Native?

Before diving into the pool of React Native, I was curious to know how this thing really works under the hood. After all, developers can’t stand any black box and seeing through any abstraction is their favorite part. I went through the docs, lectures and conferences before using any of the React Native components. In this blog, I will be sharing my learning with you and I hope you enjoy it.

React Native Apps

I will illustrate the magic of React Native using two spheres-

Native Sphere

This is where developers have been playing with Objective C/Swift in iOS and Java/Kotlin in Android. React Native uses the same sphere to render all of its views and it’s done on the main thread. This sphere keeps the native feel intact so that it’s hard to tell whether the app is written in native language or React Native.

JavaScript Sphere

It contains JavaScript code that runs on the separate thread. Code in this sphere is executed by Javascript Engine. React Native puts business logic of your app and styling of views here. Any code contained here does not block UI and hence user experience remains untroubled.

React Native
Both spheres play their part at lightning speed. React Native then devised “the bridge” to connect these two code containers and give developers a superpower:

“Write once, run anywhere and keep it native”

React native bridge

 

You guys must be wondering “What’s so special about this bridge?

Well, let’s take a glance at how this wisely designed component works-
Any user interaction/event is detected in Native Sphere and it’s straight away passed on to JavaScript sphere via bridge for processing. JavaScript does the required computation, sets state and props (consider it same as parameters in other programming languages. However it’s called called props in terms of React Native). When it’s done, it serializes the data and sends it back to native sphere via bridge for view rendering.

Any pass over the bridge (call from Native to Javascript or from Javascript to Native ) brings down the performance graph. That’s why a great deal of effort has been put to make this bridge seamlessly work. It supports:

Asynchronous Execution– JavaScript code keeps executing without waiting for the Native call to complete. As I mentioned earlier that any activity in JavaScript sphere does not hamper user experience, asynchronous calls make React Native apps highly performant.

Serialization- Any communication over the bridge includes exchange of serializable messages. Question arises why React Native didn’t let both spheres share the data? Let’s discuss limitations to this approach.
Code execution in both spheres is independent of each other. If data is shared, it can get very difficult to ensure when to release the allocated memory. This will eventually result in memory leaks.
Another outcome is data corruption, in case both spheres simultaneously read/write the shared data. Though It can be synchronized in order to avoid the conflict. But, this will allow only one sphere to access the data at a time. Another sphere will have to keep waiting for the access thereby hampering its seamless code execution.

Batch Processing- Under the veil, JavaScript code gets translated into native code after the pass over the bridge. These number of passes have to be kept minimum so that your app does not become laggy. Therefore, JavaScript code statements are batched before sending them over to the other sphere. Let me make it easy for you to grasp the concept :

( ) 4 passes over the bridge

Code block 1 – -> Code block 1
Code block 2 – -> Code block 2
Code block 3 – -> Code block 3
Code block 4 – -> Code block 4

 ) 2 passes over the bridge

Code block 1 ] \  _ _   Code block 1
Code block 2 ] /          Code block 2

Code block 3 ] \  _ _  Code block 3
Code block 4 ] /          Code block 4

React Native developer

Conclusion

Now it must be clear to you that React Native is a brilliantly designed framework giving new dimension to cross platform mobile app development. Gaining huge popularity over a small interval of time marks the initial phase of its success. Developers from all over the world are actively contributing to the framework and its modules. Whether you are a web or mobile developer, you should give it a try and share your experience in comments .

What’s next?

Hope you guys enjoyed reading it. There is a lot more to come in my next blog post. I have been developing apps for iOS since 3 years and will share my experience on starting development with React Native. I will also share a comparison on how features/functionalities in React Native differ from that of iOS. This will help you guys get an idea how your life will be when you head to React Native from iOS.

 

Related Articles

#Tech

NHibernate, Linq and Lazy Collections

For the past few months we have been busy building a services framework for one of our clients so that they can build all of their enterprise web services without ever having to worry about the cross cutting concerns and... Read more
#Tech

Page Redirects using Spring.NET

Who is responsible for page redirects in ASPNET MVP – The View or the Presenter None of the above, it is you :) On a serious note, it is the View as one shouldn’t pollute the Presenter with the page navigation... Read more
  • Sumeet Mehta

    Good read.. Thanks Rahul for sharing your insights. Very helpful to clear the concepts.

    • Rahul Verma

      Thank you, Sumeet. 🙂