applicationdevelopment formobile …€¢ e.g. 7“ and10“ tablets, wearables short time...
TRANSCRIPT
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
Dr. Thomas Springer 4Application Development - 9. Cross-Platform Development
Why Cross-Platform Development?
Write once, run everywhere?
Dr. Thomas Springer 5Application Development - 9. Cross-Platform Development
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
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
Cross-PlatformProject
How can we achieve it?
Dr. Thomas Springer 6Application Development - 9. Cross-Platform Development
Cross-PlatformProject
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
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?
§ 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
Dr. Thomas Springer 7Application Development - 9. Cross-Platform Development
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.
Dr. Thomas Springer 8Application Development - 9. Cross-Platform Development
Terms and DefinitionsDevice Platform
Mobile App Types
Dr. Thomas Springer 9Application Development - 9. Cross-Platform Development
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?
Dr. Thomas Springer 10Application Development - 9. Cross-Platform Development
Cross-Platform Development Approaches
Execution PhaseBuild PhaseImplementationPhase
Mobile Device
Source Code Executable
Program
Design Phase
Model
GUILogic
GUILogic
§ Model-driven Development
Dr. Thomas Springer 11Application Development - 9. Cross-Platform Development
Cross-Platform Development Approaches
Execution PhaseBuild PhaseImplementationPhase
Model-to-Model-Transformation
Mobile Device
Source Code Executable
Program
Design Phase
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
§ Cross-compilation to native code
Dr. Thomas Springer 12Application Development - 9. Cross-Platform Development
Cross-Platform Development Approaches
Execution PhaseBuild PhaseImplementationPhase
Machine Code
Cross-Compilation / JIT-Compilation
Model-to-Model-Transformation
Execution
Mobile Device
Source Code Executable
Program
Design Phase
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
§ Support for abstract runtime
Dr. Thomas Springer 13Application Development - 9. Cross-Platform Development
Cross-Platform Development Approaches
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
§ Script languages
Dr. Thomas Springer 14Application Development - 9. Cross-Platform Development
Cross-Platform Development Approaches
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
§ Translate to other programming languages
Dr. Thomas Springer 15Application Development - 9. Cross-Platform Development
Cross-Platform Development Approaches
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
Cross-Platform Development Approaches
Dr. Thomas Springer 16Application Development - 9. Cross-Platform Development
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
Translation Approach
Dr. Thomas Springer 17Application Development - 9. Cross-Platform Development
Translation Approach
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
Interpretation Approach
Dr. Thomas Springer 18Application Development - 9. Cross-Platform Development
Interpretation Approach
Translation Approach
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
Web-based Approach
Dr. Thomas Springer 19Application Development - 9. Cross-Platform Development
Interpretation Approach
Translation Approach
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
Web-based Approach
Hybrid Approach
Dr. Thomas Springer 20Application Development - 9. Cross-Platform Development
Interpretation Approach
Translation Approach
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
Web-based Approach
Hybrid Approach
Model-driven Approach
Dr. Thomas Springer 21Application Development - 9. Cross-Platform Development
Interpretation Approach
Translation ApproachModel-driven Approach
Execution PhaseBuild PhaseImplementationPhase
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
Model
GUILogic
GUILogic
Model-to-Code-Transformation
Interpretation
Web-based Approach
Hybrid Approach
Many tools and approaches
Dr. Thomas Springer 22Application Development - 9. Cross-Platform Development
Dr. Thomas Springer 23Application Development - 9. Cross-Platform Development
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
Dr. Thomas Springer 24Application Development - 9. Cross-Platform Development
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
Dr. Thomas Springer 25Application Development - 9. Cross-Platform Development
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)
Dr. Thomas Springer 26Application Development - 9. Cross-Platform Development
XMLVMTranslation Approach
Execution phaseBuild phaseImplementation phase
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
Dr. Thomas Springer 27Application Development - 9. Cross-Platform Development
Adobe AirInterpretation Approach
Execution phaseBuild phaseImplementation phase
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
Dr. Thomas Springer 28Application Development - 9. Cross-Platform Development
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
Dr. Thomas Springer 33Application Development - 9. Cross-Platform Development
XamarinHybrid Approach
Dr. Thomas Springer 34Application Development - 9. Cross-Platform Development
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
Dr. Thomas Springer 35Application Development - 9. Cross-Platform Development
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
Dr. Thomas Springer 36Application Development - 9. Cross-Platform Development
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
Dr. Thomas Springer 37Application Development - 9. Cross-Platform Development
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
Dr. Thomas Springer 38Application Development - 9. Cross-Platform Development
References
Dr. Thomas Springer 39Application Development - 9. Cross-Platform Development
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