Mobile Wars II – Attack of the Hybrid Apps

Mobile app development market was already quite warm with intense rivalry between platform specific pure native apps and cross-platform HTML5 web apps or better known as hybrid apps, that is, native Android and iOS apps going against Phonegap and Ionic web apps. A newer and very noticeable player entered the tournament, not so recently though, with full strength and heavy artillery – React Native by Facebook. The battlefield is further heated up with Telerik bringing Angular 2 NativeScript.

Obviously, there isn’t much discussion left about the comparison between natives and web apps. Native apps offer higher performance and better device integration at the cost of an unsolved overhead of developing apps for different platforms in their own environments. The web apps offer cross-platform app development but the performance and the grade of native features are compromised. No point in comparing Android native and iOS native app as developers and businesses have to cater both platforms, although market share of Android devices is significantly greater than that of iOS. Phonegap seems to be losing its grip as it is a licenced tool and does not offer features of Ionic, those beautifully designed Angular directives for side menus and sliders trying to appear as native as possible. However, the web apps could not compete with the natives in terms of performance, switching between views has lags and scrolling is a bit sluggish.

It’s time to dive into the technical aspects of a new class of mobile development technology that builds native apps for both platforms and is still able to retain the tag of cross-platform mobile app development framework. It’s based on the notion “code once, run it anywhere”. React Native and Angular 2 NativeScript fall under this new category of ‘true hybrid apps’ seem to combine the best of both worlds. It’s not a single-page HTML application with DOM rendering in a WebView container but these are actual native UI components and API doing the work. You will find it quite impressive that how these native component are accessed and controlled by JavaScript or a superset known as JSX (JavaScript and XML) or even TypeScript. Pretty handy for the web developers who want to develop native mobile apps, especially those familiar with ReactJS, React Native’s sibling for web development. Let’s see how a small fragment of code of a React Native app looks like.

import React, { Component } from 'react';

import { StyleSheet, View, Text} from 'react-native';

import MoviesListItem from '../components/MoviesListItem.js'

class MovieList extends Component {

 contstructor(props) {

 super(props)

 }

render() {

let moveiList = Movies.map(function(movie) {
return (
<View style={styles.item}>
<Image style={styles.thumbnail} src={uri: movie.image}></Image>
<Text style={styles.title}>{movie.title}</Text>
</View>
);
});
return (

);
}
const styles = StyleSheet.create({
item: {
backgroundColor: ‘#CCC’,
},
thumbnail: {
width: 40,
height: 60
},
Title: {
}
});
export default MovieList;

The above code in JSX is an a example of a component that can be rendered in a React Native app. It must be noted that ES6 is a huge step up from the current JavaScript standard ES5. So it might take some efforts to get used to the JSX for a web developer as it is necessary to use classes and modules. And even more difficult for a native app developer to adapt to asynchronous code execution and XML tags being used within JavaScript.

The question that comes in minds of most developers would be ‘whether it’s worth spending time and other valuable resources to learn to code apps this way, or just wait out for a little more stability and support?’. Learning new technology is always exciting and adds a lot to a developer’s skillset, but there is a cost that must be paid for learning it. Both React Native and Angular 2 NativeScript have highly attractive perks to offer as they are capable of building native apps that will seemingly perform better than web apps while retaining the cross-platform development at the cost of learning to use them. However, it’s evident that the developers’ community and support is growing everyday.

A little while ago, Xamarin tried to accomplish the same goal, developing cross-platform native apps using C# and conventional coding style to access the native Android and iOS components. But it couldn’t make much name in the market as it’s a licensed tool with a heavy price tag and poor developers’ community. React and NativeScript do the same thing and are open-source platforms, which is a fact making them so popular. A drawback of React Native and NativeScript is you don’t get to enjoy the perks of sophisticated IDEs like Android Studio and Xcode but it wouldn’t bother web developers much because they are available as npm packages and code can written using their favorite code editors such as Sublime Text, Visual Studio Code, WebStorm etc. The native app developers might feel the process of setting up a React or NativeScript project a tussle as they will have no IDEs and package managers and will be struck with command line tools.

Both React Native and NativeScript are fundamentally same with slight differences. Both work by calling native component at compile time. React has certain wrappers over native components that are platform specific as they want developers to know what they are actually dealing with while coding their apps for Android and iOS, especially when they platform specific features. What is kept open by React, NativeScript attempts to hide this information as the components are same for both platforms and get mapped during compilation. Another significant difference between the two is how you style UI views. In case of React, styling UI asks you to learn a new styling scheme as they have dropped CSS, whereas NativeScript could retain the support for CSS, LESS and SASS. Spoilers alert! There isn’t much Angular aspects in Angular 2 NativeScript. However, React seems to have an edge over NativeScript because it has more effective debugging facility.

It’s hard to decide at the moment that whether it’s the right time to migrate to React or NativeScript right away, but it’s definitely worth exploring. Is it really a silver bullet for developing cross-platform apps? Cannot be ascertained. The technology stack of an app is a trivia for the end user. All they want is that the app should be purposeful and feel crisp and snappy.

{{cta(‘0f4ecd8c-28f6-4a23-80af-144afffc6310’)}}

I hope you enjoyed the post. For more of our technological musings, subscribe to the blog and we will make sure the best posts are headed to your inbox.