1 Product Development, Environments & Testing Mobile Solutions

2 REALISTIC ASSESSMENT OF HYBRID APP DEVELOPMENT Torsten Dinkheller 24 th 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

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 ms  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 development/ development/  Android 4.4: Chromium 30 (stock browser + remote debugging)  read

13 TOP 6 management items  Time  first version % 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

16 HTML Benchmark html5test.com

17 JavaScript Benchmark sunspider auf Phone and iOS

18 JavaScript Benchmark Desktop Browser420 iOS iPhone 5428 iPhone 5 dev mode 724 iPhone 5 chrome1100 iPhone 4s1558 sunspider auf Phone PLUS iOS

19 JavaScript Benchmark Desktop Browser 420 Nexus 5 Chrome Samsung S31123 Samsung S16500 sunspider auf

20 CSS Benchmark iPhone 5 iOS 83 ms iPhone 53 – 5 ms iPhone 5 chrome5 – 7 ms iPhone 4s9 – 10 ms howtocreate.co.uk/csstest.html

21 Graphics Benchmark Sencha Touch Developer Scorecards

22 Examples  customer center app  Hamburger Menu

23 Conclusion 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

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  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  phonegap run android

33 Use Sencha  Installation  install NodeJS  install Sencha CMD 5  Download Sencha Touch  Setup your app  sencha generate app MyApp  sencha cordova init de.telekom.internal.MyApp MyApp  change some phonegap.local.properties  cordova plugin  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