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).
7. 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
8. Chapter 1
Initial POC
Technologies:
• PhoneGap 0.7.1
• jQTouch beta / jQuery LOOKING
GOOD!
POC included:
NOT SO FAST…
Design app in HTML / CSS
Native features (PhoneGap)
RESTful services (ajax)
iPhone + Android
9. Chapter 1
First Real
Problem
Scrolling
× No support for “position: fixed”
× Can’t place fixed position elements
Alternative scrolling
• iScroll.js (3.7.1 ?!)
• 11K lines of Javascript code (yikes …)
11. Chapter 1
SUMMARY
HTML5 Native
The Good The Bad
• Cross platform dev. / bug fixes • Bad performance on Android
• New features are easy • Bad performance on BlackBerry
• New platforms are easy • Same UI for all platforms
• Small, agile team (2 dev.)
13. Chapter 2
Problem:
Slow scrolling performance Native UI
Solution:
Move fixed position
elements to native UI WebView WebView
Needed to create a
2 - way bridge
Native Tabs
HTML5 Native
14. Chapter 2
Problem:
Slow page transition
Solution:
Use native code to make
the transition, by taking
a screenshot and moving
the webview underneath
15. Chapter 2
SUMMARY
HTML5 Native
The Good The Bad
• Smooth Android exp. • Bad performance on BlackBerry
• Good iPhone exp. • Some spaghetti code
• Dedicated Android dev.
17. Chapter 3
VERY
UNIQUE
UI but… 7.0
× No HTML5 and CSS3
× No H/W acceleration
× No touch events
18. Chapter 3
WE NEED TO RETHINK OUR STRATEGY
Moving to Cross Platform MVC (BackBone.js)
Javascript HTML / CSS
Data Business
Views
Models Logic
C# / XAML
Views
19. Chapter 3
SUMMARY
HTML5 Native
The Good The Bad
• Good, native WP7 exp. • The pain of cross platform dev.
• Separated WP7 solution • Dedicated WP7 developer
20. Chapter 4 This what we do now
NATIVE UI
Services Cache
Notifications Logic
Core
Settings Usages
Data
Models Login
Objective C Java C# HTML5 / CSS
21. Chapter 4
SUMMARY
HTML5 Native
The Good The Bad
• Smooth UI • Big team, dedicated dev.
• Doesn’t rely on browser render • New features are hard
• Core sharing • Platform specific bugs
23. iPad
• 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 blog
http://engineering.linkedin.com/blog
HTML5 Native
24. iPad
• 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
HTML5 Native
25. SUMMARY 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!
26.
27. < / Thank you >
Questions?
about.me/eranzinman
eran@conduit.com
@zzeran
Eran Zinman