Open menu with table of contents Cross-Platform Development
Logo of Stuttgart Media University for light theme Logo of Stuttgart Media University for dark theme
Mobile Application Development 2

Cross-Platform Development

Stuttgart Media University

1 Agenda

  • Cross-Platform Development Goals
  • Possible technologies to target multiple platforms with one code base

2 Why Cross-Platform?

  • Problem: too many platforms and devices
    • As of today these are ... (can you name some?)
    • Platform diversity creates great effort in
      • development, testing, debugging, deployment, maintenance effort
  • Goal: reduce development effort by having one common source ("write once run everywhere")
    • (there still may be a big effort left in testing, debugging, deployment, maintenance)

center 70%

Source IDC

Puhhh!! We're lucky only Android and iOS left?

But: 2 > 1 and things can change quickly

3 Types of Cross-Platform-Development

  • Software written for an interpreter running on the target platforms
    • Development using interpreted language
    • Can you think of examples?...
  • Pre-compiled portable bytecode
    • runs in a "runtime"
    • Can you think of examples? ...
  • Individual built native software for each target platform
    • Code is transpiled and then compiled into a binary form
  • Combinations and variations of all of these

4 Types of Cross-Platform-Development

  • Software written for an interpreter running on the target platforms + Development using interpreted language (e.g. JavaScript, ActionScript, Python, etc.) + e.g. a Python interpreter, JavaScript interpreter (aka engine) (a web-browser includes a JS engine), etc.
  • Pre-compiled portable bytecode
    • runs in a "runtime"
    • e.g. Adobe RT, Java RT, Dalvic RT etc.
  • Individual built native software for each target platform
    • Code is transpiled and then compiled into a binary form
      • What is transpiling? ....
  • Combinations and variations of all of these

5 Transpiler

  • aka Transcompiler aka Source-to-source compiler
  • Takes a high level programming language as input and outputs another high level language
  • Referred to as Program Transformation
  • Generated code is then usually cross-compiled to a native platform binary using a standard compiler (e.g. GCC)

center

6 Program Transformation

  • Act of changing one program into another using a certain algorithm
  • Two main scenarios:
    • Translation (e.g. analysis, decompilation, code generation)
    • Rephrasing (e.g. optimisation, obfuscation)

center

source: program-transformation.org

7 Transpiler == Cross-Compiler?

8 Transpiler ≠ Cross-Compiler!

  • Cross-Compiler ...
  • ... is capable of creating executable code for a platform other than the one which the compiler runs on
  • ... used mainly to compile for a platform that does not provide a compilation tool-chain or operating system (e.g. micro-controllers, embedded-systems such as mobile devices)
  • ... separates the build from the target environment
  • ... generates binary executables for the target platform and no source code (not a source-to-source compiler)

9 Transpiler Tools

10 XMLVM vs. J2OBJC

XMLVM J2OBJC
Creates Objective-C from Java code Creates Objective-C from Java code
supports also other languages and GUI-APIs only focuses on business logic an no GUI code, does not support other language
only has a small community and is relatively old is supported by Google and regularly updated

Drawbacks:

  • Both tools can be used to generate code for iOS from Java code but not vice-versa
  • Debugging for iOS can become problematic, as code is generated and can not be edited directly

11 Hybrid Apps

  • A hybrid app is native application container for different platforms (e.g. iOS / Android) providing a web view as main GUI component
  • The app itself is based on web technologies (HTML, JavaScript, CSS) and is interpreted by the corresponding browser layout engine and JavaScript engine

center

12 Hybrid Apps

  • The native container can provide an additional JavaScript API to access device specific native features, e.g. Contacts database, accelerometer, camera, compass, device information, geolocation,...

    center

13 Example: Cordova

  • Mobile application framework developed by Nitobi Software under the name PhoneGap
  • Nitobi has been acquired by Adobe (Oct. 2011)
  • Open-source project, modified BSD or MIT license
  • The PhoneGap code was contributed to the Apache Software Foundation (ASF) under the name Apache Callback in October 2011, now called Apache Cordova
  • Applications are developed using HTML, JavaScript and CSS
  • Supported platforms:
    • Amazon Fire OS, Android, BlackBerry 10, Firefox OS, iOS, Ubuntu, Windows Phone 8, Windows, Tizen

14 Cordova Development

  • Provides development templates for the different platforms
  • Each template contains a www folder including the index.html as entry point to the application

15 Example Project Creation

$ sudo npm install -g cordova

$ cordova create MyApp de.hdm.myapp MyApp

$ cd MyAPP
$ cordova platform add android

$ cordova platform add ios

$ cordova run android
$ cordova run ios

16 Cordova Development

  • As an application is nothing more than a web site, it is possible to integrate mobile web JavaScript frameworks such as
    • JQuery Mobile, JQTouch, Sencha Touch, The-M-Project etc.
  • This is done by simply adding the corresponding framework files to the www folder
  • Using such frameworks simplifies the development of a hybrid mobile application that looks like a native one

17 Cordova Technical Background - Connect JS with native code

Implements UIWebViewDelegate Protocol:

- (BOOL)webView:(UIWebView *)theWebView shouldStartLoadWithRequest:
(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType
{
NSURL *url = [request URL];
...
if ([[url scheme] isEqualToString:@"gap"]) {/
//... Tell the JS code that we've gotten this command, and we're ready for another
        [theWebView stringByEvaluatingJavaScriptFromString:@"PhoneGap.queue.ready = true;"]; //...}
    /*If a URL is being loaded that's a file/http/https URL, just load it internally*/
    else if ([url isFileURL] || [[url scheme] isEqualToString:@"http"] ||
             [[url scheme] isEqualToString:@"https"])
    {
        return YES;
    }
   ...
}

18 Cordova Technical Background - Return from native to JS

  • In iOS the UIWebView class provides a method to evaluate JavaScript in the WebView's context
  • Simply pass the JavaScript code to be executed as NSString to the following method
- (NSString *)stringByEvaluatingJavaScriptFromString:(NSString *)script
  • On Android this works equivalent, for example using the loadURL(...) method of the WebView
webview.loadUrl(”javascript:(function(){”+ 2 ”alert(’Call−Back’);})()”);

19 Cordova Pro & Contra

Pro Contra
Easy development with web technologies Debugging is more difficult
Support for many contemporary devices Performance drawbacks in comparison to real native applications
Provides development templates for most IDEs WebViews do not always support same features as platform browsers
OpenSource project with active community and commercial company support For commercial support PhoneGap can be used
Good for porting existing web applications to „native“ mobile app and for rapid prototyping Still many platform specific changes necessary

20 Appcelerator Titanium Mobile

  • Platform for developing cross-platform desktop and mobile applications using JavaScript
  • Titanium Mobile supports:
    • iOS
    • Android
    • Mobile Web
    • (Windows Phone)
  • Open Source, available under the Apache Public Licence v2.0
  • Source code available on github (https://github.com/appcelerator/titanium_mobile)

21 Appcelerator Titanium Mobile Architecture

center

22 Titanium Mobile Pro & Contra

Pro Contra
Useful for rapid prototyping using JavaScript Only JavaScript language support for mobile apps
One simple SDK for developing desktop and mobile apps, supporting many device features Hard to debug
OpenSource project with active community and commercial company support -
Creates native hybrid apps Not always device independent API

23 Other hybrid app frameworks

  • Rhomobile Rhodes: https://tau-platform.com/en/products/rhomobile/
    • Type: Hybrid framework
    • Development: Ruby, JavaScript
    • Open-source: MIT license, Commercial support available
    • Platforms: iOS, Android, Windows Mobile, Windows Phone, Windows 10 (previously also RIM, Symbian)
  • Ionic: https://ionicframework.com
    • Type: Hybrid framework, progressive web app. Based on Cordova
    • Development: JavaScript, TypeScript, HTML5
    • Open-source: MIT license, Some commercial services
    • Platforms: iOS 8+, Windows 10 Universal App, Android 4.4+
    • Capacitor: Build for iOS, Android and Web using PWAs

24 Runtime Library Based Cross-Platform App Frameworks

24.1 Unity Game Engine

  • Website: https://unity3d.com
  • Type: Native Intermediate Library Runtime
  • Development: C#, JavaScript
  • Commercial. Free personal edition, Professional edition €115 / month / seat
  • Platforms: iOS, Android, Desktop (Windows, macOS, Linux), Consoles (XBox One / X|S, PS4 / PS5, Nintendo Switch), Extended Reality (Microsoft HoloLens, Oculus, etc.) and Web (WebGL)

24.2 Xamarin (Microsoft)

  • Website: https://xamarin.com
  • Type: Native Intermediate Library Runtime, based on the Mono project
  • Acquired by Microsoft in March 2016
  • Development: C#
  • Free community editions. Prices for enterprises not publicly available
  • Platforms: iOS, Android, Windows and macOS

24.3 React Native (Facebook)

24.4 Flutter (Google)

  • Website: https://flutter.dev/
  • Type: Native Intermediate Library Runtime
  • Development: Dart (development), Skia (rendering UI Widgets)
  • Open Source, BSD, Apache 2.0, MIT License
  • Platform: iOS, Android

24.5 Adobe Flash Builder (Discontinued)

  • Type: Native Intermediate Library Runtime
  • Development: Flex, ActionScript
  • Commercial. Free for students and unemployed
  • Platforms: Android, iOS (previously BlackBerry, Tablet OS)

24.6 Marmalade SDK (Discontinued)

  • Type: Native Intermediate Library Runtime
  • Development: C++, Lua, HTML5
  • Commercial. Costs $600
  • Platforms: iOS, Android, Symbian, bada, webOS, Windows Mobile 6.x

25 Other solutions

25.1 libGDX

  • Website: https://libgdx.com
  • Type: Java Virtual Machine / web technologies / native compilation on iOS using RoboVM
  • Supporting WebGL / JavaScript via GWT
  • Development: Java
  • License: Free and OpenSource (Apache 2.0)
  • Platforms: Android, iOS, Desktop (Windows, macOS, Linux), Browser (WebGL, JavaScript)

25.2 MobiDevelop's RoboVM Fork

25.3 RemoteUI

  • Website: https://www.nevernull.io/remoteui/
  • Type: Native thin-client app on each platform
  • Development: Java, XML
  • License: still commercial, but maybe soon OpenSource
  • Platforms: Android, iOS, Desktop (Windows, macOS, Linux)

25.4 MobileUI

  • Website: https://docs.mobileui.dev/
  • Type: Native app on each platform
  • Development: Java, XML
  • License: still commercial, but maybe soon OpenSource
  • Platforms: Android, iOS

25.5 Kotlin Multiplatform

26 Conclusion

  • Currently there are many existing multi-platform development tools and frameworks available
  • The decision which one to use depends on the
    • kind of application: performance requirements, porting an existing web app vs. creating a completely new app
    • number of devices that should be supported: e.g. PhoneGap supports a wider range of devices than Titanium Mobile
  • Open Source projects like Titanium Mobile, libGDX or Cordova are promising and free, but they all have their pros and cons concerning development and testing, performance or hardware support

27 Recap Questions

  • What is the difference between a Cross-Compiler and a Transcompiler?
  • What is a hybrid app?
  • What are the differences in the PhoneGap and the Titanium architecture and what are their consequences?
  • Give an example for a runtime based cross-platform framework