React Native vs. NativeScript vs. Xamarin vs. Flutter vs. Ionic vs. Cordova vs. PWAs
A comparison of the cross-platform mobile app frameworks — Native Apps vs. Hybrid Apps vs. WebApps
Introduction
In the world of mobile app development one has the option of building fully native apps (i.e. codebase using Objective C, Swift for iOS; or Java, Kotlin for Android), or building cross-platform apps (i.e. a single app codebase that can be run on the different platforms of iOS, Android, UWP etc.).
In the following post we shall compare the various cross-platform mobile app framework options in terms of programming languages and features.
Native Apps vs. “Compiled to Native” vs. “Webview Wrapper” vs. PWA
Native Apps
Apps can be built using the default native platforms and IDEs provided by iOS or Android.
The programming language options when building in Native are as follows,
Building mobile apps using the native platform fully leverages the underlying platform and provides the best performance and user experience.
The obvious disadvantage though is the codebase does not have cross-platform portability. One needs to build a separate iOS App and a separate Android App. This comes with the overhead of maintaining two separate codebases, and also having separate development teams for the different technologies.
Cross-Platform Apps
The alternative option to develop apps use a single language codebase that can be run on either the iOS or Android platforms. This option allows cross-platform portability in that a single app codebase developed, can then be run on any platform of choice i.e. iOS or Android.
In the cross-platform app world, the approach the framework takes to render a “native” app experience, ranges along the following spectrum.
Apps developed using the first two cross-platform framework approach, are typically called Hybrid Apps.
Compile to Native
In this option, the app can be developed in a single language and that single codebase can then be compiled to native iOS or Android. This means one can develop all the features of the App in a single app codebase using a single programming language(eg. Javascript or C#), and can then use the framework to compile the single codebase to a Native iOS App or Native Android App.
The “compile to native” frameworks have two main advantages over other cross-platform approaches.
- The “compile to native” frameworks actually translate the UI components from the single codebase language (eg. Javascript) into the actual native widget for the target platform and render them using the native UI components of the target platform i.e. A button widget in the single codebase when compiled to native iOS App (or Android App), is actually rendered using the native button component of iOS (or Android).
- These platforms also provide access to all of the underlying device features, by abstracting a layer over the device hardware.
Thus in “compile to native” cross-platform approach, all of the UI is in the compiled app is composed of native UI controls and all of the underlying device APIs are accessible within the single codebase you are using to develop the app.
It should be noted that compile to native frameworks primarily compile the UI components to native UI components. They do not actually “convert” the codebase into the native platform codebase i.e. the Javascript code for business logic etc. is not converted into iOS Objective C or Swift code, or to Java or Kotlin code. It is only the UI components of the Javascript code that are actually converted to the equivalent native UI components in the target platform.
The options available when using the “Compile to Native” approach are,
Which “compile to native” platform to choose?
Note that no one compile to native cross-platform framework is better than the others. The choice of the cross-platform framework primarily depends on what your existing developer team is more familiar with.
If you have a development team or technology stack that is in Dot Net, you may want to choose Xamarin to leverage the knowledge and expertise of your C# developers in developing mobile apps.
On the other hand if your development team comprises of front end engineers that have developed web application in React or Angular, you may want to consider using React Native or NativeScript with Angular.
Native using Webview
Another approach that cross-platform framework take is that of wrapping the app code within a webview and displaying the app as a webview “native” app i.e. without the browser bar.
The following frameworks take this approach,
In contrast to the “compile to native” approach, the “webview” approach does not actually convert the UI code into native platform UI code. Instead it renders the app within a browser and the UI code mimics the UI look and feel of the underlying platform using fancy CSS, Sass etc. i.e. a button UI widget in this approach is not compiled to an actual native UI button of the target device. Instead the app is rendered in a browser based container (without displaying the browser address bar etc.). The app detects what device the app is running on (i.e. iOS or Android) and then using CSS/Sass, renders the UI within the browser based container to mimic the look and feel of a “native” button on that device.
Also in contrast to the “compile to native” frameworks, the “webview” frameworks have access to far less device hardware features. Typically the “webview” approach uses the Cordova bridge to access the underlying device features eg. camera, gps, accelerometer etc.
PWA
At the other end of the cross-platform mobile app development spectrum are Progressive Web Apps (PWA), that are apps that run fully within a browser and do not need to be distributed via the App Store.
PWAs are browser based code written in html, css and javascript that provide a “native” app like experience within a browser.
PWAs leverage the capabilities of modern browsers to access device features eg. GPS location, camera etc. via the browser based APIs. PWAs may be developed using a variety of Javascript libraries or frameworks including PolymerJS, Angular, React, Vue etc.
PWAs are basically a client side javascript code that runs within a browser. Thus they are highly cross-platform portable and the single java codebase can be run on any device that has a web browser that supports them. The single javascript codebase can be loaded within a browser on any device eg. iOS, Android etc. and provide the user with a “native” app-like experience within the browser window.
It should be noted that PWAs are highly dependent on the browser in which they are loaded and some features may not be supported in all browsers. Also, since they access the device hardware features via browser based API, they are highly limited in the device hardware they can access.
A Progressive Web App(PWA) is not a Single Page App (SPA)
It is important to understand that Progressive Web Apps (PWA) are not the same as SPA (Single Page Application). A SPA app can be a PWA, but a PWA need not be a SPA.
Single-Page Applications (SPAs) are web apps that load a single HTML page and then dynamically update that page as the user interacts with the app.
Progressive Web Apps on the other hand are web apps that satisfy the following three primary criteria.
- Served using HTTPS (Secure)
- Register a Service Worker to provide Offline Support
- Have a Valid Web Manifest File with a Minimal Set of Icons
Summary
The following table summarizes the different native and cross-platform options available for app development, along with the associated features and programming languages.
Found this post useful? Hit the 👏 button below to show how much you liked it :)
Follow me on Medium for the latest updates and posts!
