The difference between React (or ReactJS) and React Native has been one of the hottest topics in the last two years. And, if you google it, you’ll probably find tons of React vs React Native articles comparing these technologies. We have stayed aside for a long time but, as professional web developers, we just cannot keep silent any more.
So let’s make it clear from the very beginning: it’s wrong to compare React to React Native. They are not variations of one category, they are totally different by their nature. Speaking metaphorically, it’s the same that if you compared an egg to an apple: yes, they both are food, but you’ll unlikely use apples to cook an omelet or put eggs in a smoothie (well, at least if you’re not a really weird smoothie gourmet).
The same is with ReactJS and React Native, they are similar to the extent that they are technologies and have some common general principles of work (we’ll talk about this later). Yet, they serve different purposes, they are not interchangeable and there is no point to set one against another. In this article, we will try to sort things out.
ReactJS and React Native: What are they?
Let’s start with some basics of ReactJS and React Native to help you understand their nature and purposes.
ReactJS was initially created by the Facebook team member to make it possible to update news feed while people are using a chat. That’s probably the simplest example of the application of this library, but ReactJS indeed has many benefits so now it is also used by Instagram, Netflix, Yahoo and many more.
How does React Native actually work?
OK, to be fair we must confess that React Native and ReactJS are indeed intermingled meaning that React Native uses ReactJS to create mobile applications. Yet, they do not interact like technologies of one category, but let’s look at some basics at first so we can be on the one page.
Any websites by its essence is an HTML document. However, when we enter a website, we usually do not see just lines of a code because a browser interprets HTML and shows us the content, style and structure in a form of a webpage. The second thing that browser does is it transforms the representation of HTML-syntax into a Document Object Model or just a DOM. Basically, a DOM is a programming interface of an HTML-document that represents such document as a tree-like model. Here’s how it looks:
The web apps built with ReactJS work a bit differently, so let’s do a high-level review too.
React creates a virtual copy of DOM (so-called Virtual DOM) that allows a user to make changes without affecting the rest of the parts of the interface. The process for ReactJS looks like this: a user makes an input -> the changes are reflected in the data models of components of a Virtual DOM -> the UI is updated. So what is ReactJS good for? As the user’s input doesn’t directly change the component in a Real DOM but only its abstract copy, ReactJS makes it possible to build a highly-dynamic UI for web apps.
Speaking about React Native apps, the process of their development is, in general, similar to what is describes above since, as mentioned, React Native uses ReactJS library. But, instead of making updates in browser’s Virtual DOM (like ReactJS does), React Native invokes Objective C or Java application programming interfaces to render to iOS or Android components respectively. Due to this, the UI elements in mobile apps created with React Native look pretty much like elements in native apps.
Isn’t React Native too good to be true?
Along with the benefits, React Native also has its downsides which have to be considered before opting for this way of the mobile app development. Specifically, as React Native doesn’t have enough navigation components, the navigation in mobile apps built with this technology usually suffers. This means that users do not receive as great UX as they may receive with native apps. The second problem is that some custom modules are still either absent or underdeveloped so, if you’re not a lucky person, you’ll have to develop some solutions from scratch. And the third issue we want to emphasize on is that if you decide to create a mobile app with React Native, you’ll still need a native developer to make interactions with some important functions such as access to camera or push-notifications.
So, summing up, React Native indeed makes the process of mobile app development fast and simple, but if you want your app to work properly (and perfectly), you need to consider other options. Let’s briefly discuss what’s on the table.
Alternative ways to develop a mobile app
Basically, besides using React Native, there are only two more ways to develop a mobile app out of a web app:
Ionic (or another analogous framework for hybrid app development). Ionic and similar frameworks make it possible to “create” mobile apps for both iOS and Android. There are quotation marks in the previous sentence because these frameworks, basically, do not help create mobile apps; they just make a web app look like a mobile app from a user’s perspective.
Specifically, Ionic uses a WebView which, in simple words, is a mini web browser to deliver web content. For this reason, an app developed with Ionic feels more like a website in a shell of a mobile app than a real mobile app. The quality is compromised significantly, the performance is poor, so it’s a good option only if you need a rough mockup of your future mobile application. If you want to have a real app with good UX and working functionality, do not even look in this direction.
Flutter is Google’s mobile UI framework for crafting high-quality native experiences on iOS and Android in record time.
Native app development. Native apps are, of course, the best and the most reliable. As software is developed specifically for iOS or Android, an app runs faster and integrates better with mobile hardware. This option is indeed more costly than the other two, but, as we see from the practice, it totally pays off in the long run as native app development allows for creating a high-performing product that users just love. You’ll have no problems with UX and UI as a mobile app will behave in the way users expect it to behave (unlike the apps built with React Native and Ionic). On top of this, there is no need to hire different developers (JS and native) to create software and then make necessary adjustments to make it perform as it’s supposed to.