Cross-Platform/Hybrid Application Solutions

Cross-Platform/Hybrid app development allows developers to build Android, IOS and Windows mobile applications using one shared codebase. No doubt, this will help you save time, money and effort while building applications. Relatively, shared codebase will decrease the maintanence costs.

There are two development approaches;

Hybrid Approach

This is probably the most popular and the easiest way of building mobile applications as it leverages web technologies. With enough HTML, CSS and JavaScript knowledge, you can easily develop and deploy mobile applications for Android, IOS and Windows out of one codebase.

The most popular technology for hybrid application development is the Apache Cordova (PhoneGap). Web applications run within the webview of the mobile application and use Cordova API bindings to use device’s native capabilites such as camera, sensors, etc.

The main advantage of this approach is the low learning curve and being able to develop one codebase with the choice of popular web frameworks/libraries.

Cross-Platform approaches

This approach provides the native experience as it uses native libraries and views. The main goal here is to abstract the business logic while supporting the differences in UI rendering between each platform.

Three main competitors in this approach are Nativescript from Telerik, React Native from Facebook and Xamarin from Microsoft. Each use different languages and frameworks to abstract the view and business logic, therefore choosing among them highly depends on your experiences and needs.

Breakdown of the approaches

Each cross-platform/hybrid application development technologies use different engines, languages and tools to fullfill their goal;

Language

It is usually comes down to utilizing the abilities and experiences of the development team. Hence, language is an important decision factor while selecting the most suitable framework/solution for your application development. Here is the list of languages used by the solutions;

• Cordova supports web technologies. Styling of components/views are done by implementing HTML, CSS and JavaScript. There are UI frameworks optimized for Cordova such as Ionic and Onsen UI.
• Nativescript supports AngularJS framework, TypeScript or JavaScript for building applications.
• React Native lets you build mobile apps using React JavaScript library.
• Xamarin uses C# for building native applications.

Engine

• Cordova uses embedded WebView to display HTML UI and run Javascript in mobile applications.
• Nativescript and React Native provides their specific view (UI) components and converts them to native components on run time. They also include an embedded JavaScript engine (V8 for Android and JavaScript Core for iOS) to run Javascript.
• Xamarin compiles C# code ahead-of-time to native languages for each platform. For IOS, C# compiles to ARM assembly language. For Android, it compiles to IL and runs side-by-side with Android runtime. Xamarin uses JNI to interact with native types. For Windows, it compiles to IL but executed by the built-in runtime.

Native Modules and Plugins

• Cordova uses native device capabilities through Apache Cordova plugins. The plugins are add-on to the native applications built using native device codes such as Java, Objective-C or Swift. Hence, building custom Cordova plugins requires native code knowledge.
• React Native plugins requires native knowledge as RCTBridgeModule (IOS) or ReactContextBaseJavaModule (Android) protocols should be implemented using Objective-C (IOS) or Java (Android)
• Nativescript wraps all native device APIs with JavaScript, so it allows you to access any device component or API directly with JavaScript.
• Xamarin uses the power of portable class libraries (PCL) and NuGet for plugins. It is only required to create PCL Abstractions for Android, IOS and Windows.

Web Abstraction

These frameworks/technologies are designed for mobile application development but with some extra abstraction, codebases may be used for web applications also.

• As Cordova already using web technologies, codebase can be shared between web and mobile applications. However, it is better to keep in mind that Cordova UI frameworks mentioned above are optimised for native webviews, they may not support various browsers.
• For React Native and Nativescript; same codebase can be used by abstracting views (templates); one with HTML elements for Web page, one with NativeScript or React Native component(views) for Android and IOS.

Some logic abstraction may also be needed to remove native platform plugin references (e.g., Camera).

Existing App Integration

Maintaining existing active and legacy native application projects for many years may require undesired time and effort. Cross-platform/Hybrid application solutions are not only beneficial while building a new mobile application from stracth, they also may be used to integrate and enhance existing applications.

• In React Native, you may modify the existing native application to integrate React Native by creating RTCRootView or ReactRootView for IOS and Android. This way you will be able to integrate React Native components written in JavaScript to native application.
• As Cordova applications implemented as web applications that run in WebViews, integration of native applications and Cordova applications can be done by creating WebView components. WebView components can be used alongside the native components in an application.

Note: These integrations requires some native code knowledge as integration is done in native level.

Performance

Another crucial criteria while choosing cross-platform/hybrid solution is performance of the solutions. Users will always expect native-like experiences from your applications and unfortunatelly every layer of abstraction between pure native application and hybrid solution adds its own cost. While there are bias against cross-platform/hybrid solutions, researches show that these solutions performs better than thougth.

In a featured research published in the Telerik Developer Network, a functionality implemented with Nativescript shows about 10% performance penalty versus purely implemented native equivalent because of the JavaScript interpretation and data marshaling. There is no performance loss derived from the view implementation as UI components are converted to native components.

Being able to use native components instead of WebView based components allows you to achieve 60 FPS, which is the main reason native and croos-platform applications (NativeScript, React Native, Xamarin) feels more smooth and slick than the hybrid applications.

In general, native applications are closer to the device’s processor, meaning that, on average, native code will perform better than equivalent code written with a hybrid framework.

There is a good comparision of Cross-Platform/Hybrid solutions published by Tim Mench. You may also use the table from that article to choose the best solution that matches your needs.

Image taken from quora.com

Conclusion

Cross-Platform/Hybrid application development has come a long way and still getting better as new tools and frameworks being released each day. You may check Google Trends to give you an idea about the increasing popularity of Cross-Platform solutions.

Choosing the suitable solution from Cross-Platfrom/Hybrid alternatives is mostly depends on your needs and experiences. After all, main reason for considering a hybrid solution is to avoid learning different languages for native applications and being able to target multiple platforms from one shared codebase.

As in any project, building a performant mobile application requires planning and knowledge of the drawbacks, therefore leveraging your existing experiences is very important. I hope that solutions described here will help you build powerful user experiences and bring quality applications to your customers.