slide1 n.
Download
Skip this Video
Loading SlideShow in 5 Seconds..
Product Development, Environments & Testing PowerPoint Presentation
Download Presentation
Product Development, Environments & Testing

Loading in 2 Seconds...

play fullscreen
1 / 35

Product Development, Environments & Testing - PowerPoint PPT Presentation


  • 134 Views
  • Uploaded on

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

loader
I am the owner, or an agent authorized to act on behalf of the owner, of the copyrighted work described.
capcha
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.While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server.


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