ApplicationDevelopment forMobile …€¢ e.g. 7“ and10“ tablets, Wearables Short time...

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

Application Development for Mobile and Ubiquitous Computing

9. Cross-Platform Development

Dr. Ing. Thomas SpringerTechnische Universität Dresden

Chair of Computer Networks

Adaptation and Context-

awareness

Mobile Middleware

Application Development

Enabling Technologies and Challenges

Disconnected Operations

Location-based Services

Communication Mechanisms

Android iOSMobile Web Applications

Cross-Platform Development

Mobile Business Applications

Energy Awareness

Lecture Structure

Dr. Thomas Springer Slide 2Application Development - 9. Cross-Platform Development

Why Cross-Platform Development?

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

Mobile Device

Hardware

App.ipa

App.ipa ...

Media

Mach/BSD Kernel

Custom Frameworks

UIKit

FoundationCore Services

Cocoa Touch

Mobile Device

Hardware

App.xap

App.xap ...

App Model

Hardware Foundation

Silverlight

Kernel

UI Model Cloud Integration

XNA HTML/JavaScriptCommon Language Runtime

Frameworks

AndroidProject

iOSProject

Windows PhoneProject

Mobile Device

Dalvik VM +Core libraries

Hardware

Libraries

App.apk

App.apk ...

Application Framework

Linux Kernel

ARTor Dalvik VM

§ High development effort• Know-how for multiple platforms• High update rates of technologies• Strong fragmentation of mobile device

platforms, especially Android• Customers don‘t pay per platform but

for project

§ High maintenance effort• Manage multiple code bases• Avoid inconsistencies

§ New form factors increase platformdiversity• e.g. 7“ and 10“ tablets, Wearables

§ Short time to market required• Fast support of platform changes/new

platforms

§ Mobility/Adaptation Support


Why Cross-Platform Development?

Write once, run everywhere?


Mobile Device


Hardware

Libraries

App.apk

App.apk ...


Linux Kernel

Mobile Device

Hardware

App.ipa

App.ipa ...

Media

Mach/BSD Kernel

Custom Frameworks

UIKit


Cocoa Touch

Mobile Device

Hardware

App.xap

App.xap ...

App Model

Hardware Foundation

Silverlight

Kernel



Frameworks

Cross-PlatformProject

How can we achieve it?


Cross-PlatformProject

Mobile Device


Hardware

Libraries

App.apk

App.apk ...


Linux Kernel

Mobile Device

Hardware

App.ipa

App.ipa ...

Media

Mach/BSD Kernel

Custom Frameworks

UIKit


Cocoa Touch

Mobile Device

Hardware

App.xap

App.xap ...

App Model

Hardware Foundation

Silverlight

Kernel



Frameworks?

§ 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• Native Look and Feel• Design guidelines


Challenges for„Write once, run everywhere“

§ A device platform is a combination of device hardware, operating system, runtime system, libraries, andframeworks forming a standard execution environment forapplications 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 withinthe standard execution environment of the device platform. It has full access to the platforms libraries and frameworks, possibly also to operating system APIs and hardwarefeatures.


Terms and DefinitionsDevice Platform

Mobile App Types


Device Platform

Interpreter

Cross-Platform App(+ Native Ext.)

Cross-Platform API

NativeCode

InterpretedApp

Web browser

Web App

Hybride App

§ What to start with, model or source code?


Cross-Platform Development Approaches

Execution PhaseBuild PhaseImplementationPhase

Mobile Device

Source Code Executable

Program

Design Phase

Model

GUILogic

GUILogic

§ Model-driven Development




Model-to-Model-Transformation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic

Model-to-Code-Transformation

Interpretation

§ Cross-compilation to native code




Machine Code

Cross-Compilation / JIT-Compilation


Execution

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

§ Support for abstract runtime




Machine Code

Byte Code



Interpretation

AOT- / JIT-Compilation

Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

§ Script languages




Machine Code

Byte Code



Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

§ Translate to other programming languages




Machine Code

Byte Code



Source-to-Source-Translation (Code Transformation)

Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation




Machine Code

Byte Code




Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

Translation Approach




Machine Code

Byte Code




Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

Interpretation Approach





Machine Code

Byte Code




Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

Web-based Approach





Machine Code

Byte Code




Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

Web-based Approach

Hybrid Approach





Machine Code

Byte Code




Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

Web-based Approach

Hybrid Approach

Model-driven Approach



Translation ApproachModel-driven Approach


Machine Code

Byte Code




Interpretation

Interpretation


Execution

Compilation

Mobile Device


Program

Design Phase

Model

GUILogic

GUILogic


Interpretation

Web-based Approach

Hybrid Approach

Many tools and approaches



Example EMODEModel-Driven Approach

Execution PhaseImplementation/Build Phase

JavaME

Design Phase

RefinementAbstract 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-TransformationM-C = Modell-to-Code-Transformation

§ Step-wise design and refinement§ Models for UI and application logic§ Integrated tool environment to consistently develop UI and

application logic

§ Qt C++ as source§ Virtual GUI toolkit§ Cross-platform libraries allow access to many device specific

features (camera, contacts, Maps, GPS, Sensors, etc.)§ Mobile APIs /Android, iOS, Blackberry 10): access to

hardware and mobile features (Sensors, Positioning, Bluetooth, NFC)

§ Qt Quick allows declarative description of touch-based UIs• Interpreted in special runtime engine


QtTranslation Approach

Execution phaseBuild phaseImplementation phase

Qt C++-Sourcecode

C++-Sourcecode

...

Execution

Preprocessor

Machinecode

Symbian, MeeGo,Maemo,

Windows, Linux,

Mac OSMachine

code

...

Cross-Compilation

Execution

§ Java as common codebase

§ Source-to-Source Translation to variousprogramminglanguages

§ Parameterized code tocustomize code fordifferent platforms

§ Transformed code canbe further edited

§ Compatibility librariesper platform to bridgeAPI-gap

§ No IDE, but translationscripts, compatibilitylib and cross-compiler


webMethods Mobile DesignerTranslation Approach

Execution phaseBuild phase

Java-Quellcode

Implementation-phase

JavaME-Sourcecode

Source-to-Source-Translation C++-

Sourcecode

Java-Sourcecode

(Android)

Dalvik-Bytecode

Maschinen-code

Maschinen-code

C#-Sourcecode

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

... ...

Realisation in webMethod Mobile Suite Integration with Paltform-SDKs

Compilation

Compilation

Compilation

Cross-Compilation

Cross-Compilation

Compilation

Compilation

Compilation

Interpretation

Interpretation

Interpretation

Interpretation

Interpretation

Interpretation

Interpretation

Execution

Ausführung

Code-Transformation, Cross-platform libraries

§ 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)


XMLVMTranslation Approach


covered by XMLVM

(Xcode: Cross-Compilation to executable code)

Interpretation

Java-Bytecode Java-Platform

.NET-Platform

iOS

Browser

XMLVM-JVM

(XML)

JavaScript-Sourcecode

C/C++-Sourcecode

Interpretation

InterpretationCLI-Bytecode

BCEL

DX

XSL

XSL

MBEL

Interpretation

Cross-Compilation ...

...

Objective-C-Sourcecode

Python- Sourcecode

XMLVM-CLR (XML)

XMLVM-DEX (XML)

Java-Bytecode

Java-Sourcecode

Compilation

Compilation

CLI-Bytecode

XMLVM-CLR, -DFA

(XML)

.NET-Sourcecode(C#, VB, ...)

Ruby(YARV)-Bytecode

Ruby-Sourcecode

Compilation

Ruby

BCEL

XSL

MBEL

BCEL = Byte Code Engineering LibraryMBEL = Microsoft Bytecode Engineering Library

§ Specific AIR runtime engine + libraries§ GUI declaratively described in MXML (special extensions to

support touch-based interactions)§ GUI description compiled to ActionScript code


Adobe AirInterpretation Approach


ActionScript-Sourcecode

ActionScript-Bytecode

Compilation

Machinecode

...

Interpretation (AIR-runtime need tobe installed)

ExecutionAOT-Compilation

Interpretation (AIR-runtime need tobe installed)

Android, Windows,

Linux, Mac OS

iOS

TV

BlackBerry Tablet OS


Appcelerator TitaniumInterpretation Approach

§ Programming languageis Javascript

§ Cross-Platform library tomap Titanium API callsto native API calls

§ Modules contain conrefunction of API, custommodules for extensionpossible

§ Native Code withJavascript runtimebundled with every App

§ Javascript-to-native Bridge

§ React Native uses a similar approach

Application Code - Javascript

Javascript Runtime

Native - Javascript Bridge

Titanium API, custom modules

iOS, Android, Mobile Web, Windows Phone

Native APIs

Phone GapHybrid Approach

§ Apache Cordova (formerly PhoneGap)• Cross-platform tool to create mobile apps based on

HTML, CSS and Javascript• Combination of Web-based and Translation approach• Supported platforms: iOS, Android, Windows Phone 7

and 8, BlackBerry OS and bada

• Approach: o web content wrapped in PhoneGap Appo Native code to create native browser UI element

(UIWebView (iOS) or WebView (Android))o and present locally stored web contentØ Runnable as AppØ Deployment via App Stores possible

Dr. Thomas Springer Application Development - 9. Cross-Platform Development 29

§ Web-technologies to createUI + logic

§ Cross-platform PhoneGapJavascript API to accessdevice specific features

Ø Wrapped to native code

§ Often used in combinationwith Mobile Web Application Frameworks like jQueryMobile or Sencha Touch

§ Native UI elements not supported

Phone Gap 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 project for iOS

App projekt forAndroid

Dr. Thomas Springer Application Development - 9. Cross-Platform Development 30

PhoneGap Development

§ Start: Cross-platform web project§ Compilation with platform-specific IDEsØ Web service „PhoneGap build“ for creating Apps

without native IDEs -> build.phonegap.com

31

Xcode-iOS

EclipseIDE-AndroidAppcontent

HTML,CSS,Javascript

Cordova.js

...

cordova.jsAndroid

cordova.jsiOS

...

AndroidApp

iOSApp

...

Dr. Thomas Springer Application Development - 9. Cross-Platform Development

PhoneGap API

§ Cross-platform API provides common interface to access device specific features

Ø mapped to device OS by Javascript-to-native bridge

32

http://phonegap.com/about/feature

Dr. Thomas Springer Application Development - 9. Cross-Platform Development

§ Development based on C# for iOS, Androidand Windows Phone

§ Builds on Mono (open-source version of the .NET Framework)

§ iOS• Xamarin’s Ahead-of-Time (AOT) Compiler compiles Xamarin.iOS

applications directly to native ARM assembly code• MonoTouch runtime (memory allocation, garbage collection,

underlying platform interop, etc.) § Android

• Xamarin’s compiler compiles down to Intermediate Language(IL), which is then Just-in-Time (JIT) compiled to native assembly when the application launches

• IL code bundled with Mono for Android runtime which runs in parallel to Android RT/Dalvik VM


XamarinHybrid Approach


Xamarin Development

§ App structure according to MVC• Native UI development in C# based on Xamarin APIs

(MonoTouch.UIKit APIs, Android.Views)• Cross-platform functionality for business logic and data layer

o Reusable Code separated into a Core Library

Comparison


Tool Supported Device Platforms ProgrammingLanguage

Approach App ExecutionEnv.

Generic App parts

Native GUI-Widgets

SupportedPlatform-Features

webMethodsMobile Designer

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, further languages: JavaScript, Python, C++, Objective-C

Java, Ruby, ProgrammingLangugage of.NET-Platform

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

TitaniumMobile

Android, iOS (iPhone, iPad), BlackBerry, Titanium Mobile Web SDK: Browser

JavaScript Interpretation approach Engine Logic, GUI yes

SenchaTouch

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

Native Code, HTML, CSS, JavaScript

Hybride Approach hybride Logic, GUI no

§ Strong fragmentation of market for mobile device platforms§ Cross-Platform frameworks try to bridge the gap§ Large number of tools following manifold approaches

• Methodology• Target platforms• Native features• App anatomy• User interactions

§ No tool fulfills all requirements§ In sum: instead of „Write once, run everywhere“ it‘s more

„Write once, run many“

à Possible strategy for projects1. Web App to support large set of platforms2. Native Apps in addition for most important platforms


Summary

§ Dirk Hering: Analyse von Methoden und Werkzeugumgebungen zur plattformunabhängigen Entwicklung mobiler Applikationen, Diplomarbeit, TU Dresden, 2010

§ Kramer, Dean ; Clark, Tony ; Oussena, Samia: MobDSL: A Domain Specific Language for multiple mobile platform deployment. In: 2010 IEEE International Conference on Networked Embedded Systems for Enterprise Applications (NESEA), 2010, S. 1–7

§ Hamann, Thomas ; Hübsch, Gerald ; Springer, Thomas: A Model-Driven Approach for Developing Adaptive Software Systems. DAIS 2008, Proceedings Bd. 053 (LNCS), pp. 196–209, 2008

§ Kassinen, Otso ; Harjula, Erkki ; Koskela, Timo ; Ylianttila, Mika: Guidelines for the Implementation of Cross-platform Mobile Middleware. In: International Journal of Software Engineering and Its Applications (IJSEIA) 4 (2010), Nr. 3, S. 43–57

§ Calvary, Gaëlle ; Coutaz, Joëlle ; Thevenin, David ; Limbourg, Quentin ; Bouillon, Laurent ; Vanderdonckt, Jean: A UnifyingReference Framework for multi-target user interfaces. In: Interacting with Computers 15 (2003), Nr. 3, S. 289–308


References

§ Adobe AIR: http://www.adobe.com/products/air§ Bedrock: http://www.metismo.com§ Google Web Toolkit: http://code.google.com/intl/

de-DE/webtoolkit§ Kony Platform: http://www.kony.com/platform§ PhoneGap: http://phonegap.com/§ Qt: http://qt.nokia.com/products § Rhodes: http://rhomoile.com § Sencha Touch: http://www.sencha.com/products/touch§ Titanium Developer: http://www.appcelerator.com § XMLVM: http://xmlvm.org


References


React NativeInterpretation Approach

§ Programming language: Javascript§ Javascript-to-native-Bridge to map native APIs to

Javascript

iOS or Android Operating System

Native CodeJavascript Runtime Enviroment

React Native Code

Bridge

ApplicationDevelopment forMobile …€¢ e.g. 7“ and10“ tablets, Wearables Short time...

Documents

Transcript of ApplicationDevelopment forMobile …€¢ e.g. 7“ and10“ tablets, Wearables Short time...