React Native Is the Way of The future

React Native may well be the answer to programmers’ longstanding prayers especially in building apps for mobile platforms.

The dream of all software developers is to have a fun, easy language that provides a fast track to completion, easy to debug and performs well on the targeted platforms — ideally as a native app, instead of an interpreted or emulated one. The result would be that ideas for a finished application become a reality much more quickly and which are not at all sluggish in their responsiveness on any of the intended devices.

For those who are not software engineers, “native” simply refers to software that is pre-compiled (translated) into the machine code (the instruction set) that is indigenous to a specific device. Native code typically runs much faster than programming code that has to be interpreted and then converted to machine code on the fly. Native is also faster than imported native code from a foreign device that has to be emulated locally. All that translation slows things down.

It used to be that accessing the internet required one application and the same device that ran that software had many other applications that took on other tasks. More and more, the line between internet access and other applications has been blurred. The Internet of Things is part of this revolution.

Based on JavaScript

JavaScript is one of the languages used to control the look and behavior of web pages. Extensions of the JavaScript technology have included jQuery, AngularJS, JSON and AJAX — broadening the flexibility of Javascript to access and manipulate elements of a web page, to transmit data, and to interact with the web-page server to change content without having to reload the entire web page. These things allowed web pages to become more dynamic.

With the development of mobile devices, each with their own unique operating system, the landscape of development became more complicated. It seemed software engineers were going to have to learn multiple operating systems in order to develop cross-platform applications — more so than ever before.

But React Native seems to be the new lingua franca of software development, allowing software engineers to learn once and to develop for many platforms.

It Started with React

React, sometimes referred to as React.js, is simply a library of JavaScript functionality created by Facebook developers and made Open Source — maintained by Instagram, Facebook and a community of Open Source developers. Its purpose was to help in user-interface (UI) development. Libraries of software code make it easy for software engineers to develop new software without having to reinvent solutions that have already been created. This kind of resource raises the level of abstraction, allowing software developers to create new applications without having to worry about all the tiny details.

Personally, I like getting my hands dirty with assembly language on occasion (one step away from machine code), but building a full-blown internet app in assembly language could take several decades of labor. By the time you’re finished, your approach would likely be sorely outdated. Programming languages have become more and more abstract and high-level, wrapping all those machine-level details into more generalized code that is easier for human programmers to understand, and far easier to debug.

React Native does not rely on HTML5. Instead, it includes a native layer to build an application for iOS and another one for Android, each of which works directly with those operating systems, rather than through intermediary web or hybrid approaches. This makes React Native apps far more efficient and the look of the app on each device far more like other apps on the same device.

All of this is achieved without the far longer development time required for building apps in the native environment. Development time drops from months to hours. Why the difficulty developing natively for mobile? One key element involved laying out a page, requiring manual calculations for each necessary view. Such tedium can slow down development to a crawl. One of the old maxims of software development is never to hardcode values and this is just as bad; scalability of the engineering process was severely curtailed. Making incremental changes in an app had the added tedium of requiring a full recompile every time you made the tiniest little change just to see if it worked. In web development, you only needed to change the appropriate code and then refresh the web page in the browser to see the results. React Native eliminated these problems through bypassing such tedious details.

And there are other benefits from React Native. Facebook software engineer, Tom Occhino, explains, “What we’ve found is that when we build with React, our code is a lot more predictable. This predictability makes it so we can iterate more quickly with confidence, and our applications are a lot more reliable as a result. Additionally, it’s not only easier to scale our applications when they’re built with React, but we’ve found it’s also easier to scale the size of our teams themselves.”

The Big Reasons for Going Native

The user experience (UX) is king in software development. If a user gets frustrated, even in the slightest, an app could be removed and forgotten. If an app looks clunky or oddly different from other apps on the same platform, that adds to the level of annoyance. Going native in app building means that the look and feel are more compatible with the platform.

Going native means that a developer can use all of the UI tools that come with the platform — things like date pickers, navigation stacks, switches and maps. Creating a web version of these components is never quite the same and the user is going to notice. Moreover, when changes to these things are made on the platform, your web versions are never automatically updated to match. With a native app, the updates are automatic and seamless.

When an application needs to crunch numbers, it usually does this in the background on a separate processing thread. This allows the front end (user interface) to remain responsive to the user’s clicks and typing. Without such multi-threading, an interface would hang and the frustrated user might take the software behavior as a sign of disrespect. Wouldn’t you if someone ignored you while you were attempting to communicate with them?

Web development doesn’t have the multi-threading capabilities of native apps. But with React Native, you can tap into each platform’s multi-threading capabilities. This way, the user stays happy while the app is busy crunching numbers in the background. What kind of crunching? One is decoding images in order to display them. Another is text measurement. By going native, an app can remain high performance and responsive.

Bridging the Gap Between JavaScript and Native

Simply using JavaScript to manipulate the native APIs doesn’t achieve a smooth, responsive result. JavaScript alone is synchronous and interpreted. In other words, it performs one instruction after another in linear fashion and all of its instructions are converted to machine code by an interpreter. APIs, on the other hand, are pre-compiled code that works directly with a platform’s operating system to do specific tasks on that platform. The problem with synchronous operation is that everything waits for the current instruction to be completed.

Ideally, an app would have its JavaScript run on a different thread so the UI thread is never blocked by JavaScript’s synchronous tasks.

To make matters worse, if the JavaScript code needs to have access to information that’s on a different thread — like the dimensions of an object — it has to lock the system. And, again, the user experiences a dreaded system hang.

In addition, every time you have cross-thread traffic — from the native environment to the JavaScript interpreter — you bog down your processor with extra overhead. It’s a bit like the road trip with four screaming kids in the back and every few minutes one of them needs to stop for a potty break. Such interruptions can make the trip take a far longer time. In the world of apps, the user experiences sputtering responsiveness, hesitations and hangs.

React Native takes care of all these problems. Facebook’s Occhino explains, “Since React components are just pure, side-effect-free functions that return what our views look like at any point in time, we never need to read from our underlying rendered view implementation in order to write to it. In the browser environment, React is non-blocking with respect to the DOM, but the beauty of React is that it is abstract and not tightly coupled to the DOM. React can wrap any imperative view system, like UIKit on iOS, for example.”

In the last three years, React Native has expanded from iOS to include Android and Windows 10.

Some have voiced concerns that Facebook could, at some future date, abandon React Native. But this seems unlikely, even if they find some aspect of the technology to have unforeseen problems. Facebook has made the project Open Source which makes it more of a public project with the potential to live on even if its creators lose interest. So far, React Native is living up to the expectations — keeping development lean and fast with results that feel like real, native apps written in Java, Objective-C or Swift.

Ready to take the next step, and launch your MVP? Drop us a line. Our team of ex-Googlers can help you every step of the way, from design, to engineering, and all the way through product-market fit.