Cross Platform Apps (Mobile)

September 29, 2023
April 3, 2015

Cross-platform - Wikipedia, the free encyclopedia

It is difficult to develop and maintain apps which support multiple mobile platforms. Luckily there are abstraction layers which developers can write code on and deploy to multiple platforms.

     |================|================|
  web apps       hybrid apps      native apps

With "hybrid apps", we can use the abstraction layer for fast development and the native SDK for performance critical modules to get the best of both world.

The abstraction layer is usually HTML5 which is to be run on a browser. There will also be API's on the abstraction SDK to call native APIs.

Cross-Platform's Future is Native & Building a Case for Kotlin Multiplatform
The new Cross-Platform is to share business logic, compile to native code and binding to native UI widget (rather than using browser as runtime)

TODO: merge Cross-platform App Tools for Consumer and Enterprise Market.ppt here

Pros and Cons of the Top 5 Cross-Platform Tools - Developer Economics
Tools to Build your Mobile App | Developer Economics
Native vs HTML5 - You're Asking The Wrong Question
Hybrid vs. Native: Choosing a Mobile Strategy
android - Struggling between native and phonegap, simple app requirements - Stack Overflow
Web vs. native: let’s concede defeat - QuirksBlog
DHH 谈混合移动应用开发 | | 酷 壳 - CoolShell

Downloads Archive - VisionMobile
Free Reports | research2guidance

weblancaster/awesome-IoT-hybrid: The missing awesome list - collection of awesome IoT and Hybrid Apps frameworks, tools, resources, videos and shiny things.

In the Wild

How photo app Polarr topped the App Store the uncommon way - CNET
HTML5 is dead. Long live HTML5! - CNET
Your favourite app isn’t native also feature some UI frameworks

Comparison

Examining performance differences between Native, Flutter, and React Native mobile development.
Flutter and Kotlin Multiplatform – Aldy Chrissandy – Medium
Flutter and Kotlin Multiplatform relationship – Kt. Academy

Ionic vs. React Native: Performance Comparison - Ionic Blog

What are the main differences between ReactJS and React-Native? – Medium
What are the key difference between ReactNative and NativeScript? - Quora

React native vs Flutter 2020 comparison - Kriss
React Native vs Flutter - I built the same chat app with both - YouTube
React Native vs Flutter vs Native - Let's Talk Engines - YouTube 2022

40 | React Native、Flutter 等，这些跨端方案怎么选？

PhoneGap/Cordova

Cordova is the open source version of PhoneGap.

It basically

PhoneGap API Documentation
apache/cordova-cli

Phonegap/Cordova Workshop
JS.LA - Native Mobile Apps in JS - Just Add Cordova!

Phonegap/Cordova vs Native Application
Phonegap vs Native - A 12 Month Review » Chel Ramsey Productions 2013
Cordova : Devgirl's Weblog
2 Quick Tips When Adding PhoneGap/Cordova Plugins : Devgirl's Weblog
Learning Cordova while rewriting an app

Verified Plugins Marketplace | Cordova/PhoneGap Plugins
Cocoon.io

Adobe PhoneGap v Apache Cordova

PhoneGap was purchased by Adobe in 2011. Adobe donated PhoneGap to Apache Foundation and it was renamed to Cordova.
Adobe retained the trademark of PhoneGap and provide service around it.

The Last Word on Cordova and PhoneGap | The Official Ionic Blog
Cordova and PhoneGap Insights
Cordova/PhoneGap Version Confusion : Devgirl's Weblog
cordova-coho/versioning-and-release-strategy.md at master · apache/cordova-coho

Jittering

Some client UI framework (especially jq* derivatives) use JavaScript to drive the animations, which is known to cause jittering.
Mordern mobile webpage should use CSS3 animation or requestAnimationFrame to achieve smooth animation.

Mixing native components

Since WebView may be sluggish in certain interactive components, there is a move to use native components with the WebView.
But this means the developer have the write code for the native components on each supported platform

Mixing Cordova/PhoneGap Components with Native iOS – Part 1 : Devgirl's Weblog

Ionic Framework

obsolete

Build Amazing Native Apps and Progressive Web Apps with Ionic Framework and Angular
Free Mobile App Development: Getting Started with Ionic Apps

Ionic Framework includes

Ionic Native - Ionic Native

Manifold

Manifold JS

Converts your website to an "app", uses Cordova/Crosswalk as polyfill if needed.

Simplify Android Development Using manifoldJS With Crosswalk - Tuts+ Code Tutorial

Crosswalk

Embedding the latest Chromium WebView to your app instead of using the system's WebView.

Crosswalk - build world class hybrid apps
Crosswalk - Cordova

Ionic

Ionic 4

Introducing Ionic 4: Ionic for Everyone | The Ionic Blog
Announcing Ionic React | The Ionic Blog

Ionic 4 & Angular Tutorial For Beginners - Crash Course - YouTube
Ionic + React - Tutorial for Beginners 2020 - YouTube

Uses Stencil to compile to Web Components and supports multiple frameworks

Capacitor

By Ionic team, inspired by React Native.
Invoke native SDKs on iOS, Android, Electron, and the Web with one code base.

Capacitor: Cross-platform native runtime for web apps

Capacitor in 2019: Native Progressive Web Apps for All | The Ionic Blog

Fabric

Fabric - Twitter's Mobile Development Platform
Introducing Fabric | Twitter Blogs

Building First Class SDKs: A Fabric Case Study - YouTube
Building Fabric for Android Apps - YouTube

Electrode

Electrode | Universal React and Node.js Application Platform @WalmartLabs Powered
What is Electrode? | Electrode
Electrode GitHub Org

Flutter

flutter

Codename One

Flutter for Java, Swing API!
started as a Sun internal project

Codename One: Cross-Platform App Development with Java/Kotlin

Codename One with Steve Hannah - Software Engineering Daily

Kotlin Multiplatform

Multiplatform Projects - Kotlin Programming Language

Kotlin Multiplatform for iOS Developers
Multiplatform Project: iOS and Android - Kotlin Programming Language

React Native

react-native

Jasonette

Jasonette - Native App over HTTP
Jasonette

How to Turn Your Website into a Mobile App with 7 Lines of JSON

Vue.js

WEEX
Native Mobile Apps with Weex and VueJS 2.0 – Hacker Noon

Vue Native
Introducing Vue Native – GeekyAnts Blog

Native apps with Vue.js: Weex or NativeScript? — chapter I
Native apps with Vue.js: Weex or NativeScript? — chapter II

NativeScript

Cross-Platform Native Development with Javascript
Docs source
Docs: Android
Docs: iOS

Would Airbnb Have Fared Better With NativeScript Instead of React Native? NativeScript take to solve Airbnb's problem with React Native
NativeScript 2.0 - the best way to build cross-platform native mobile apps 2016-05

Technical Overview - NativeScript Docs
An Introduction to NativeScript 2016-07
Creating Mobile Native Apps in JavaScript with NativeScript 2015-03

Haxe

Haxe - The Cross-platform Toolkit

Haxe is an open source toolkit based on a modern, high level, strictly typed programming language, a cross-compiler, a complete cross-platform standard library and ways to access each platform's native capabilities.

The language itself is similar to JavaScript. The .hx can be compiled to multiple targets.
Standard libraries are separated to three categories: standard, system and target specific. A package manager Haxelib is available.
Haxe Manual
Haxe API

HaxeCheckstyle/haxe-checkstyle: Haxe Checkstyle

haxe: compile time macros
Haxe from 1000ft
Haxe Entry Point
Learn Haxe

OpenFL

OpenFL - Creative expression for desktop, mobile, web and console platforms Flash API on modern web

TotalCross

TotalCross | Open Source GUI Creator For Embedded, Mobile
TotalCross Overview - TotalCross Platform also for embedded devices

TotalCross/KnowCodeXML: Library to allow developers to run Android XML UI + TotalCross on Linux ARM, iOS, Android and more... use Android XML for layout,

A new way to build cross-platform UIs for Linux ARM devices | Opensource.com

Qt

qt

Create high performance embedded systems | Qt
Qt - Qt for Mobile App Development

QT Supported Platforms
Qt for Device Creation
Target Devices

Part Four of Seif Project

seif

Cross Compiling

Boot to Qt Software Stack

Cross-Compiling Qt for Embedded Linux Applications

.NET

cross-platform-apps-desktop#.NET

Djinni

dropbox/djinni: A tool for generating cross-language type declarations and interface bindings. expose C library to Android and iOS

Appcelerator

Appcelerator expose unified (across devices) JavaScript API, coupled with native-platform-specific features.
Not using WebView to render, UI codes compiles to native components.
Supports premium (paid) and free addons.

Products - Appcelerator Inc
Appcelerator Documentation

Getting To Know Alloy (Part One)
Getting To Know Alloy (Part Two)

Node.js

JXcore · a Node.JS distribution with additional features
jxcore·io

InstantWebP2P/node-android: Run Node.js on Android by rewrite Node.js in Java
paddybyers/anode no update since 2014

Building a Node.js application on Android

Android JS

Android JS by GitHub
How To Build Android Apps With Node JS Using Android JS

Go

gomobile - GoDoc
Mobile · golang/go Wiki

Rust

Building an iOS App in Rust, Part 1: Getting Started with Rust | Big Nerd Ranch
Building an iOS App in Rust, Part 2: Passing Primitive Data Between Rust and iOS | Big Nerd Ranch
Building an iOS App in Rust, Part 3: Passing Owned Objects between Rust and iOS | Big Nerd Ranch
Building an iOS App in Rust, Part 4: A Basic View Model in Rust | Big Nerd Ranch

Honorable Mentions

Gideros Mobile develop with Lua
MoSync
RhoMobile Suite
HockeyApp - The Platform for Your Apps
EZoApp - Best tool for the rapid development of mobile apps
Cross-Platform Mobile App Development for iOS, Android - Corona Labs

Testing

Appium: Mobile App Automation Made Awesome.

Appium is an open source test automation framework for use with native, hybrid and mobile web apps.
It drives iOS and Android apps using the WebDriver protocol.

wix/Detox: Gray box end-to-end testing and automation framework for mobile apps