Develop apps with React Native and NativeScript
Purely Native
The JavaScript frameworks React Native and NativeScript build a bridge between web app development and native app development. We look at the advantages of these native frameworks against the background of the classic app framework Meteor.
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.
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.
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.
Listing 1
Installing Expo on Ubuntu 17.10
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.
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).
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.
Buy this article as PDF
(incl. VAT)
Buy Linux Magazine
Subscribe to our Linux Newsletters
Find Linux and Open Source Jobs
Subscribe to our ADMIN Newsletters
Support Our Work
Linux Magazine content is made possible with support from readers like you. Please consider contributing when you’ve found an article to be beneficial.
News
-
Latest Cinnamon Desktop Releases with a Bold New Look
Just in time for the holidays, the developer of the Cinnamon desktop has shipped a new release to help spice up your eggnog with new features and a new look.
-
Armbian 24.11 Released with Expanded Hardware Support
If you've been waiting for Armbian to support OrangePi 5 Max and Radxa ROCK 5B+, the wait is over.
-
SUSE Renames Several Products for Better Name Recognition
SUSE has been a very powerful player in the European market, but it knows it must branch out to gain serious traction. Will a name change do the trick?
-
ESET Discovers New Linux Malware
WolfsBane is an all-in-one malware that has hit the Linux operating system and includes a dropper, a launcher, and a backdoor.
-
New Linux Kernel Patch Allows Forcing a CPU Mitigation
Even when CPU mitigations can consume precious CPU cycles, it might not be a bad idea to allow users to enable them, even if your machine isn't vulnerable.
-
Red Hat Enterprise Linux 9.5 Released
Notify your friends, loved ones, and colleagues that the latest version of RHEL is available with plenty of enhancements.
-
Linux Sees Massive Performance Increase from a Single Line of Code
With one line of code, Intel was able to increase the performance of the Linux kernel by 4,000 percent.
-
Fedora KDE Approved as an Official Spin
If you prefer the Plasma desktop environment and the Fedora distribution, you're in luck because there's now an official spin that is listed on the same level as the Fedora Workstation edition.
-
New Steam Client Ups the Ante for Linux
The latest release from Steam has some pretty cool tricks up its sleeve.
-
Gnome OS Transitioning Toward a General-Purpose Distro
If you're looking for the perfectly vanilla take on the Gnome desktop, Gnome OS might be for you.