product development, environments & testing
DESCRIPTION
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 - PowerPoint PPT PresentationTRANSCRIPT
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