fowa 2012: native, html5, and hybrid mobile app development: real-life experiences - eran zinman
DESCRIPTION
Watch the video here: http://www.youtube.com/watch?v=We0byPckthQ One of the biggest dilemmas every mobile developer faces is deciding on a development strategy — should I go for native, HTML5, or hybrid mobile app development? Over the past two years, Eran has led Conduit’s mobile client development efforts, experimenting with cross-platform development in various flavors: from complete HTML5 solutions (using PhoneGap and other technologies) to hybrid solutions, semi-hybrid solutions, and fully native solutions. In this session Eran will share some real-life experiences in cross-platform development, describe changes Conduit implemented along the way, and share what the “big players” are doing in their mobile app development (e.g. Facebook, LinkedIn, and Twitter).TRANSCRIPT
Native, HTML5 & Hybrid Mobile Development
my real life experience< >
Eran Zinman @ zzeran
eran @ conduit.com
Excited and love mobile, HTML5 and web technologyWas part of the
founding team in
Conduit Mobile
Manages R&D in Conduit Mobile
ABOUT ME eran @ conduit.com@ zzeran
Mobile App Development
HYBRIDNative code +HTML5
HTML5CSS / HTML / JS
NATIVEObjective C, Java, C# / XAML, C++
theBIGBANG
Chapter 1
Chapter 1
Product requirements:• Cross-platform
Native app• Mobile web app• Web Simulator• Small, agile team
The solution:• Cross platform,
cross browser HTML5 native app & web app
Chapter 1
Initial POCTechnologies:• PhoneGap 0.7.1• jQTouch beta / jQuery
POC included: Design app in HTML /
CSS Native features
(PhoneGap) RESTful services
(ajax) iPhone + Android
LOOKING
GOOD!NOT SO FAST…
Chapter 1
Scrolling×No support for “position:
fixed”×Can’t place fixed position
elementsAlternative
scrolling • iScroll.js (3.7.1 ?!) • 11K lines of Javascript
code (yikes …)
First RealProblem
Chapter 1Inconsi
stentexperienceAll browsers WebKit
based, but:×No H/W acceleration×Slow performance×Render breaks×Missing events×Memory problems
NativeHTML5
Chapter 1
The Bad• Bad performance on Android• Bad performance on BlackBerry• Same UI for all platforms
The Good• Cross platform
dev. / bug fixes• New features are
easy• New platforms are
easy• Small, agile team (2
dev.)
SUMMARY
Performance
Chapter 2
Android
Chapter 2
Problem:Slow scrolling performance
WebView WebView
Native UI
Native Tabs
Solution:Move fixed position
elements to native UINeeded to create a 2 - way bridge
HTML5 Native
Chapter 2
Problem:Slow page transition
Solution:Use native code to make the transition, by taking a screenshot and moving the webview underneath
SUMMARYNativeHTML5
Chapter 2
The Bad• Bad performance on BlackBerry• Some spaghetti code• Dedicated Android dev.
The Good• Smooth Android
exp.• Good iPhone exp.
The Era of the Windows Phone
Chapter 3
Chapter 3
×No HTML5 and CSS3
×No H/W acceleration
×No touch events
VERY UNIQUEUI 7.0but…
Chapter 3WE NEED TO RETHINK OUR
STRATEGYMoving to Cross Platform MVC (BackBone.js)
Javascript
DataModels
Business
Logic
HTML / CSS
ViewsC# / XAML
Views
Chapter 3
NativeHTML5
The Bad• The pain of cross platform dev.• Dedicated WP7 developer
The Good• Good, native WP7
exp.• Separated WP7
solution
SUMMARY
Chapter 4
Core
T h i s w h a t w e d o n o w
HTML5 / CSS
Objective C
Java C#
NATIVE UIServic
esCache
Logic
Usages
Notifications
Login
Settings
Data Model
s
Chapter 4
NativeHTML5
The Bad• Big team, dedicated dev.• New features are hard• Platform specific bugs
The Good• Smooth UI• Doesn’t rely on
browser render• Core sharing
SUMMARY
Let’s have a look at the big players
• One of the best HTML5 hybrid apps
• Native / HTML5 combined UI
• 4MB of minified JS / HTML / CSS
• Same code for web / native
• Different Web / Native UI per platform
• Great engineering bloghttp://engineering.linkedin.com/blog
iPad
NativeHTML5
• Native → HTML5 → Native
• Server based HTML / JS / CSS
• Same code for web / native
• App got bad reviews, very slow
• Android is next to move to native UI
NativeHTML5
iPad
HTML5 vs. Native is not just about technology.
Development is an ongoing process, you can make amendments along the way and adjust your product.
Don’t be afraid to experiment and admit you were wrong!
SUMMARY