1

Product Development, Environments & Testing

Mobile Solutions

2

REALISTIC ASSESSMENT OF HYBRID APP DEVELOPMENT

Torsten Dinkheller24th of June 2014

3

Agenda

INSIGHT ABOUT Torsten Dinkheller

HYBRID APPS What's that? ▪ Hybrid vs. Native ▪ How you dare to

use it THE „why to go for it“ FOR

Developers ▪ Managers PROVE IT

Benchmark ▪ Live Example (Hamburger Menu)

4

About your Speaker: Torsten Dinkheller

programming since 1981 after school worked for Nixdorf University 1997 Silicon Studios LA, USA Games Industry

1999 Piranha Bytes (Gothic) 2001 Mobile Games 2006 Nintendo DS Games

2009 first Business Smartphone App started with native programming switched to hybrid app programming (12 Apps: Mercedes Benz

Service App …)

5

Hybrid Apps

6

How does it work

http://mobile-app-strategy.appspot.com/img/diagram_hybrid.png

7

Hybrid vs. Native

Differences HTML – Rapid, cross-platform user experience (Content) Native – Power and device features (Games) Hybrid – Combine HTML + device features +

available in Stores

Limitations HTML – No DNA sequencing, Reasonable data models

Keep animations above 30 frames Native – Not by handset means Hybrid – Same as HTML

8

How you dare to use it?

There is a war out there Started with Steve Jobs vs. Flash Not only mobile, but smart TV, XBOX, Playstation

It‘s everywhere Not only developers, but in each company

9

Must haves in a debate

Garbage Collector Threading Animation Speed Double Click problem DOM Pollution App Size

10

Solutions

11

TOP 6 technical items

Garbage Collector Ü Since 2011 - 10ms Threading Ü So don‘t do DNA

sequencing Animation Speed Ü Use 3D transitions Double-Click problem Ü “tabstart“ or

“singletap“ event DOM Pollution Ü Don‘t be messy App Size Ü No longer

12

LATEST NEWS

iOS 8: JIT compression (gives you 20% boost) read http://developer.telerik.com/featured/why-ios-8s-wkwebview-is-a-big-deal-for-hybrid-development/

Android 4.4: Chromium 30 (stock browser + remote debugging) readhttp://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview

13

TOP 6 management items

Time first version 70 - 80% of dual pure native development all other release time 50%

Bug hunting fix only once

Design Prototyping Start small, quickly add Not sure if design follows function on mobile

14

Prove it

15

Benchmark: Today is Fast enough

http://html5test.com/results/mobile.html

16

HTML Benchmark

html5test.com

17

JavaScript Benchmark

sunspider auf www.webkit.org

Phone and iOS

18

JavaScript Benchmark

Desktop Browser 420

iOS 7.1.1

iPhone 5428

iPhone 5 dev mode724

iPhone 5 chrome1100

iPhone 4s1558

sunspider auf www.webkit.org

Phone PLUS iOS

19

JavaScript Benchmark

Desktop Browser420Nexus 5 Chrome 35

766Samsung S3

1123Samsung S1

6500

sunspider auf www.webkit.org

20

CSS Benchmark

iPhone 5 iOS 8 3 msiPhone 5 3 – 5 msiPhone 5 chrome 5 – 7 msiPhone 4s 9 – 10 ms

howtocreate.co.uk/csstest.html

21

Graphics Benchmark

Sencha Touch Developer Scorecards

22

Examples

customer center app Hamburger Menu

23

Conclusion

http://www.sencha.com/blog/5-myths-about-mobile-web-performance/

X no-one is trying to do DNA sequencing on an iPhone

most apps have a very reasonable response model

the user does something, then the app responds visually with immediacy at 30 frames per second or more, and completes a task in a few hundred milliseconds

24

Think for yourself!

Hybrid development

covers 90% of B2C Apps

25

Agenda

DEVELOPERS 4 BEST FRIENDS Framework ▪ Wrapper ▪ Tester ▪ Caretaker

26

Developer 4 Best Friends

Developer needs: a framework a community to ask a real pro for code reviews a testing framework (same language)

27

Framework: Sencha Touch

Developed for 5 years, based on EXTJS real framework MVC (upcoming MVVM) Data-binding full speed animations

Knockout JS Angular JS

28

Need help with API

http://html5test.com/results/mobile.html

29

30

See Sencha Live

31

Wrapper: PhoneGap

Installation install NodeJS npm install –g phonegap

Setup your app phonegap create my-app phonegap platform add android phonegap plug-ins add @github phonegap run android

32

Wrapper: PhoneGap

Installation install NodeJS npm install –g phonegap

Setup your app phonegap create my-app phonegap platform add android phonegap plugins add @github phonegap run android

33

Use Sencha

Installation install NodeJS install Sencha CMD 5 Download Sencha Touch 2.3.1

Setup your app sencha generate app MyApp sencha cordova init de.telekom.internal.MyApp MyApp change some phonegap.local.properties cordova plugin add @... sencha app build –run native

34

Testing with Siesta

Automated testing with phantomjs Code coverage Click flows, real user click tests (wait, monkey tests) Use JavaScript Use Sencha Touch commands to locate items

35

Our Setup

GitLab Jenkins

Sonar Siesta Android + iOS Build

Hockey Enterprise Account Stores