Application Development for Mobile and Ubiquitous Computing. 10. Cross-Platform Development

(1)

Department of Computer Science Institute for System Architecture, Chair for Computer Networks

Application Development for Mobile

and Ubiquitous Computing

10. Cross-Platform Development

Dr. Ing. Thomas Springer

Technische Universität Dresden

Chair of Computer Networks

(2)

Lecture Structure

Adaptation and Context-awareness Mobile Internet Mobile Middleware Application Development Disconnected Operations Mobile Databases Location-based Services Communication Mechanisms Android iOS .Net Compact Framework/ Windows Phone 7 Java ME OSGi Cross-Platform Development

(3)



Strong fragmentation of

market for mobile device

platforms



Market changes quickly



High update rate

• Device features

• Platform APIs

Dr. Thomas Springer Application Development - 10. Cross-Platform Development 3

(4)

Why Cross-Platform Development?

Mobile Device

CLDC Configuration, KVM Midlet Suite Midlet Suite ...

MIDP Profile Optional Packets Mobile Device Dalvik VM + Core libraries Libraries App .apk App .apk ... Application Framework Mobile Device App .ipa App .ipa ... Media Custom Frameworks UIKit Foundation Core Services Cocoa Touch Mobile Device App .xap App .xap ... App Model Silverlight Kernel UI Model Cloud Integration XNA HTML/JavaScript Common Language Runtime

Frameworks

Java ME

Project

Android

Project

iOS

Project

Windows Phone

Project

(5)



High development effort

• Know-how for multiple platforms

• High update rates of technology

• Customers don‘t pay per platform but for project



Short time to market

• Fast support of platform changes/new platforms



High maintenance effort

• Manage multiple code bases

• Avoid inconsistencies



Mobility Support

(6)

Write once, run everywhere?

Mobile Device

MIDP Profile Optional Packets Mobile Device Dalvik VM + Core libraries Libraries App .apk App .apk ... Application Framework Mobile Device App .ipa App .ipa ... Media Custom Frameworks UIKit Foundation Core Services Cocoa Touch Mobile Device App .xap App .xap ... App Model Silverlight Kernel UI Model Cloud Integration XNA HTML/JavaScript Common Language Runtime

Frameworks

Cross-Platform

(7)

How can we achieve it?

Mobile Device

Hardware Operating System

MIDP Profile Optional Packets Mobile Device Dalvik VM + Core libraries Hardware Libraries App .apk App .apk ... Application Framework Linux Kernel Mobile Device Hardware App .ipa App .ipa ... Media Mach/BSD Kernel Custom Frameworks UIKit Foundation Core Services Cocoa Touch Mobile Device Hardware App .xap App .xap ... App Model Hardware Foundation Silverlight Kernel UI Model Cloud Integration XNA HTML/JavaScript Common Language Runtime

Frameworks

Cross-Platform

(8)



Heterogeneous Hardware

• Form factors

• Resources

• Device features (touch input, buttons, connectivity, sensors, …)



Heterogeneous Software Platforms

• Execution environment

• Programming languages

• Platform APIs, UI Kit

• App anatomy and programming model

• Tool chains

• Deployment and verification process



User expectations

• Look and Feel

• Design guidelines

(9)



A

device platform

is a combination of device hardware,

operating system, runtime system, libraries, and

frameworks forming a standard execution environment for

applications on devices which run that platform.



A device platform has a characteristic set of features:

• Specific „look and feel“ (UI guidelines and interaction concepts)

• App runtime defining app anatomy and lifecycle

• Developer tool chain (programming languages, libraries, APIs)

• Specific app distribution and deployment process



Native Code

is code which can be directly executed within

the standard execution environment of the device platform.

It has full access to the platforms libraries and frameworks,

possibly also to operating system APIs and hardware

features.

Terms and Definitions

Device Platform

(10)



An App is a specific type of applications created for

and running on a particular device platform.



A Native App is an App which is created for and can

be deployed and started on a device platform whithout

any further dependencies.



A

Mobile App

is typically created for and running on a

mobile device platform. It‘s started from the home

screen, supports graphically-oriented interactions and

occupies the full screen.

Terms and Definitions

App

(11)

Mobile App Types

Device Platform

Interpreter

Cross-Platform App

(+ Native Ext.)

Cross-Platform API

Native

Code

Interpreted

App

Web

browser

Web App

Hybride App

(12)



What to start with?

Cross-Platform Development

Approaches

Execution Phase

Build Phase

Implementation

Phase

Mobile Device Source Code Executable Program

Design Phase

Model GUI Logic GUI Logic

(13)



Model-driven Development

Cross-Platform Development

Approaches

Execution Phase

Build Phase

Implementation

Phase

Model-to-Model-Transformation Mobile Device Source Code Executable Program

Design Phase

Model GUI Logic GUI Logic Model-to-Code-Transformation Interpretation

(14)



Cross-compilation to native code

Cross-Platform Development

Approaches

Execution Phase

Build Phase

Implementation

Phase

Machine Code Cross-Compilation / JIT-Compilation Model-to-Model-Transformation Execution Mobile Device Source Code Executable Program

Design Phase

(15)



Support for abstract runtime

Cross-Platform Development

Approaches

Execution Phase

Build Phase

Implementation

Phase

Machine Code Byte Code Cross-Compilation / JIT-Compilation Model-to-Model-Transformation Interpretation AOT- / JIT-Compilation Execution Compilation Mobile Device Source Code Executable Program

Design Phase

(16)



Script languages

Cross-Platform Development

Approaches

Execution Phase

Build Phase

Implementation

Phase

Machine Code Byte Code Cross-Compilation / JIT-Compilation Model-to-Model-Transformation Interpretation Interpretation AOT- / JIT-Compilation Execution Compilation Mobile Device Source Code Executable Program

Design Phase

(17)



Translate to other programming languages

Cross-Platform Development

Approaches

Execution Phase

Build Phase

Implementation

Phase

Machine Code Byte Code Cross-Compilation / JIT-Compilation Model-to-Model-Transformation Source-to-Source-Translation (Code Transformation) Interpretation Interpretation AOT- / JIT-Compilation Execution Compilation Mobile Device Source Code Executable Program

Design Phase

(18)

Cross-Platform Development

Approaches

Execution Phase

Build Phase

Implementation

Phase

Design Phase

(19)

Translation Approach

Translation Approach

Execution Phase

Build Phase

Implementation

Phase

Design Phase

(20)

Interpretation Approach

Execution Phase

Build Phase

Implementation

Phase

Design Phase

(21)

Web-based Approach

Interpretation Approach Translation Approach

Execution Phase

Build Phase

Implementation

Phase

Design Phase

Model GUI Logic GUI Logic Model-to-Code-Transformation Interpretation Web-based Approach

(22)

Hybrid Approach

Execution Phase

Build Phase

Implementation

Phase

Design Phase

Model GUI Logic GUI Logic Model-to-Code-Transformation Interpretation Hybrid Approach

(23)

Model-driven Approach

Interpretation Approach Translation Approach Model-driven Approach

Execution Phase

Build Phase

Implementation

Phase

Design Phase

Model GUI Logic GUI Logic Model-to-Code-Transformation Interpretation Web-based Approach Hybrid Approach

(24)

(25)



Step-wise desing



Models for UI and application logic



Integrated tool environment to consistently develop UI and

application logic

Example EMODE

Model-Driven Approach

Execution Phase Implementation/Build Phase JavaME Design Phase Refinement Abstract Design Task Model Concept Model Abstract UI Model Functional-Core-Adapter Model Context-Model Concrete UI Model Executable Task Model FCA-Code Context- Provider-Code Source Code Interpretation (EMODE-Runtime Environment) other Platforms

...

M-M M-M M-M M-C M-C M-C M-C M-M = Modell-to-Modell-Transformation M-C = Modell-to-Code-Transformation

(26)



JavaME as common

code base



Parameterized code to

customize code for

different platforms



Source-to-Source

Transaltion to various

programming

languages



Transformed code can

be further edited



Compatibility libraties

per platform to bridge

API-gap



No DIE, but translation

scripts, compatibility

Bedrock

Translation Approach

Execution Phase Buildphase JavaME-Source Code Implementation Phase JavaME-Source Code Source-to-Source-Translation C++-Source Code Java-Source Code (Android) Dalvik-Bytecode Maschinen-code Maschinen-code C#-Source Code

ActionScript ActionScript-_Bytecode CIL-Code CIL-Code HTML5, JavaScript JavaME BlackBerry Android iOS, Bada, Symbian, WinMobile, webOS, BREW, ... Windows Phone Windows Desktop (.NET) Flash Player Browser JavaME-Bytecode BlackBerry-Bytecode ... ... Compilation Compilation Compilation Cross-Compilation Cross-Compilation Compilation Compilation Compilation Interpretation Interpretation Interpretation Interpretation Interpretation Interpretation Interpretation Execution Execution Code-Transformation, Compatibility Libraries

(27)



Approach using m:1:n language translation



XML as common language for byte code based on Java Bytecode



Transformation based on XML Stylesheets



Compatibility libraries used to port apps (even from Android to iOS)

XMLVM

Translation Approach

Abarbeitungsphase Buildphase Implemen- tierungs-phase Realisierung durch XMLVM (Xcode: Cross-Kompilierung zu Maschinencode; Ausführung) Interpretation Java-Bytecode Java-Plattform .NET-Plattform iOS Browser XMLVM-JVM (XML) JavaScript-Quellcode C/C++-Quellcode Interpretation Interpretation CIL-Bytecode BCEL DX XSL XSL MBEL Interpretation Cross-Kompilierung ... ... Objective-C-Quellcode Python- Quellcode XMLVM-CLR (XML) XMLVM-DEX (XML) Java-Bytecode Java-Quellcode Kompilierung Kompilierung CIL-Bytecode XMLVM-CLR, -DFA (XML) .NET-Quellcode (C#, VB, ...) Ruby(YARV)-Bytecode Ruby-Quellcode Kompilierung Ruby BCEL XSL MBEL

BCEL = Byte Code Engineering Library MBEL = Microsoft Bytecode Engineering Library

(28)



Qt C++ as source



Virtual GUI toolkit



Cross-platform libraries allow access to many device specific

features (camera, contacts, Maps, GPS, Sensors, etc.)



Qt Quick allows declarative description of touch-based Uis

• Interpreted in special runtime engine

Qt

Translation Approach

Abarbeitungsphase Buildphase Implementierungs- phase Qt C++-Quellcode C++-Quellcode

...

Ausführung Präprozessor Maschinen-code Symbian, MeeGo, Maemo, Windows, Linux, Mac OS Maschinen-code

...

Cross-Kompilierung Ausführung

(29)



Specific AIR runtime engine + libraries



GUI declaratively described in MXML (special extensions to

support touch-based interactions)



GUI description compiled to ActionScript code

Adobe Air

Interpretation Approach

Abarbeitungsphase Buildphase Implemen-tierungs- phase ActionScript-Quellcode ActionScript-Bytecode Kompilierung Maschinen-code

...

Interpretation (separat zu installierende AIR-Laufzeitumgebung) Ausführung AOT-Kompilierung Interpretation (integrierte AIR-Laufzeitumgebung) Android, Windows, Linux, Mac OS iOS TV BlackBerry Tablet OS

(30)



Ruby, HTML, CSS and JavaScript as common code

base in one project



Application bundled with lightweight web server +

Rhodes Ruby Framework + Ruby VM

Rhodes Mobile

Interpretation Approach

Execution Phase Build Phase Implementation Phase Interpretation (bundled VM) Interpretation BlackBerry Compilation Compilation Ruby-Bytecode BlackBerry-Bytecode iOS Android WinMobile Interpretation (Browser-Engine of Platform, WebView) One Cross-platform Project Ruby-Source ode HTML-, CSS-, JavaScript-Source Code

(31)



Supports development of client and server side code for

Web-Applications in Java



Source-to-Source translation to HTML, JavaScript and CSS

(High-leve Translator



JavaScript Code optimized for various browsers



Mobile support with specific extensions of GWT libraries

(GWTMobile, GWT-Mobile-Webkit)

Google Web Toolkit (GWT)

Web-based Approach

Execution phase Buildphase Implementation phase Java-Source Code (Client) JavaScript-, HTML-, CSS-Source Code Interpretation Interpretation Browser (Client) Java-Plattform (Servlet Container / Google App Engine) Source-to-Source-Translation Java-Bytecode Compilation Java-Source Code (GWT Servlet)

(32)



Combination of

Web-based and Translation

approach



Web-technologies to

create UI + logic



Native Code to access

specific device

features like sensors,

camera, etc.



Cross-platform API for

each target platform

(PhoneGap JavaScript

API)



Native UI widgets are

Phone Gap

Hybrid Approach

HTML, CSS, JavaScript

iOS PhoneGap Bib (JavaScript)

iOS PhoneGap Bib (Nativ)

PhoneGap Cross-Platform-API for JavaScript

(Nativer Wrapper Code) iOS-Plattform-API Android PhoneGap Bib (JavaScript) Android PhoneGap Bib (Nativ) (Nativer Wrapper Code) Android-Plattform-API

App Projekt for iOS

App Projekt for Android

(33)

Comparision

Tool Supported Device Platforms Programming

Language Approach App Execution

Env.

Generic App

parts Native

GUI-Widgets

Supported Platform-Features Bedrock Android, Antix Game Player, bada, BlackBerry,

BREW, Flash, iOS (iPhone, iPad), JavaME, Nintendo DS / DSi / DSiWare, Sony PSP / PSP Minis,

Symbian, webOS, Windows Mobile, Windows Phone 7, Browser (HTML5)

Java (JavaME)

Source-to-Source-Translation to C++, Java, C#, ActionScript,

JavaScript;

Plattform-SDK for Cross-Compilation

native Logic, GUI no

Qt Symbian, Maemo, MeeGo, Windows, Linux, Mac OS C/C++ Cross-Compilation native Logic, GUI Yes

XMLVM iOS, Android, .NET-Plattform, Java-Plattform, weitere Zielsprachen: JavaScript, Python, C++, Objective-C

Java, Ruby, Sprachen der .NET-Plattform

Bytecode-Compilation native Logic Yes

Adobe AIR iOS (iPhone, iPad), Android, Blackberry Tablet OS,

Desktop-PCs, TV ActionScript, MXML Bytecode-Interpretation / AOT-Compilation (iOS) Engine / native Logic, GUI partly

Kony Android, iOS, J2ME, BlackBerry, Symbian, Windows

Mobile, Windows Phone 7, webOS, BREW; Tablets: iOS, Android, BlackBerry, webOS;

Lua Bytecode-Interpretation /

Source-to-Source-Translation, Cross-Compilation (iOS)

Engine /

native Logic, GUI yes

Rhodes Android, BlackBerry, iOS (iPhone, iPad), Windows

Mobile, Windows Phone 7 Ruby, HTML, CSS, JavaScript Interpretation of scripting languages

Bytecode-Interpretation

Engine,

hybrid Logic, GUI partly

Titanium Mobile

Android, iOS (iPhone, iPad), BlackBerry, Titanium

Mobile Web SDK: Browser JavaScript Interpretation approach Engine Logic, GUI yes

Sencha Touch

iOS (iPhone, iPad), Android, BlackBerry (incl.

PlayBook) JavaScript, (HTML, CSS) JavaScript-Application-Framework Web Logic, GUI No

Google Web Toolkit

Any device with Web browser Java

Source-to-Source-Translation to HTML, CSS, JavaScript

Web Logic, GUI No

PhoneGap iOS (iPhone, iPad), Android (Smartphones, Tablets), webOS, Symbian, BlackBerry, Windows Phone, bada