classification and selection of cross-platform tools meeting...• mvvm (e.g. knockoutjs) • …...

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  Approach o  Goals

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


Other Components Assistance in: •  DOM manipulation •  Utility functions (e.g. array

manipulations, access Web resource)

•  Event handling (e.g. on click, gestures)


Use of design patterns •  MVC (e.g. AngularJS) •  MVVM (e.g. KnockoutJS) •  …

•  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

Web Apps

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

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

•  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 Wrappers

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 API

Bridge between application logic (JavaScript) and

Native API

PhoneGap Application

Web App, written in JavaScript, HTML and

CSS

Native OS

Native API, sensor access, …

PhoneGap Explained: Packaging

Build options: •  Local è PhoneGap CLI •  Cloud è PhoneGap Build

Web App

Native Application

Runtimes

•  Cross-platform compatibility layer

•  Shields app form underlying differences between platforms

•  Different strategies: o  Interpreted at runtime o  Compiled in advance

(source code translators)

Application Code

Runtime Environment

Operating System

•  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

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

Uses JavaScript Uses JavaScript

WebView Runtime

Renders HTML pages in chrome-less browser

Interprets JavaScript code and maps on Native API

Developer writes Web app Developer writes “native” application using JavaScript

Difference between PhoneGap and Titanium

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

•  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

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

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)

•  No programming skills required •  Often ability to develop in cloud

•  Limited UI capabilities •  Limited overall possibilities

App Factories

App Factories: Examples

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

JavaScript frameworks? •  As stand-alone application èalways supported (they depend on PhoneGap) •  As Web App èdepends on browser capabilities

Technology CPT iOS Android WP8JavaScript*Framework Ionic x x x

Sencha7Touch72 x x xWeb3to3native*Wrapper PhoneGap x x xRuntime Titanium x x SOONSource*Code*Translator Eqela x x xSource*Code*Translator Xamarin7 x x xand*Runtime Qt x x x

Adobe7AIR x x xUnity x x x

App*Factory AppMakr x x7 /ViziApps x x /

Development Infrastructure Technology CPTJavaScript*Framework Ionic

Sencha0Touch02Web3to3native*Wrapper PhoneGapRuntime TitaniumSource*Code*Translator EqelaSource*Code*Translator Xamarin0and*Runtime Qt

Adobe0AIRUnity

App*Factory AppMakrViziApps

Native iOSAndroidWp8

Programming)LanguageJavaScriptJavaScript)(and)drag)and)drop))JavaScript,)HTML,)CSS,…)JavaScriptEqelaC#C++/QMLActionScriptC#,)JavaScriptdrag)and)dropdrag)and)drop

ObjectiveGC,)SwiftJavaC#



Adobe0AIRUnity



Programming)environmentIntelliJ)Plugin,)any)web)IDE,…Sencha)Architect,))IntelliJ)plugin,)any)web)IDE,…IntelliJ)Plugin,)any)web)IDE,…Titanium)IDE)Eqela)IDEXamarin)IDEQT)CreatorAdobe)Flash)BuilderVisual)Studio)PluginAppMakr)cloud)development)tool)ViziApps)cloud)development)tool

XcodeAndroid)StudioVisual)Studios



Adobe0AIRUnity



Licence&costFREE$3855/year&(5developers)FREE$39/month$1000/year$25/month$174/monthFREEone&time&$1500+$75/month$9/month$99/month

$99/year,&30%&of&app&revenuone&time&$25,&30%&of&app&revenue&$99/year,&30%&of&app&revenu





UI Capabilities

UI Capabilities: Web Apps and Web-To-Native Wrappers •  Easy UI development

o  CSS templates o  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  2D and 3D acceleration o  …

UI Capabilities: App Factories

•  Automatic layout by drag and drop mechanisms •  Limited possibilities and customizability

Device Feature Access: Web Apps •  Depends on browser capabilities

BRON: http://www.caniuse.com

Safari Chrome IE-MobileAccelerometer / / /Camera / / /Contacts / / /File +/9 x +/9Geolocation x x xMedia / / /Network soon x /Notification / x /Storage x x x

Safari Chrome IE-MobileAccelerometer / / /Camera / / /Contacts / / /File +/9 x +/9Geolocation x x xMedia / / /Network soon x /Notification / x /Storage x x x

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  Phonegap webview o  Translated code o  …

•  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  Response time o  Memory usage o  CPU usage o  Battery usage o  Disk space o  … ?

Measuring Methods

Response Times Instruments tool: Time Profiler

ADB Console Log Visual Studio Console Log

Memory Usage Instruments tool: Activity Monitor

Little Eye Tool Windows Phone Power Tools

CPU Usage Instruments tool: Activity Monitor

ADB Shell: TOP command

Windows Phone Power Tools

Battery Usage Instruments tool: Energy Diagnostics

Little Eye Tool 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

21%$

10%$

3%$

2%$

64%$

Market'Research'CPTs'

PhoneGap$

Xamarin$

Titanium$

Adobe$Air$

Na<ve/other$

Questions / Remarks?

classification and selection of cross-platform tools meeting...• mvvm (e.g. knockoutjs) • …...

Documents