Department of Computer Science Institute for System Architecture, Chair for Computer Networks lication Development for Mobile and Ubiquitous Computing 9. Cross-Platform Development Dr. Ing. Thomas Springer Technische Universität Dresden Chair of Computer Networks
Lecture Structure lication Development Mobile Business lications Cross-Platform Development Adaptation and Contextawareness Mobile Web lications Android ios Mobile Middleware Location-based Services Disconnected Operations Communication Mechanisms Energy Awareness Enabling Technologies and Challenges Slide 2
Why Cross-Platform Development? Android Project ios Project Windows Phone Project Mobile Device Mobile Device Mobile Device.apk.apk.ipa.ipa.xap.xap lication Framework Libraries Linux Kernel ART or Dalvik VM Dalvik VM + Core libraries Custom Frameworks Cocoa Touch UIKit Media Core Services Foundation Mach/BSD Kernel Silverlight Model Frameworks XNA UI Model Kernel Hardware Foundation HTML/JavaScript Common Language Runtime Cloud Integration Hardware Hardware Hardware 3
Why Cross-Platform Development? 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 platform diversity e.g. 7 and 10 tablets, Wearables Short time to market required Fast support of platform changes/new platforms Mobility/Adaptation Support 4
Write once, run everywhere? Cross-Platform Project Mobile Device Mobile Device Mobile Device.apk.apk.ipa.ipa.xap.xap lication Framework Libraries Linux Kernel Dalvik VM + Core libraries Custom Frameworks Cocoa Touch UIKit Media Core Services Foundation Mach/BSD Kernel Silverlight Model Frameworks XNA UI Model Kernel Hardware Foundation HTML/JavaScript Common Language Runtime Cloud Integration Hardware Hardware Hardware 5
How can we achieve it? lication Framework Libraries Linux Kernel Dalvik VM + Core libraries Cross-Platform Project Custom Frameworks Cocoa Touch Core Services Media Mach/BSD Kernel UIKit Foundation Mobile Device Mobile Device Mobile Device.apk.apk.ipa? Frameworks Silverlight Model XNA UI Model Kernel Hardware Foundation HTML/JavaScript Common Language Runtime Cloud Integration.ipa.xap.xap Hardware Hardware Hardware 6
Challenges for Write once, run everywhere Heterogeneous Hardware Form factors Resources Device features (touch input, buttons, connectivity, sensors, ) Heterogeneous Software Platforms Execution environment Programming languages Platform APIs, UI Kit anatomy and programming model Tool chains Deployment and verification process User expectations Native Look and Feel Design guidelines 7
Terms and Definitions Device Platform 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) runtime defining app anatomy and lifecycle Developer tool chain (programming languages, libraries, APIs) Specific app distribution and deployment process Native 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. 8
Mobile Types Hybride Native Cross-Platform (+ Native Ext.) Interpreted Web Web browser Cross-Platform API Interpreter Device Platform 9
Cross-Platform Development roaches What to start with, model or source code? Design Phase Implementation Phase Build Phase Execution Phase Mobile Device Model Source Executable Program 10
Cross-Platform Development roaches Model-driven Development Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Mobile Device Model Model-to-- Source Executable Program 11
Cross-Platform Development roaches Cross-compilation to native code Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Mobile Device Cross- / JIT- Machine Execution Model Model-to-- Source Executable Program 12
Cross-Platform Development roaches Support for abstract runtime Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Executable Program 13
Cross-Platform Development roaches Script languages Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Executable Program 14
Cross-Platform Development roaches Translate to other programming languages Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Source-to-Source-Translation ( ) Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Executable Program 15
Cross-Platform Development roaches Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Source-to-Source-Translation ( ) Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Executable Program 16
Translation roach Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Translation roach Source-to-Source-Translation ( ) Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Executable Program 17
roach Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Translation roach Source-to-Source-Translation ( ) Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Executable Program roach 18
Web-based roach Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Translation roach Source-to-Source-Translation ( ) Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Executable Program Web-based roach roach 19
Hybrid roach Design Phase Implementation Phase Build Phase Execution Phase Model-to-Model- Translation roach Source-to-Source-Translation ( ) Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Hybrid roach Executable Program Web-based roach roach 20
Model-driven roach Design Phase Implementation Phase Build Phase Execution Phase Model-driven roach Model-to-Model- Translation roach Source-to-Source-Translation ( ) Mobile Device Cross- / JIT- AOT- / JIT- Machine Execution Model Model-to-- Source Byte Hybrid roach Executable Program Web-based roach roach 21
Many tools and approaches 22
Example EMODE Model-Driven roach Abstract Design Design Phase Refinement Implementation/Build Phase Execution Phase Source M-M Abstract UI Model M-C Concrete UI Model Task Model M-C Executable Task Model (EMODE-Runtime Environment) JavaME M-M Functional- Core-Adapter Model M-C FCA- other Platforms Concept Model M-M Context- Model M-C Context- Provider- M-M = Modell-to-Modell- M-C = Modell-to-- Step-wise design and refinement Models for UI and application logic Integrated tool environment to consistently develop UI and application logic 23
Qt Translation roach Implementation phase Build phase Execution phase Qt C++- Sourcecode Preprocessor C++- Sourcecode Cross- Machine code Machine code Execution Execution Symbian, MeeGo, Maemo, Windows, Linux, Mac OS Qt C++ as source Virtual 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 24
webmethods Mobile Designer Translation roach Java as common code base Source-to-Source Translation to various programming languages Parameterized code to customize code for different platforms Transformed code can be further edited Compatibility libraries per platform to bridge API-gap No IDE, but translation scripts, compatibility lib and cross-compiler Source-to-Source- Translation Java- Quellcode Implementationphase JavaME- Sourcecode Java- Sourcecode (Android) C++- Sourcecode Maschinencode C#- Sourcecode ActionScript HTML5, JavaScript Realisation in webmethod Mobile Suite Build phase -, Cross-platform libraries Cross- Cross- JavaME- Bytecode BlackBerry- Bytecode Dalvik- Bytecode Maschinencode CIL- CIL- ActionScript- Bytecode Integration with Paltform-SDKs Execution phase Execution Ausführung JavaME BlackBerry Android ios, Bada, Symbian, WinMobile, webos, BREW, Windows Phone Windows Desktop (.NET) Flash Player Browser 25
XMLVM Translation roach Implementation phase Build phase Execution phase.net- Sourcecode (C#, VB, ) Java- Sourcecode CLI- Bytecode Java- Bytecode MBEL XMLVM- CLR, -DFA (XML) BCEL XSL XMLVM- JVM (XML) XSL XMLVM-CLR (XML) BCEL MBEL CLI- Bytecode Java- Bytecode.NET-Platform Java-Platform (Xcode: Cross- to executable code) Objective-C- Sourcecode ios Ruby- Sourcecode Ruby(YARV)- Bytecode BCEL = Byte Engineering Library MBEL = Microsoft Bytecode Engineering Library Ruby DX XMLVM-DEX (XML) XSL JavaScript- Sourcecode C/C++- Sourcecode Browser Cross- Python- Sourcecode covered by XMLVM roach using m:1:n language translation XML as common language for byte code based on Java Bytecode based on XML Stylesheets Compatibility libraries used to port apps (even from Android to ios) 26
Adobe Air roach Implementation phase Build phase Execution phase AOT- Machine code Execution ios ActionScript- Sourcecode ActionScript- Bytecode (AIR-runtime need to be installed) Android, Windows, Linux, Mac OS (AIR-runtime need to be installed) BlackBerry Tablet OS TV Specific AIR runtime engine + libraries declaratively described in MXML (special extensions to support touch-based interactions) description compiled to ActionScript code 27
celerator Titanium roach Programming language is Javascript Cross-Platform library to map Titanium API calls to native API calls Modules contain conre function of API, custom modules for extension possible Native with Javascript runtime bundled with every Javascript-to-native Bridge React Native uses a similar approach Javascript Runtime lication - Javascript Native - Javascript Bridge Titanium API, custom modules Native APIs ios, Android, Mobile Web, Windows Phone 28
Phone Gap Hybrid roach 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 roach: o web content wrapped in PhoneGap o Native code to create native browser UI element (UIWebView (ios) or WebView (Android)) o and present locally stored web content Ø Runnable as Ø Deployment via Stores possible 29
Phone Gap roach Web-technologies to create UI + logic HTML, CSS, JavaScript PhoneGap Cross-Platform-API for JavaScript Cross-platform PhoneGap Javascript API to access device specific features Ø Wrapped to native code Often used in combination with Mobile Web lication Frameworks like jquery Mobile or Sencha Touch ios PhoneGap Bib (JavaScript) ios PhoneGap Bib (Nativ) (Nativer Wrapper ) ios-plattform-api Android PhoneGap Bib (JavaScript) Android PhoneGap Bib (Nativ) (Nativer Wrapper ) Android-Plattform- API Native UI elements not supported project for ios projekt for Android 30
PhoneGap Development content Eclipse IDE -Android cordova.js Android Android Cordova.js Xcode - ios cordova.js ios ios HTML, CSS, Javascript Start: Cross-platform web project with platform-specific IDEs Ø Web service PhoneGap build for creating s without native IDEs -> build.phonegap.com Dr. Thomas Springer lication Development - 9. Cross-Platform Development 31
PhoneGap API Cross-platform API provides common interface to access device specific features Ø mapped to device OS by Javascript-to-native bridge http://phonegap.com/about/feature Dr. Thomas Springer lication Development - 9. Cross-Platform Development 32
Xamarin Hybrid roach Development based on C# for ios, Android and 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 33
Xamarin Development 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 separated into a Core Library 34
Comparison Tool Supported Device Platforms Programming Language roach Execution Env. Generic parts Native - Widgets Supported Platform- Features webmethods Mobile Designer Qt XMLVM Adobe AIR Kony Rhodes Titanium Mobile Sencha Touch Google Web Toolkit PhoneGap 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) Symbian, Maemo, MeeGo, Windows, Linux, Mac OS ios, Android,.NET-Plattform, Java-Plattform, further languages: JavaScript, Python, C++, Objective-C ios (iphone, ipad), Android, Blackberry Tablet OS, Desktop-PCs, TV Android, ios, J2ME, BlackBerry, Symbian, Windows Mobile, Windows Phone 7, webos, BREW; Tablets: ios, Android, BlackBerry, webos; Android, BlackBerry, ios (iphone, ipad), Windows Mobile, Windows Phone 7 Android, ios (iphone, ipad), BlackBerry, Titanium Mobile Web SDK: Browser ios (iphone, ipad), Android, BlackBerry (incl. PlayBook) Java (JavaME) Source-to-Source- Translation to C++, Java, C#, ActionScript, JavaScript; Plattform-SDK for Cross- native, no C/C++ Cross- native, Yes Java, Ruby, Programming Langugage of.net-platform ActionScript, MXML Bytecode- native Yes Bytecode- / AOT- (ios) Lua Bytecode- / Source-to-Source- Translation, Cross- (ios) Ruby, HTML, CSS, JavaScript of scripting languages Bytecode- Engine / native Engine / native Engine, hybrid,,, JavaScript approach Engine, yes JavaScript, (HTML, CSS) JavaScript-lication- Framework Any device with Web browser Java Source-to-Source- Translation to HTML, CSS, JavaScript ios (iphone, ipad), Android (Smartphones, Tablets), webos, Symbian, BlackBerry, Windows Phone, bada Native, HTML, CSS, JavaScript partly yes Web, No Web, No Hybride roach hybride, no partly 35
Summary 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 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 projects 1. Web to support large set of platforms 2. Native s in addition for most important platforms 36
References Dirk Hering: Analyse von Methoden und Werkzeugumgebungen zur plattformunabhängigen Entwicklung mobiler likationen, 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 lications (NESEA), 2010, S. 1 7 Hamann, Thomas ; Hübsch, Gerald ; Springer, Thomas: A Model- Driven roach 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 lications (IJSEIA) 4 (2010), Nr. 3, S. 43 57 Calvary, Gaëlle ; Coutaz, Joëlle ; Thevenin, David ; Limbourg, Quentin ; Bouillon, Laurent ; Vanderdonckt, Jean: A Unifying Reference Framework for multi-target user interfaces. In: Interacting with Computers 15 (2003), Nr. 3, S. 289 308 37
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 38
React Native roach Programming language: Javascript Javascript-to-native-Bridge to map native APIs to Javascript Bridge Native React Native Javascript Runtime Enviroment ios or Android Operating System 39