Example App

Listing 2 shows how developers can use React Native. The code stores the App.js file in the react-test directory. Like any application under React Native, the app in Listing 2 is based on the JavaScript React [11] framework, imported in line 1. Line 2 then retrieves the StyleSheet, Button, View, and NetInfo components from React Native.

React Native also forms the App base class (lines 4-15) as a component. Its render method (lines 5-11) uses the XML-like JSX code to create an area-specific user interface (lines 7-9). In line 8, the View component encapsulates a button [15]. Android implements this at run time with an instance of the android.widget.Button class [16]. iOS, however, uses UIButton [17].

Lines 12 to 14 store the callback function getConnectionInfo(), to which the value of the onPress attribute points (line 8). When the button is pressed, the button method determines the connection status of the mobile device in line 13. The lambda function responds to the asynchronous result by calling the then() method, which should report the determined connection type in an alert box. As Figure 4 shows, the connection status could not be determined in the field test for unknown reasons.

The {styles.container} code reference from the value of the style attribute binds the stylesheet information from the static styles JavaScript object to the View component in line 7. These details paint the background in a gray tone and place the button in the center of the display (lines 17-24). In addition to NetInfo, React Native offers a number of other system-related API objects that extend the SDK.

The exp start command in the last line of Listing 1 acts like a watch process. If it registers a change to the project directory, it informs the packager server, which has also been started. The server arranges for the updated app to be delivered to connected Expo clients.

As the sample app react-test [18] demonstrates, a programmer can publish an app free under their Expo account in the project's cloud store at any time. This is triggered by clicking the Publish button in XDE. If you also add buildidentifier and package to the app.json configuration file in the project directory, then exp build:android creates an Android app within the provider cloud.

With a URL under the Expo account, you can track the build log of the process live at the command line. Figure 5 shows the build log after successfully building the Android package. Behind the scenes, Expo uses instances of Android Studio or Xcode from its cloud. As with Meteor, however, the providers have not completely automated the last few steps in the app stores; some manual work is again needed.

Figure 5: Expo provides insight into the logfiles of its cloud builds.

NativeScript

The NativeScript [2] JavaScript framework also promises to launch native apps for Android and iOS. Like React Native, NativeScript leaves it to the respective JavaScript engine to execute the code. Android v8 and iOS JavaScriptCore (JSC) are used.

NativeScript also controls native code remotely via a bridge [19]. The run-time environment dynamically passes on calls to getter and setter methods of a JavaScript object to native objects.

Setting up the development environment for NativeScript proves to be particularly tricky on Linux. Builds of iOS apps fail for known reasons, anyway. If you are not limited by cost (see Table 1), you can create the apps in the provider's cloud as you would under Expo. At least the first 100 builds are free.

The command

sudo npm install -g nativescript

installs the JavaScript framework on Ubuntu. A suitable bootstrap app is then created:

tns create ns-test --template nativescript-template-ng-tutorial

The Sidekick [20] graphical development environment installs Debian's dpkg package manager after downloading with:

sudo dpkg -i NativeScriptSidekick-amd64.deb

Then, Sidekick launches with:

/opt/Native\ Script\ Sidekick/Native\ Script\ Sidekick

Unlike React Native, NativeScript supports all kinds of scripting languages and frameworks: Besides AngularJS [10] and Vue.js [21], you can also use pure JavaScript or TypeScript [22].

Listing 3 returns to the sample app from Figure 4 and Listing 2 under AngularJS and NativeScript. The code ends up in the app/app.component.ts file in the ns-test directory under the previously created bootstrap app. Line 1 of Listing 3 imports the Component class from AngularJS; line 2 imports the connectivity object from NativeScript. The decorator in lines 4 to 7 converts the subsequent class definition of the basic AppComponent class (lines 8-22) into a derivative of the Component class.

Line 6 creates the area-specific UI using the Button component to generate a button, which calls the getConnectionInfo() callback function when tapped. The NativeScript code determines the connection type synchronously, and the alert() function reports the result to the user.

Figure 6 shows the app's successful Sidekick for Android cloud build. We did not tested the cloud build for iOS, because the required iOS developer certificate – in contrast to the documentation – is now commercial.

Figure 6: Sidekick after the cloud build for Android. The version for iOS is now commercial.

Conclusions

Meteor apps are easy to set up and scale thanks to the Galaxy cloud service. Things only start to go wrong when creating mobile apps.

React Native and NativeScript offer equivalent solutions. They do without WebView and use native code for the iOS and Android app interfaces. Both native APIs and UI components use a bridge. For app developers, this feels like working with a browser and DOM, and the native UIs improve the user experience.

The Expo project complements React Native. With the Expo client, the web-based Snack IDE, and free cloud storage, Expo offers an ideal environment for new projects and their communities. Thanks to cloud builds, developers no longer have to go to the trouble of configuring and installing Android Studio and Xcode.