Cross-Platform Mobile App Development

A lot of companies now switching more towards developing cross-platform mobile app development. There are many drivers for that. In this article we would like to list the pros and cons of cross-platform mobile app development frameworks.

What is Cross Platform Mobile App Development

Cross platform apps runs on multiple platforms e.g. Android, iOS with a single technology stack. You create mobile UIs, handle events, write business logic, present output etc using a single set of languages and tools.

Types of Cross Platform Mobile Apps

There are two main categories of cross platform apps: web based and translated native apps. Web based apps can be subcategorized into traditional and hybrid mobile apps.

Traditional Web based Mobile Apps

They are responsive web apps accessed by the mobile web browser

Pros:

  • They are convenient to create and maintain

Cons:

  • They are not available in any app store
  • They need a working Internet connection to function

Cross-platform Hybrid Mobile Apps

They use built-in browser component of the platform. To develop them, you use HTML, CSS and JavaScript. Then you load your web app in the built in browser, and then package your web app so it is available in an app store. Examples include: Ionic and Apache Cordova

Some benefits of using them:

  • Single codebase to maintain
  • Available at app stores to download

Translated Native Mobile Apps

They use a single codebase and the tool translates the code into native code for multiple platforms. Examples include React Native, Xamarin, Flutter, Titanium. 

Why Cross Platform Mobile App Development

You don’t need to know multiple programming languages, multiple platforms, IDEs and their tool ecosystems. Different codebases for each platform e.g. Android, iOS.  Android apps are written in Java or Katlin using Google’s Android Studio as a development tool.  OS apps are written in Objective-C or Swift using Apple’s Xcode IDE.

  • You have multiple versions of each code base 
  • You need to update the code when the platform version changes e.g. Android and iOS release a new major version

Cross-platform tools can enable you to write the code once and run on multiple platforms. Some benefits:

  • They should be easy to maintain as you modify a single set of assets and they are then propagated to  each platform that you support.
  • You and your team need to master a single technology stack and can maintain the apps across platforms. For example C sharp for Xamarin or HTML/CSS/Javascript for web based apps.
  • They save your development cost by reducing the amount of development needed for separate platforms.

When cross-platform app development isn’t suitable for you

There are cases when you need to stick with the native approach, separate codebase for each platform with different tech stacks. 

  • Your app is accessing low-level hardware e.g, Camera, GPS sensor, etc. In that case the native app generally outperforms the cross-platform app
  •  You app needs to be optimised for the speed. Hybrid or web based apps that use the browser component can only perform up to the rendering speed of your mobile browser. Cross platform apps are significantly larger than their native counterparts.
  • You need to access core OS libraries such as graphics system. In this case, native apps usually outperform cross-platform apps.
  • Your target audience is using just a specific platform e.g. Android or iOS. This can be an enterprise app where you only deploy to a single platform.

Cross-platform app development with Apache Cordova/PhoneGap

Features:
  • Open source, command line interface (CLI) based framework
  • Uses HTML5, CSS, JavaScript
  • Plugins are available to support platform devices
  • Enhances the webview component of the platform and outputs native apps 

Pros:

  • Multiple mobile platforms with a single codebase with known languages
  • If you have web development background, use to convert web app to mobile app
  • Large platforms of many devices
  • Extensive and robust plug-ins for many device capabilities
  • Legacy: Other frameworks built on top fo Cordova
  • Large development community: e.g. stack overflow
  • Documentations: snippet to sample apps

Cons:

  • Not an editor or UI
  • Not an IDE, so projects, SDK management
  • Not a programming languages

Cross platform app development with Ionic

Features:

  • Open source framework, built on top of Cordova
  • Supports HTML5, CSS, JavaScript, TypeScript and Angular JS, Saas
  • Provides a lot of starter templates, plug-ins, themes
  • Extensive UI component collection
  • Premium-level tools including: Drag-drop tool, remote app testing, cloud builds, live app updating etc.
  • Enhances the native webview component using pllgins

 

Pros

  • In addition to Cordova benefits e.g. single codebase for multiple platforms, it has starter templates, themes and plug-ins
  • Has Editor and IDE support
  • Extensive collection of pre-built components
  • Additionals companion apps available on Google Play and AppStore: Ionic DevApp, Ionic View, Ionic Creator
  •  Extended CLI supports for local browser testing, preview app (how it looks on Android/iOS), share app with testers, create resources like icons/splash screens
  • Ionic Pro level support: IDE called Creator, Package (to build), View App testing, Deploy to apps bypassing app-store updates

 

Cons

  • Capped Performance: running on browsers
  • Need Pro-level subscriptions
  • New platform features
  • Debugging painful

Cross platform app development with Ionic

Features:

  • Open source framework, built on top of Cordova
  • Supports HTML5, CSS, JavaScript, TypeScript and Angular JS, Saas
  • Provides a lot of starter templates, plug-ins, themes
  • Extensive UI component collection
  • Premium-level tools including: Drag-drop tool, remote app testing, cloud builds, live app updating etc.
  • Enhances the native webview component using pllgins

 

Pros

  • In addition to Cordova benefits e.g. single codebase for multiple platforms, it has starter templates, themes and plug-ins
  • Has Editor and IDE support
  • Extensive collection of pre-built components
  • Additionals companion apps available on Google Play and AppStore: Ionic DevApp, Ionic View, Ionic Creator
  •  Extended CLI supports for local browser testing, preview app (how it looks on Android/iOS), share app with testers, create resources like icons/splash screens
  • Ionic Pro level support: IDE called Creator, Package (to build), View App testing, Deploy to apps bypassing app-store updates

 

Cons

  • Capped Performance: running on browsers
  • Need Pro-level subscriptions
  • New platform features
  • Debugging painful
  • Deployment is not so straightforward
  • Feature support not guaranteed
  • Not backword-compatible
  • Not future proof
  • Moderate step learning curve of Angular, Type script
  • Charges premium for development tools

Cross platform app development with React Native

Features

  • Open Source based on FaceBook’s React JS library
  • Uses CLI tools and convert code to native apps
  • Uses JS, ReactJS, ES6, JSX, ECMAScript (superset of JS)
  • Uses React Native Components instead of HTML and convert platform specific code
  •  Business logic in JS/ECMAScript, views on JSX,
  • Output code can be extended in AndroidStudio or XCode

Pros

  • Speed of App: Faster as native code is used to run app
  • Native UI Components: Compiled to specific platforms
  • Support the newer JS standard ES6 out of the box
  • Device testing is made easier by Expo a free tool
  • Single codebase for both business logic and UI
  • Speed of development: focus on what the app does not how it does 
  • Hot reload: repackaging and updating the launched application while saving state: testing easily
  • Native code integration: Easily add Java or Objective C in your app
  • Large community of ReactJS

Cons

  • Lack of developer who has experience with ECMAScript, JSX
  • JSX works embedding markup within code leading a confusing codebase of logic and views mixed. Not having option to work views by designers and business logic code by developers  
  • React Native component syntax is different and depends on the Bridge available for the underlying platform (that converts your JS code to platform code)
  • Platform specifics bridge: code get diverged 
  •  Learning curve is steeper if you don’t know react
  • Current version is still in beta which is not future proof

Cross platform app development with Xamarin

Features

  • Open source by Microsoft: It uses a C# programming language throughout. Xamarin allows the developers to create native apps for iOS Android, Windows, Mac, and more
  • Cross-platform native apps
  • Visual Studio and .NET based

Pros

  • One stack (C#. .NET, Visual Studio) many platforms
  • HW support
  • Strongly supported open source
  • Strong community, Xamarin university
  • First-class Xaramin support
  • Integrated UI designs for Android and iOS
  • Xaramin Live Player
  • Large documentation

Cons

  • Programming language
  • Learning curve
  • Native Platform Knowledge
  • App Size
  • Delayed update support
  • iOS development requires a Mac or iPhone

Cross-Platform app development with Flutter

Flutter is Google’s beautiful platform that aims to develop for Android and iOS focusing more on developer productivity.

Features:

  • Free and open source
  • Easy to develop own widget driven 
  • Based on Dart programming language
  • Supports both Android and iOS
  • Support for Android Studio and Visual Studio Code
  • Lots of built-in packages
  • A very fast growing developer community

 

Pros:

  • Hot reload that saves a plenty of  developer time
  • Build once and run on both Android and iOS
  • Perfect for an MVP
  • Less code means less maintenance overhead
  • Performance is better than React-native as the code is compiled by ahead-of-time and just-in-time compiling
  • Supports Platform specific code
  • Has Google’s official support

 

Cons:

  • Mobile only and not versatile like JavaScript based frameworks
  • Limited device support e.g. only for Android and iOS phones are supported now
  • Limited support for industry specific tools like continuous integrations

Final Choice

This mainly depends mainly on your and your teams’ circumstances and use cases.

  • If you are a .NET shop you can go for Xamarin
  • If you prefer to reuse your web development skills you can stay with Ionic despite the various issues like performance
  • If you are a startup or developing a new app you can choose Flutter which is favoured by the developer community for its simplicity and speed of development

Need to discuss your project? 

At VURSOFT, we develop both native and cross-platform apps. In past we used React-Native but our team is now using Flutter for developing cross-platform apps.