1 / 35

Product Development, Environments & Testing

Mobile Solutions. Product Development, Environments & Testing. REALISTIC ASSESSMENT OF HYBRID APP DEVELOPMENT. Torsten Dinkheller 24 th of June 2014. Agenda. Insight about Torsten Dinkheller Hybrid Apps What's that? ▪ Hybrid vs. Native ▪ How you dare to use it

gary-boyer
Download Presentation

Product Development, Environments & Testing

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Mobile Solutions Product Development, Environments & Testing

  2. REALISTIC ASSESSMENT OF HYBRID APP DEVELOPMENT Torsten Dinkheller 24th 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 sunspider auf www.webkit.org Desktop Browser 420 iOS 7.1.1 iPhone 5 428 iPhone 5 dev mode 724 iPhone 5 chrome 1100 iPhone 4s 1558 Phone PLUS iOS

  19. JavaScript Benchmark sunspider auf www.webkit.org Desktop Browser 420 • Nexus 5 Chrome 35 766 • Samsung S3 1123 • Samsung S1 6500

  20. CSS Benchmark howtocreate.co.uk/csstest.html iPhone 5 iOS 8 3 ms iPhone 5 3 – 5 ms iPhone 5 chrome 5 – 7 ms iPhone 4s 9 – 10 ms

  21. Graphics Benchmark Sencha Touch Developer Scorecards

  22. Examples • customer center app • Hamburger Menu

  23. Conclusion X http://www.sencha.com/blog/5-myths-about-mobile-web-performance/ • 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. See Sencha Live

  30. 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

  31. 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

  32. 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

  33. 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

  34. Our Setup • GitLab • Jenkins • Sonar • Siesta • Android + iOS Build • Hockey • Enterprise Account • Stores

More Related