November 17, 2016

Native vs Hybrid App development

by skygate

Is React Native a game changer?

In the world of mobile apps there has been a constant debate over the merits of Native and Hybrid Apps.

While Native Apps need a separate codebase for iOS and Android, Hybrid Apps allow to write one section of code and deploy it on various platforms. Apparently the only sacrifice is the app performance. In high resource hungry applications a typical Hybrid App performs far worse and responsiveness drops, while Native Apps have a super smooth feeling to it.

It’s okay for content-oriented apps where a few high-level calculations are needed, but with more sophisticated animations, interactions and 3D effects it will be more rational to choose Native. The cost of such app might be even double, because you need to write separate code for iOS, Android, Windows Phone and other platforms - but the choice is reasonable.

1.png
Difference in responsiveness between Hybrid and Native apps

How Hybrid App works and why it is slower than Native

The reason why Hybrid Applications can be run on multiple devices is because there is a large common denominator of both the iOS and Android system, namely the WebView. You can think of it as a kind of web browser. It runs HTML, CSS and JavaScript code, so you can apply exactly the same technologies on mobile as you use to deploy web applications.

What is missing here is that WebView is just one of numerous iOS components – please have a look at the chart below showing how many different components there are in iOS. Same thing applies to Android and alternative platforms.

WebView - one of the iOS components

In practice any app based on Apache Cordova, such as PhoneGap or Ionic, uses the WebView component that runs and interprets JavaScript, HTML and CSS. It’s because smartphones aren’t optimized for running complex web content or don’t use the hardware to the fullest. You won’t have the feeling of native-like smoothness and responsiveness when the application grows largely.

What’s great about React Native

React Native doesn’t limit to the WebView. Nearly the same number of available components can be used on a phone and the app won’t even notice it has been written in JavaScript framework, such as React. Below, there is a Hashnode poll started on February 3, 2016 on popularity of React Native among mobile app developers. It is worth noticing that the framework was brought forward in 2015.

A poll conducted on Hashnode

Practically React Native runs a native code on iOS and Android. There is only a thin business logic layer written in JavaScript, but all primary components of the application are just the same as if they were developed using the Objective C for iOS or Java for Android.

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

In the past 5 years, JavaSript has become an extremely mature programming language. Although Apple has replaced Objective C with Swift, the latter is not as sophisticated as JavaScript yet. Code written in JavaScript has a greater support, maintainability, and at the same time less bugs. It is easier to maintain and more developers use it.

Other advantages of React Native framework over Swift:

  • React Native allows to reload the app live, so you can see the smallest changes in code in real time. It’s not difficult to guess that this feature increases the speed of development significantly. To compare, Swift requires code recompilation every time a change in code is made

  • React Native is elastic - you can still use Objective C or Swift in iOS cases if you need to.

  • Using tools such as AppHub and Microsoft’s Code Push you can push the changes directly to the App Store skipping the review.

  • No matter how great it is, you don’t need to write the code in Xcode. Especially when coding for multiple platforms you don’t need to interchange between text editors and computers - all can be done on a PC, in the same running an app live on OS X, iPhone/iPad and Android devices. All these will reload real time, whenever a code is modified and saved on a development host.

Learn once and write anywhere

The question is whether it is better to learn once or write once. My answer is to earn. Although you will have to write some platform-specific code, with React Native it’ll be so easy. In contrast, when developing iOS app the Android version needs to be written from the beginning.

react-native.png

The same app deployed on Android and iOS

React abstracts from the Document Object Model (DOM) and works with Virtual DOM. When developing a web app, you can use native mobile components in the form of DOM, the same type as in HTML. It means that having one code you can deploy it as a web app - with little modifications only. You can develop a full variety of apps (iOS, Android, web) with one codebase, each platform requiring small adaptations only. And if a team member is gone for holidays another front-end dev can fill in for them with ease.

The idea behind React Native is abstraction in dev patterns creation. In result, different platforms become more similar, and having a good code structure in one language you can still deploy a platform specific code that runs in speed of a native code and uses native components smoothly.

Asynchronous Execution

All operations in React Native between the JavaScript application code and the native platform are performed asynchronously, and the native modules can also make use of additional threads as well. This means you can decode images off of the main thread, save to disk in the background, measure text and compute layouts without blocking the UI, and more. 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. (the paragraph’s source: http://facebook.github.io/react-native/releases/0.21/)

A new type: JavaScript Native mobile apps

Watch out not to call React Native a hybrid approach – it’s a brand new category. For now we can call it JS Native mobile apps. The category will without doubt grow faster from now on.

Cheat sheet:

 

 

React Native

Objective C

Swift

Cordova

Ionic

Performance

+ native speed

+ native speed

+ native speed

- can be slow

- can be slow

Easy to code?

+ easy, good code structure

- hard and legacy

= mediocre

++ super easy, good code structure

++ super easy, good code structure

Supported by

++ Facebook,

Developed by Facebook!

Facebook has a real business in running it's apps onto multiple platforms

+ Apple, but Apple prefers Swift now

+ Apple

= Apache Software Foundation, basically Open Source guys

= startup with investors

Platforms

++ iOS, Android, WordPress, Web

- iOS only

- iOS only

++ iOS, Android, WordPress, web

++ iOS, Android, WordPress, web

Gesture smoothness

+ Native app

+ Native app

+ Native app

- like webbrowser

- like webbrowser

Tags