Realistic assessment of hybrid app development
Download
Report
Transcript Realistic assessment of hybrid app development
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