Over the last 8 months, I’ve done a significant amount of development for shentaro.com, an app that makes dental labs more productive. As a side effect of that endeavor, I spent a lot of time working with React Native. While this wasn’t my first time creating an app with React Native, it had been almost two years since my last experience. I was pleasantly surprised at how easy it was to pick up again and within a short period of time, we had a fully functional app that could scan QR codes, load case checkpoints, and track lab productivity.
As I neared the end of development, I realized that I had created the entire app without knowing how React Native actually worked. It’s funny how often that happens as we develop web and mobile applications. Our modern-day frameworks and libraries are so good, we rarely need to understand the underlying architecture in order to be productive.
Still, it bothered me that I didn’t have a solid grasp on how React Native works. I had a flurry of unanswered questions. How do React and React Native complement each other? How is React Native communicating with the native components? What are the limitations? I’m hopeful we can answer the majority of those questions in this article so let’s get to it.
React Native and React
Among the first things I noticed was that we still use React quite a bit throughout the application. This surprised me because I assumed that React was a web-specific technology. After all, how many times have we heard about the virtual DOM as the secret sauce to React? How would the virtual DOM even work in an environment without the DOM?
Well as it turns out, the virtual DOM is actually a misnomer. It doesn’t exist. You’ve been lied to.
Well, that’s not entirely true either. You see, the idea behind the virtual-DOM exists but it really has nothing to do with the DOM. Instead, the virtual DOM is just a tree-like data structure that represents the UI state of a given application. And wouldn’t you know it, the DOM is also a tree-like data structure. As it turns out though, tree-like structures are a great way to represent the UI on other platforms as well.
Ding. Ding. Ding. I finally understand the purpose of React. React’s job is to calculate this tree-like structure as fast as possible. React Native (and I’d add React DOM) on the other hand, is only responsible for taking that data structure and figuring out the most performant way to update the UI we had in the past to the one that we now need.
In summary, React is handling the tree reconciliation while React DOM and React Native handle the UI rendering.
The Bridge
The next piece of my understanding came as I learned the interaction between our javascript code and the native components. React Native is somewhat unique in the sense that it ends up creating native components based on our tree-like structure. Many similar cross-platform tools are just creating a web view within a mobile app.
The first major concept here is what’s known as the The Bridge. The bridge handles communication between the javascript we create (i.e. React) and the native components that react-native spits out. The bridge handles the communication in both directions too. Yes, it will take javascript and convert it into Java/Kotlin code for Android and Obj-C / Swift code for iOS. But it also handles the interaction from native components to their javascript counterparts. An example of this is when a native button is pressed, the native component will inform the bridge. The bridge then lets the associated javascript component know. The React tree is then recreated (potentially) and the communication gets sent back the other way as the bridge notifies the native views.
React Native Threads
From an architecture perspective, it’s also important to understand React Native’s threading model. Think of a thread as a brain that can only think about one thing at a time. The advantage of a single-threaded application is that it’s easy to reason about and understand. In contrast, a multi-threaded application can think about multiple things at once. The downside is it’s a more complex model to understand and can often lead to bugs.
So why does React Native use multi-threading? Simply put, React Native has multiple threads in order to improve performance. It also addresses the problems introduced with multi-threading by isolating the concerns of each thread. While each thread is isolated, they provide a way for the threads to communicate.
Let’s talk about a real use case here. Let’s imagine we have an application where we’re doing a heavy frontend-computation which takes 200 milliseconds. And let’s imagine that React Native didn’t have separate threads for UI, Javascript, and Native Modules. In our hypothetical world, when the user clicks a button to do this heavy calculation, the UI is going to freeze, at least momentarily. Why? Because it can only do one thing at a time. The application is fully devoted to solving this heavy computation and can’t be bothered with updating the UI.
Luckily for us, this isn’t the case. In a real React Native application, the thread responsible for Javascript will begin processing the calculation and the UI will be business as usual. This is great from a performance perspective. Now, our only worry with a frame dropping is if we have a large change in our UI tree that takes more than 16.67 milliseconds (assuming 60 frames per second) to render.
Limitations
Finally, it’s good to understand that React Native isn’t right for every mobile application. In fact, AirBnB decided to sunset the platform for their mobile development last year. In their case, they found that they were maintaining three code bases (React Native, native iOS code, and native Android code ). While many people viewed this as the React Native apocalypse, I don’t worry too much about it.
With all software, it’s important to pick the right solution for the given problem and no technology, regardless of awesomeness, is the right fit for every problem. As an example, I originally built this application with Firebase (link to Firebase article). After all, Firebase is way cooler than WordPress. However, it made SEO really difficult and poor SEO is a killer for nearly any blog. And so I found myself wandering back to a technology I considered archaic because it was the right fit for the job.
In short, most applications are not AirBnB. Before creating your app, consider the main functionalities and decide whether or not React Native is built for those functionalities. In a lot of cases, I think it’s a great choice.
Additional Resources
React Fiber Architecture – https://github.com/acdlite/react-fiber-architecture
React Native Architecture – https://www.youtube.com/watch?v=Ah2qNbI40vE
How Does React Native Work – https://www.quora.com/How-does-React-Native-work
How React Native Threads Communicate – https://medium.com/we-talk-it/react-native-what-it-is-and-how-it-works-e2182d008f5e
A General Guide To Threading – https://en.wikipedia.org/wiki/Thread_(computing)