Developers Nirvana

App development with React Native. Why does it make app development super easy?

Please remember NOT to call React Native a hybrid approach – it’s a brand new category. Let’s call this category for a start “JS Native mobile apps”. It can and will grow faster from now on. Read on to understand why.

In the world of mobile apps for years there has been a debate over Hybrid Apps and Native Apps. While Native Apps require separate codebase for iOS and Android to deliver solution for the target audience, Hybrid Apps allow to write one piece of code and deploy it on multiple platforms. Application performance is the only noticeable sacrifice. While Native App has the super smooth feeling to it, often required in some high resource hungry applications, the typical Hybrid App performs far worse in those situations and responsiveness drops.

The lack of super smooth feeling is ok though for content-oriented applications where not so many high-level calculations are necessary, but when there are going to be more sophisticated interactions, animations or 3D effects, it might be wiser to select Native as your preferred choice. It might double the price (you need to write the code for both iOS and Android, not considering Windows Phone and other platforms), but it seems money well spent.

Difference in responsiveness

How does Hybrid App work and why is it slower?

The reason why you can run Hybrid Applications on multiple devices is because there is a large common denominator living in both the iOS and Android world called WebView. You can think of it as a kind of web browser. It runs HTML, CSS and JavaScript code, so you can use exactly the same technologies on your phone as you use for deploying web applications.

What is missing here is that WebView is just one of multiple iOS components – please take a look at diagram 1 below showing how many different components are available in iOS. The same thing goes for Android and other platforms.

Diagram 1 – The WebView component is just one of multiple iOS components.

So basically any app based on the Apache Cordova framework like PhoneGap, Ionic etc. in practice will be using just the WebView component that runs and interprets HTML, CSS and JavaScript. That is because smartphones are not optimized for running complex web content, or more specifically are not using the device hardware to the fullest. You will not have the feeling of native-like smoothness and responsiveness when the application grows extensively.

OK, so what’s great about React Native?

Simply said, it does not limit to the WebView. You can use almost the same number of available components on your phone and your app will not even know it has been written in JavaScript framework like React. Below is the poll started on February 3, 2016 on Hashnode about popularity of React Native among mobile developers. Again, React Native framework was launched in 2015.

In essence, React Native runs native code on iOS and Android. There is only a tiny business logic layer written in JavaScript, but all major parts of the application are exactly the same as if they’ve been developed using Objective C (soon to be replaced by Swift) for iOS or Java for Android.

So it runs the native code, but is it better than Swift?

In the recent five years there has been a fabulous increase of matureness in JavaScript language. Although Apple introduced the replacement of Objective C language by Swift, it’s not yet as mature as JavaScript. The code written in JavaScript is more maintainable and better supported by the community. Besides that a very large number of developers using it and it is less buggy. In other words, it is easier to maintain and hand-over JavaScript based code than specific native code like Swift. There are also some other advantages of the React Native Framework over Swift:

React Native allows to live reload your app, change a bit of your code and see results in ‘real-time’ on your phone. “Real-time” seems appropriate, because there is an event live-reload option in Nuclide (Facebook’s code editor dedicated to react native), which reloads views upon saving the document. That is a huge help for developers and increases the speed of development (Swift requires recompilation of the code every time any change is made).

The framework is flexible: you can, for example, still use Objective C or Swift code if you need in some iOS specific scenarios, if you want to.

You’re not forced to write your code in Xcode. Apple is doing a great job, but still people have various preferences and especially when writing code for multiple platforms. Developer do not need to switch between text editors and even computers: all development can be made on a PC, while running the application live on an OSX, iPhone / iPad, Android device, etc. And again, all those devices will reload themselves instantly when the code is changed and the file is saved on the development host.

Learn Once, Write Anywhere

Learn once or write once? Learn! You’ll still need to write some parts of the code that are platform specific. But it’s very easy with React Native. On the contrary when you develop iOS apps, you need to write the Android app completely from scratch.

You can use native mobile components in shape of DOM components Because React abstracts from the JavaScript Document Object Model (DOM). More specifically it operates with Virtual DOM. This is the exact same type as used in HTML, when developing web application. That means having one code, that (with small adoptions) you can deploy it as a web app.

Deployed on Android and iOS.

From a developer’s perspective it means the following: if you are about to promote your service or a product using a digital world you can do it now much more efficiently. Your front-end / JavaScript developer can prepare the full variety of apps for you: for iOS, Android and for the web, using one codebase with small adaptations for each platform. And if this developer is on holiday, you can ask another front-end / JavaScript developer from your team to continue the work.

The use of JavaScript is the power of abstraction. What is abstraction in this context? In short, abstraction is the root cause of most important software evolutions, creation of development patterns, and smaller amount of diversity on different platforms. So while you can have a good code structure in your favorite and powerful language – you can still deploy platform specific code that runs in native code speed and uses native components fluently. That’s the idea behind React Native.

Asynchronous Execution

All operations in React Native between the JavaScript application code and the native platform are performed asynchronously and the native modules can make use of additional threads as well. This means you can, for example decode images of the main thread, save to disk in the background, measure text and compute layouts without blocking the UI. As a result, React Native apps are naturally fluid and responsive. The communication is also fully serializable, which allows us to leverage Chrome Developer Tools to debug the JavaScript while running the complete app, either in the simulator or on a physical device.

Performance

Not Facebook, but Apple introduced the JavaScript Core that made React Native possible. So it is not strange for Apple’s iPhone to run JavaScript code, it is prepared for it. Also, a great advantage of React Native is making use of asynchronous calls, which is possible, but hard to use in Native environment (You need to specify threads for background tasks, and this is really a pain and consumes a lot of time).

Using JavaScript and threads counts for all other platforms; Android and Windows Phone implemented JavaScript as a Native (not external) engine, so the communication with the hardware is direct, not intermediary.

The new category: JS Native mobile apps

So again, please keep in mind not to call React Native a hybrid approach, but for a start “JS Native mobile apps”. Now you have read this article, hopefully you will understand why React Native will grow fast and probably soon will called the de facto standard for app development.

Do you need an Agile Coach or want to know more about app development with React Native? Contact Servan!