1. 1 Product Development, Environments & Testing Mobile Solutions

2. 2 REALISTIC ASSESSMENT OF HYBRID APP DEVELOPMENT Torsten Dinkheller 24 th of June 2014

3. 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. 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. 5 Hybrid Apps

6. 6 How does it work http://mobile-app-strategy.appspot.com/img/diagram_hybrid.png

7. 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. 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. 9 Must haves in a debate  Garbage Collector  Threading  Animation Speed  Double Click problem  DOM Pollution  App Size

10. 10 Solutions

11. 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. 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/ 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)  read http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview

13. 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. 14 Prove it

15. 15 Benchmark: Today is Fast enough http://html5test.com/results/mobile.html

16. 16 HTML Benchmark html5test.com

17. 17 JavaScript Benchmark sunspider auf www.webkit.org Phone and iOS

18. 18 JavaScript Benchmark Desktop Browser420 iOS 7.1.1 iPhone 5428 iPhone 5 dev mode 724 iPhone 5 chrome1100 iPhone 4s1558 sunspider auf www.webkit.org Phone PLUS iOS

19. 19 JavaScript Benchmark Desktop Browser 420 Nexus 5 Chrome 35 766 Samsung S31123 Samsung S16500 sunspider auf www.webkit.org

20. 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. 21 Graphics Benchmark Sencha Touch Developer Scorecards

22. 22 Examples  customer center app  Hamburger Menu

23. 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. 24 Think for yourself! Hybrid development covers 90% of B2C Apps

25. 25 Agenda  DEVELOPERS 4 BEST FRIENDS  Framework ▪ Wrapper ▪ Tester ▪ Caretaker

26. 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. 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. 28 Need help with API http://html5test.com/results/mobile.html

29. 29

30. 30 See Sencha Live

31. 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. 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. 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. 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. 35 Our Setup  GitLab  Jenkins  Sonar  Siesta  Android + iOS Build  Hockey  Enterprise Account  Stores