Classification and Selection of Cross-Platform Tools Michiel Willocx 17/06/2015
Table of contents PART 1: Classification Cross-Platform Tools o Different technologies o Examples PART 2: Selection Criteria of Cross-Platform Tools PART 3: Performance Analysis (Work In Progress) o o Approach Goals
PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories
PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories
Web Apps è Mobile Websites Accessed in standard mobile browser (Chrome, Safari, ) Optimized for mobile device screen sizes
Web Apps: JavaScript Frameworks UI Components Layout Optimization, scaling and formatting for mobile screen sizes Native-looking skins (not always available) Optimization for touch functionality
Web Apps: JavaScript Frameworks Other Components Assistance in: DOM manipulation Utility functions (e.g. array manipulations, access Web resource) Event handling (e.g. on click, gestures)
Web Apps: JavaScript Frameworks Use of design patterns MVC (e.g. AngularJS) MVVM (e.g. KnockoutJS)
Web Apps No platform-specific code Easy to develop Easy to update Easy to distribute (URL) Lots of support and different frameworks available Internet access always needed Responsiveness (partly) depends on Internet connection Not a real, stand-alone application Limited access to device features Often no native look and feel Depends on browser capabilities
JavaScript Frameworks: Examples
Web Apps: Ionic Based on è MVC Design Pattern
Web Apps: Ionic Focusses on look & feel and UI interaction No native skins
Web Apps: Sencha Touch See presentation Ruben Ability to use native skins
PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories
Web-To-Native Wrappers Web Apps, packaged as a native, stand-alone application Web code is displayed in a chromeless webview Wider range of native API calls compared to normal Web browser
Web-To-Native Wrappers Allow Web developers to make mobile applications Convert existing Web services to mobile applications Stand-alone application More available device features than Web apps Poorer UX compared to native Often no native look and feel Performance overhead
Web-To-Native Wrapper: Phonegap Created by Nitobi Acquired by Adobe in 2011 Supported OS: Android ios Windows Phone 8 BlackBerry Alternatives for PhoneGap as web-to-native wrapper? è discontinued, never used, bankrupt,
PhoneGap Explained: PhoneGap API PhoneGap Application Web App, written in JavaScript, HTML and CSS PhoneGap API Bridge between application logic (JavaScript) and Native API Native OS Native API, sensor access,
PhoneGap Explained: Packaging Native Application Web App Build options: Local è PhoneGap CLI Cloud è PhoneGap Build
PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories
Runtimes Application Code Runtime Environment Operating System Cross-platform compatibility layer Shields app form underlying differences between platforms Different strategies: o o Interpreted at runtime Compiled in advance (source code translators)
Runtimes Good overall user experience Less reliant on native webview component/javascript engine Application developers can choose Runtime based on programming language Often, platform specific code is needed Runtimes introduce significant overhead Learning curve is often quite steep
Runtimes: examples
Titanium explained Written in JavaScript No cross-compilation JavaScript code evaluated at runtime Titanium API maps JavaScript code on Native API (1:1) Only supports ios and Android
Difference between PhoneGap and Titanium Uses JavaScript WebView Renders HTML pages in chrome-less browser Developer writes Web app Uses JavaScript Runtime Interprets JavaScript code and maps on Native API Developer writes native application using JavaScript
PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories
Source Code Translator Different strategies: o Translate to native source o Translate to intermediary language o Translate to low level machine code Often used in combination with Runtime
Source Code Translator Good user experience and performance Application developers can choose tool based on programming language Generate 100% native applications Often, platform specific code is needed Learning curve is often quite steep
Source Code Translator: examples
Source Code Translator: Xamarin Uses Runtime Code written in C# Supported platforms: Android ios Windows Phone (OS X)
Xamarin explained: development
Xamarin explained: development Xamarin.Forms (out now) Xamarin.Mobile (in development)
Xamarin: Android vs ios Source translated to Intermediary Language (IL) Just-In-Time (JIT) compilation Source translated to executeble binary code Ahead-Of-Time (AOT) compilation
Source Code Translator: Eqela
PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories
App Factories Drag and drop app design Automatic code generation Little to no self-written code Used for writing simple applications (e.g. RSS feed reader)
App Factories No programming skills required Often ability to develop in cloud Limited UI capabilities Limited overall possibilities
App Factories: Examples
App Factories: Examples
PART 2: CPT Selection Criteria
PART 2: CPT Selection Criteria
PART 2: CPT Selection Criteria Development infrastructure Available device feature access Layout capabilities Code reusability, platform specific code, Security features Performance
PART 2: CPT Selection Criteria Development infrastructure Available device feature access Layout capabilities Code reusability, platform specific code, Security features Performance Now Future Work
Supported platforms Technology CPT ios Android WP8 JavaScript*Framework Ionic x x x Sencha7Touch72 x x x Web3to3native*Wrapper PhoneGap x x x Runtime Titanium x x SOON Source*Code*Translator Eqela x x x Source*Code*Translator Xamarin7 x x x and*runtime Qt x x x Adobe7AIR x x x Unity x x x App*Factory AppMakr x x7 / ViziApps x x / JavaScript frameworks? As stand-alone application è always supported (they depend on PhoneGap) As Web App è depends on browser capabilities
Development Infrastructure Technology JavaScript*Framework Web3to3native*Wrapper Runtime Source*Code*Translator Source*Code*Translator and*runtime App*Factory CPT Ionic Sencha0Touch02 PhoneGap Titanium Eqela Xamarin0 Qt Adobe0AIR Unity AppMakr ViziApps Programming)Language JavaScript JavaScript)(and)drag)and)drop)) JavaScript,)HTML,)CSS, ) JavaScript Eqela C# C++/QML ActionScript C#,)JavaScript drag)and)drop drag)and)drop Native ios Android Wp8 ObjectiveGC,)Swift Java C#
Development Infrastructure Technology JavaScript*Framework Web3to3native*Wrapper Runtime Source*Code*Translator Source*Code*Translator and*runtime App*Factory CPT Ionic Sencha0Touch02 PhoneGap Titanium Eqela Xamarin0 Qt Adobe0AIR Unity AppMakr ViziApps Programming)environment IntelliJ)Plugin,)any)web)IDE, Sencha)Architect,))IntelliJ)plugin,)any)web)IDE, IntelliJ)Plugin,)any)web)IDE, Titanium)IDE) Eqela)IDE Xamarin)IDE QT)Creator Adobe)Flash)Builder Visual)Studio)Plugin AppMakr)cloud)development)tool) ViziApps)cloud)development)tool Native ios Android Wp8 Xcode Android)Studio Visual)Studios
Development Infrastructure Technology JavaScript*Framework Web3to3native*Wrapper Runtime Source*Code*Translator Source*Code*Translator and*runtime App*Factory CPT Ionic Sencha0Touch02 PhoneGap Titanium Eqela Xamarin0 Qt Adobe0AIR Unity AppMakr ViziApps Licence&cost FREE $3855/year&(5developers) FREE $39/month $1000/year $25/month $174/month FREE one&time&$1500+$75/month $9/month $99/month Native ios Android Wp8 $99/year,&30%&of&app&revenue& one&time&$25,&30%&of&app&revenue& $99/year,&30%&of&app&revenue&
UI Capabilities
UI Capabilities: Web Apps and Web-To-Native Wrappers Easy UI development o o CSS templates JavaScript Frameworks (e.g. Ionic) Tons of CSS and JavaScript Frameworks available Good looking applications with little to no effort Some JavaScript FrameWorks offer native skins (e.g. Sencha Touch)
UI Capabilities: Runtimes and Source Code Translators Sometimes, platform specific code is needed for the UI (e.g. Xamarin) Often access to native UI components (e.g. Xamarin) Some provide advanced graphical support (e.g. Unity, Qt) o Game Enigines o o 2D and 3D acceleration
UI Capabilities: App Factories Automatic layout by drag and drop mechanisms Limited possibilities and customizability
Device Feature Access: Web Apps Depends on browser capabilities Safari Chrome IE-Mobile Accelerometer / / / Camera x/ x/ x/ Contacts / / / File +/9 x +/9 Geolocation x x x Media / / / Network soon x / Notification / x / Storage x x x BRON: http://www.caniuse.com
Device Feature Access: Stand-Alone Applications Basic device feature access possible in all CPTs o Accelerometer o Camera o Compass o Contacts o Geolocation o Media o Network o Storage o Some CPTs require device-specific code
Device Feature Access: Stand-alone applications No Platform Specific Code needed All device feature code is platform specific
PART 3: Performance Analysis
Performance analysis: why? Performance penalty expected when using CPTs o Compatibility layer in runtimes o o o Phonegap webview Translated code Currently no satisfactory comparison available Important to take performance into account when selecting a CPT Knowing when to use which CPT
Performance analysis: how? Test on different platforms Covers 98% of the market
Performance analysis: how? Test different parameters o Start time o o o o o Response time Memory usage CPU usage Battery usage Disk space o?
Measuring Methods Response Times Memory Usage CPU Usage Battery Usage Instruments tool: Time Profiler Instruments tool: Activity Monitor Instruments tool: Activity Monitor Instruments tool: Energy Diagnostics ADB Console Log Little Eye Tool ADB Shell: TOP command Little Eye Tool Visual Studio Console Log Windows Phone Power Tools Windows Phone Power Tools Windows Phone Power Tools Disk Space Visible on device Visible on device Visible on device
Conclusion Market Research: 100 free (local) Android applications Downloaded from Android Play Store Detect use of cross-platform tools by restoring AndroidManifest.xml PhoneGap$ Xamarin$ Titanium$ Adobe$Air$ Na<ve/other$
Questions / Remarks?