Classification and Selection of Cross-Platform Tools. Michiel Willocx 17/06/2015

Transcription

1 Classification and Selection of Cross-Platform Tools Michiel Willocx 17/06/2015

2 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

3 PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories

4 PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories

5 Web Apps è Mobile Websites Accessed in standard mobile browser (Chrome, Safari, ) Optimized for mobile device screen sizes

6 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

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

8 Web Apps: JavaScript Frameworks Use of design patterns MVC (e.g. AngularJS) MVVM (e.g. KnockoutJS)

9 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

10 JavaScript Frameworks: Examples

11 Web Apps: Ionic Based on è MVC Design Pattern

12 Web Apps: Ionic Focusses on look & feel and UI interaction No native skins

13 Web Apps: Sencha Touch See presentation Ruben Ability to use native skins

14 PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories

15 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

16 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

17 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,

18 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,

19 PhoneGap Explained: Packaging Native Application Web App Build options: Local è PhoneGap CLI Cloud è PhoneGap Build

20 PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories

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

22 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

23 Runtimes: examples

24 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

25 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

26 PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories

27 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

28 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

29 Source Code Translator: examples

30 Source Code Translator: Xamarin Uses Runtime Code written in C# Supported platforms: Android ios Windows Phone (OS X)

31 Xamarin explained: development

32 Xamarin explained: development Xamarin.Forms (out now) Xamarin.Mobile (in development)

33 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

34 Source Code Translator: Eqela

35 PART 1: Classification of CPT s Web Apps (JavaScript Frameworks) Web-to-native Wrappers Runtimes Source code translators App Factories

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

37 App Factories No programming skills required Often ability to develop in cloud Limited UI capabilities Limited overall possibilities

38 App Factories: Examples

39 App Factories: Examples

40 PART 2: CPT Selection Criteria

41 PART 2: CPT Selection Criteria

42 PART 2: CPT Selection Criteria Development infrastructure Available device feature access Layout capabilities Code reusability, platform specific code, Security features Performance

43 PART 2: CPT Selection Criteria Development infrastructure Available device feature access Layout capabilities Code reusability, platform specific code, Security features Performance Now Future Work

44 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

45 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#

46 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

47 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&

48 UI Capabilities

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

50 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

51 UI Capabilities: App Factories Automatic layout by drag and drop mechanisms Limited possibilities and customizability

52 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:

53 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

54 Device Feature Access: Stand-alone applications No Platform Specific Code needed All device feature code is platform specific

55 PART 3: Performance Analysis

56 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

57

58 Performance analysis: how? Test on different platforms Covers 98% of the market

59 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?

60 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

61 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$

62 Questions / Remarks?