Purely Native

Two open source JavaScript frameworks, React Native [1] and NativeScript [2], help programmers develop native apps for Android and iOS by using their IDEs with JavaScript. This approach has advantages over classical web app development in the style of, say, the JavaScript Meteor [3] framework, which relies on Apache Cordova [4] and WebView.

In the Beginning

Native apps for Android are traditionally programmed with Java or Kotlin; iOS uses Objective-C or Swift [5]. Because Android apps access native code internally with C or C++, developers rely on Java Native Interface (JNI) [6]. The Android Studio [7] and Xcode [8] development environments help in programming an application and bringing it to the corresponding app stores.

However, this approach has drawbacks: Installing Android Studio is quite complex, and Xcode runs exclusively on Apple's Mac OS X operating system. If you also want to adopt an Android app for iOS, you have to reprogram the code one to one under Objective-C or Swift. However, this significantly increases the development effort and creates additional sources of error through code redundancy.

Classic web apps use HTML, CSS, and JavaScript and run across platforms in a browser on any system. However, the platforms restrict access to the system with the help of the browser sandbox and only selectively release APIs, which limits the capabilities of web apps.

In 2009, PhoneGap (now Apache Cordova) was released, which allowed web apps to be connected to the system in a better way. Under Cordova, apps run in WebView on the system as in a browser. Plugins extend access to the system for the apps.

Meteor

The Meteor [3] JavaScript framework has evolved from a framework for developing real-time web apps [9] to an open source platform that claims to be the fastest way to launch apps. In fact, installing and creating a bootstrap app in the shell under Ubuntu 17.10 with

curl https://install.meteor.com/ | sh meteor create example

is quite easy. However, an attempt to build the app for Android with the command meteor add-platform android aborts (Figure 1), because, internally, Meteor uses Cordova, which requires Java and Android Studio. Moreover, a build for iOS is not possible on Ubuntu.

Figure 1: Cordova: Without Java and Android Studio, nothing works for Android developers under Ubuntu.

When creating an app, you can at least choose between Meteor's own JavaScript framework Blaze, AngularJS [10], and React [11]. However, Meteor offers less support for the programmer when it comes to deployment. Although meteor build packages versions for Android and iOS, it takes some manual work to get the apps into the respective app stores.

React Native

Native frameworks take a slightly different approach: With JavaScript help, they promise native apps for Android and iOS and thus build a bridge between web apps and platform-specific apps.

The React Native [1] framework leaves the underlying system to the JavaScript engine at run time. The code runs in its own thread and accesses the native APIs and native code of the system via a bridge [12] (Figure 2). The graphical user interface (GUI) is not created with the WebView Document Object Model (DOM) tree, as under Meteor, but with calls to native UI widgets in Java or Objective-C.

Figure 2: A bridge connects the JavaScript world with native code.

When the user triggers events by using the rendered elements, the React Native system passes them back across the bridge and converts them into a JavaScript event. React Native counteracts performance losses caused by synchronizing both worlds with a virtual DOM, for which the JavaScript React framework provides the model. In practical tests, React Native's sample apps reacted more or less as slowly as native apps under an older iOS version.

If you want to design React Native apps, the Expo [13] project will help with a number of tools, including the Expo Development Environment (XDE), which also launches in the browser under the name Snack [14]. At the same time, it can be operated from the command line after executing the installation instructions in Listing 1.

Lines 1 and 2 install the current version of Node.js v8 with Debian's Apt package manager. The Node package manager, npm, then fetches Expo (exp), including React Native, and installs it on the system in line 3; line 4 then sets up the boilerplate application react-test. Lines 5 and 6 package the app for loading from a smartphone. Figure 3 shows the shell after executing the command chain, together with a QR code for installation.

Figure 3: Expo offers the app for uploading in the Expo client like a website.

To transfer the packaged app with the QR code to an Android device or iPhone, the user must first install on the device the Expo client of the same name from the corresponding app store by launching the client, scanning the QR code, and loading the boilerplate app (Figure 4).

Figure 4: The app uses the UIAlertController class on iOS.

If the requirements for an app exceed the limits of React Native and Expo, you can retrofit native code, which is then controlled remotely with JavaScript in the app. In this fallback scenario, however, you do need to install Android Studio and Xcode.