Mobile Solutions
Product Development, Environments & Testing
1
REALISTIC ASSESSMENT OF
HYBRID APP DEVELOPMENT
Torsten Dinkheller
24th of June 2014
2
Agenda
 INSIGHT ABOUT
 Torsten Dinkheller
 HYBRID APPS
 What's that? ▪ Hybrid vs. Native
 THE „why to go for it“ FOR
 Developers
 PROVE IT
 Benchmark
▪ How you dare to use it
▪ Managers
▪ Live Example (Hamburger Menu)
3
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 …)
4
Hybrid Apps
5
How does it work
http://mobile-app-strategy.appspot.com/img/diagram_hybrid.png
6
Hybrid vs. Native
 Differences
 HTML –
 Native –
 Hybrid –
 Limitations
 HTML –
 Native –
 Hybrid –
Rapid, cross-platform user experience (Content)
Power and device features (Games)
Combine HTML + device features + available in Stores
No DNA sequencing, Reasonable data models
Keep animations above 30 frames
Not by handset means
Same as HTML
7
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
8
Must haves in a debate






Garbage Collector
Threading
Animation Speed
Double Click problem
DOM Pollution
App Size
9
Solutions
10
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
11
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)
 read
http://www.mobilexweb.com/blog/android-4-4-kitkat-browser-chrome-webview
12
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
13
Prove it
14
Benchmark: Today is Fast enough
http://html5test.com/results/mobile.html
15
HTML Benchmark
html5test.com
16
JavaScript Benchmark
sunspider auf www.webkit.org
Phone and iOS
17
JavaScript Benchmark
sunspider auf www.webkit.org
Desktop
Browser 420
Phone PLUS iOS
iOS 7.1.1
iPhone 5
iPhone 5 dev mode
iPhone 5 chrome
iPhone 4s
428
724
1100
1558
18
JavaScript Benchmark
sunspider auf www.webkit.org
Desktop
Browser 420
Nexus 5 Chrome 35
Samsung S3
Samsung S1
766
1123
6500
19
CSS Benchmark
howtocreate.co.uk/csstest.html
iPhone 5 iOS 8
iPhone 5
iPhone 5 chrome
iPhone 4s
3 ms
3 – 5 ms
5 – 7 ms
9 – 10 ms
20
Graphics Benchmark
Sencha Touch Developer Scorecards
21
Examples
 customer center app
 Hamburger Menu
22
Conclusion
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
23
Think for yourself!
Hybrid development covers 90%
of B2C Apps
24
Agenda
 DEVELOPERS 4 BEST FRIENDS
 Framework
▪ Wrapper ▪ Tester ▪ Caretaker
25
Developer 4 Best Friends
 Developer needs:
 a framework
 a community to ask
 a real pro for code reviews
 a testing framework (same language)
26
Framework: Sencha Touch
 Developed for 5 years, based on EXTJS
 real framework
 MVC (upcoming MVVM)
 Data-binding
 full speed animations
 Knockout JS
 Angular JS
27
Need help with API
http://html5test.com/results/mobile.html
28
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
35