Cross Platform Mobile Development Alternatives

Mobile devices' computing power is increasing significantly, making cross-platform mobile development an even worthy alternative. We have examined three different alternatives for cross-platform mobile development.

Developing a mobile application for each platform (iOS, Android, Windows) is a big deal for most developers and companies since it requires different developer skills and more resources. Hybrid mobile application platforms (such as Apache Cordova, Sencha, Ionic etc.) have existed for a long time to address this issue, but attempts end up with disappointment due to poor performance and user experiences. Since these platforms use a WebView internally and can not provide a native feeling, users are generally not happy to use these applications.

Different from the hybrid platforms, cross-platform solutions allow native application development. Unlike hybrid platforms, javascript based solutions use JavaScript engines (JavaScript Core, V8) and create native UI components with native calls and finally we can have native mobile applications. It is often very difficult and requires developer expertise to understand whether this application is pure native or cross platform developed.

In the following table, some general properties of Native, Hybrid, Web and Cross Platform alternatives are listed comparatively. (High is better.)

Since cross-platform mobile development is a serious alternative to native application development, we have evaluated most-used and popular cross-platform alternatives from an enterprise perspective:

• NativeScript by Telerik
• ReactNative by Facebook
• Xamarin.Forms by Microsoft

During this research, we have decided to implement a sample application for each of these technologies: A hypothetical mobile application for a hypothetical bank. The demo application has three basic functionalities: login page, account list, and transaction list.

The application starts with  a login screen, then  lists the accounts of customer upon login as the main page and finally lists the account transactions of the customer for the selected account.

We have implemented this small demo app with NativeScript, ReactNative and Xamarin.Forms and evaluated according to the following criteria:

Learning Curve, Mac Requirement, Zero Day Support, Development Environment (IDE), Rich Component Library, Debugging, Multiple Platform Support, Min Version Support, Package Size, Automated Test and Dev Ops, Performance, Enterprise Support, Maturity and Documentation.

NativeScript

NativeScript is an open source framework for building native iOS, Android and Windows (preview) mobile applications by using JavaScript, CSS (restricted) and html/xml, developed by Telerik. Its first public beta released in March 2015 and  it was released in May 2015 with v1.0.

Telerik announced NativeScript v2.4 on Nov. 17th, 2016.

One of the biggest concerns of the programmers is that the readability of the code written in JavaScript decreases over time.  At this point, "Modularity", "Typescript" and "Angular2" become popular for developers. Nativescript developers can optionally use Typescript and Angular2 optional. It sounds good, doesn’t it? 

Regarding to NativeScript architecture, javascript code runs as a native code in javascript engines, they don't compile to any native binary during build time. Javascript Core and V8 engines are the key enablers for this architecture.

Using UI thread allows NativeScript to access native APIs without an intervening wrapper.

Pros

• Learning Curve: Learning curve is low for web developers who know Javascript, Angular2, html, css.
•  Mac Requirement: If you're using AppBuilder, you don't need a Mac at development time.
• Zero Day Support: The next day after iOS 10 released, we wanted to check NativeScript's Zero Day Support. We have installed XCode 8 to our Mac and when we have tried our current NativeScript project, we have had trouble and application has crashed at runtime. Crash problem solved when we increased the version of NativeScript to 2.3.0. In summary, when we updated the version, core components were successful for Zero Day Support.
• Development Environment (IDE): There is no special IDE for NativeScript. You can use any text editor. We developed our own demo with Visual Studio Code (recommended) on Mac. You can use nativescript’s add-ons on Visual Studio Code. If you are working with Angular2, you can use Angular2’s add-ons too. These add-ons shorten your development time significantly. You can make debug on Visual Studio code. For .Net Developers, you can find Telerik’s extensions for Visual Studio.

•  Rich Component Library: Open source components in github and packages on npm are also available for downloading packages. You can use following Telerik component libraries too.

  • Telerik UI for NativeScript (free)
  • Telerik UI for NativeScript Pro (paid)
• Debugging: CLI or Visual Studio Code could use for debugging. Both of them support debugging on device and emulator.
• Multiple Platform Support: iOS and Android are supported.
• Automated Test and Dev Ops: 3rd party tools could be used for automation test. Samples: Appium, Telerik Test Studio
• Performance: As we expected, it performs fast on runtime because of working on the UI thread and no wrapper around. For example, we have seen that rendering ListView with 1000 lines is fast enough.
• Documentation: Documentation is sufficient if NativeScript core components are used. It can be a little difficult to find a source for use with Angular2. We are expecting that documentation support will increase with the increased use of Angular2.
• Enterprise Support: Supporting by Telerik.

Cons

•   Mac requirement: If you do not use Telerik’s AppBuilder, you need a mac for iOS. For example, When you work on windows platform and you do not use Telerik’s AppBuilder, you get platform error at build time.
• Zero Day Support: We did not have a problem rendering nativescript core components but the screen using the SideDrawer component installed with "nativeScript-telerik- ui" did not work. We have encountered this error; “UIScreen.mainScreen is not a function because of iOS 10” Because of this error, we have downgraded Xcode version  to our previous version.

• Rich Component Library: No problem if you use simple components like TextArea, Label in your Application. But if you want to use a more complex component, you need to get 3rd party support. For example, we want to use map in our application. We had 3 different map options but none of them has not a native map support according to installed platform. These modules;

  • Nativescript-map: A Nativescript module for using native map APIs. This module is currently limited. It only supports latitude and longitude attributes and only works on iOS.
  • Nativescript-google- maps-sdk: Supports both of iOS and Android.
  • MapBox: Supports both of iOS and Android. 

We chose to use nativescript-google- maps-sdk. Map worked on android emulator and device. But the code running on the iOS emulator did not run on the device. 

• Min Version Support: iOS can be acceptable, but android 4.2 is not at an acceptable level for applications with diverse user volumes, such as banking applications.

  • iOS; iOS 7 or greater and xcode version greater than 6
  • Android; API Level 17 (Jelly Bean – 4.2)

• Package Size: The package size of our application is above our expectation. Below, you can see the results of a relatively small application.

  • APK : 21.8 MB (Android & Bundle with WebPack)
  • APK : 38 MB (Android & Without bundle)
  • IPA : 32.9 MB (iOS & Bundle with WebPack)
  • IPA : 67 MB (iOS & Without bundle)
• Performance: The startup speed of the application is slow. We have experienced that our demo Application was opening about 10 seconds on iOS device. A simple “Hello World” application start time takes about 4-6 seconds on ios device too. We have observed the same situation in Android too.
• Maturity: The Latest Release Version is 2.3.0. The use of NativeScript is growing and there are lots of showcases but very large projects have not been developed yet.

React Native

React Native is an open source JavaScript framework for building native apps with ReactJS and allows mobile developers to share the same code on iOS and Android. ReactNative started as a hackathon project in the summer of 2013.  Facebook introduced it at F8 developer conference and opened the code to community. Facebook Ads Manager team build iOS and Android Ads Manager apps with React Native and realized that about 85 percent of code was shared between these platforms. 

React Native uses React’s diff algorithm, Virtual DOM, for updating UI to gain efficient performance and support using native code when you need. Even if you change an attribute of a component, it isn't marked as dirty. Whenever you call setState on a component, it is marked as dirty. At the end of event loop, only all dirty components are  re-rendered.

React Native also supports using native code (such as Objective-C, Swift or Java) when you need and where you need.

Pros

• Performance:  We can scroll up and down list with 1000 rows smoothly  thanks to the efficient performance with diff algorithm. Besides, if you detect any performance bottleneck on bridge between native and ui threads, you can write this component with native code.
• Learning Curve: Low. If you are an experienced JavaScript developer, you adapt React Native quickly.
• Enterprise Support: Dedicated product team answer questions and fix bugs.
• Rich Components Library: There are lots of components in framework and written by community.
• Package Size: Small. Our demo application size is 8.47 MB for Android, 3.4 MB for iOS
• Development Environment: Developer tools exist like systrace, performans monitor, hot reloading.
• Automated Test and Dev Ops: Jest can be used to Js-only testing and Buck build tools can be used for unit and integration testing.
• Multiple platform support: Supports iOS and Android platforms

Cons

• Minimum Supported Version: >= Android 4.1(API 16) and >= iOS 8.0
• Development Environment: You can write JavaScript with any IDE and can open iOS project with XCode to build but there is no project to open with Android Studio so you can build Android project with only cli commands.
• Maturity: Relatively young and lastest version is 0.37
• Enterprise Support: No SLA to fix the issues.
• Documentation: Team continues to evolve the documentation.
• Mac Requirement: Required. Remoted iOS Simulator exists but only one person can compile project at the same time.
• Automated Test and Dev Ops: Don’t have perfect test coverage for complex end-to- end test scenario.
• Zero Day Support: No commitment.

Xamarin.Forms

Xamarin.Forms is a cross-platform development framework that allows writing  mobile applications in C# or F# and runs on any mobile platform. It was founded in 2011 by Miguel de Icaza as Xamarin.Native (Xamarin.Android, Xamarin.iOS).  In 2014, Xamarin.Forms was introduced. Xamarin Company was acquired by Microsoft in early 2016 and Xamarin project has been published as open-source.

With Xamarin.Forms, you can share UI for all mobile platforms (iOS, Android, UWP) using XAML-based pages.

Xamarin.Forms allows using common UI control libraries that are mapped to native UI controls of iOS, Android, UWP. You can write one business code library and can share with iOS, Android, UWP Xamarin applications.

Xamarin Android Runtime

Xamarin on Android takes the advantages of Just In Time (JIT) compilation on the Android devices and applications  run natively. 

Access to device specific features is provided by .net APIs of Mono CLR. You cannot access to device-specific features directly because they are part of the Android SDK. Because of this reason, Mono CLR uses Android binding libraries to access.

Xamarin iOS Runtime

Xamarin on iOS does full Ahead Of Time (AOT) compilation to produce an ARM binary and runs natively on device.

Xamarin provides a large ecosystem of tools, other than Xamarin.Forms they also provide Xamarin.iOS and Xamarin.Android.

For the cross-platform mobile development with maximum code sharing, Xamarin.Forms is the best option.

Pros

• Learning Curve: The learning curve for C# developers is low. It's much lower for developers who have worked with Xaml, the WPF experience. A WPF developer can adapt to xamarin within a few hours. For Web Developer(C#) is medium. Visual Studio users do not have to learn a new IDE and they continue to benefit from the tools they offer.
• Zero day support: Xamarin is aiming for zero-day support for the new version of Android and iOS. Xamarin has released new stable version of supported the final Apple releases of iOS 10 and Xcode 8 on Apple's launch day (September 13,2016). And we could successfully compile our xamarin application with this release.
• Development Environment (IDE): Visual Studio and Xamarin Studio with many features for crossplatform applications. With Visual Studio and Xamarin Studio together with powerful tools, Xamarin makes life easier for developers and shortens development time. Xamarin developers get one step ahead as they enter the world of Mobile Development using the IDE they are accustomed to.
• Rich Components Library: Xamarin has own control libraries, a large open source community and component repos. Several component sets can be found in the GitHub.
  
  Xamarin, SyncFusion, Telerik, Steema, GrapeCity, DevExpress, Infragistics
• Debugging: The Xamarin application can be debugged on the simulator or on the physical device. Note: (new) On Windows, if you want to debug your application on iOS you must install Xamarin iOS simulator and have a mac available in network. In this way your application will be compiled on mac and displayed in the simulator on windows.
• Multiple platform support: Xamarin.Forms allows you to write the UI code that can be compiled for the Android, iOS, and UWP platforms.
• Min Version Support: iOS 6.1 or higher, Android 4.0.3 (API 15) or higher, Windows Phone 8.1
• Automated Test and Dev Ops: With Xamarin's automated test clouds and APIs you can simulate UI actions on real devices and analyze performance and memory issues. 
  
  Xamarin Test Cloud , Xamarin Mobile DevOps, HockeyApps (crash reporting,user metrics) Visual Studio Mobile Center - NEW (Includes all MS mobile lifecycle tools)
• Performance: The C # code you write with Xamarin.Forms is converted to the target platform (Android, iOS, WP) at compile time. During this conversion, your code is optimized by the Compiler, and because it removes some basic faults, it is often more efficient than code written in the native environment.
• Enterprise Support: Official Microsoft Support
• Documentation: Xamarin has a large which includes guides, workbooks, samples, forums , videos. Xamarin University also offers online courses are as extra.
• Maturity: The Xamarin platform was developed in 2011 using the  Mono-Project. The Mono-Project was created in 2004. Xamarin.Forms was released in 2014.  It has passed the lengthy process and it can be considered mature. 

Cons

• Mac requirement: To develop an application for iOS on Windows you must have a mac. You can use Xamarin Mac Agent on Visual Studio to compilation and debugging, but also you need a mac on remote.

•  Package Size: Xamarin has some runtime libraries in packages, so sizes are significantly bigger than native iOS and android.

  • APK 23,3 MB (Android)
  • APP 46,4 MB (iOS)
• Performance: Xamarin's performance is mostly good. But performance on Android devices varies for device specifications.
• Min Version Support: Doesn't support earlier versions than Android 4.0.3 (API 15)

Conclusion

We have evaluated the alternatives according to important criteria stated in the beginning of this article. ReactNative stands out with its high performance while NativeScript stands out with its modular structure and Angular/TypeScript support. On the other hand, Xamarin.Forms stands out with its maturity, rich platform support (including Windows Phone, Windows Desktop, Hololens etc.) and strong enterprise support by Microsoft.

We believe that all the alternatives will meet the requirements of the most average applications but if you plan to develop an advanced long-lived application, you should review the criteria and evaluations based on your priorities.