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).

1. < my real life experience >
Native, HTML5 & Hybrid Mobile Development
Eran Zinman
@ zzeran
eran @conduit.com

2. ABOUT ME
Manages R&D in Conduit Mobile

3. Mobile App Development
HTML5 NATIVE HYBRID
Objective C, Java, Native code +
CSS / HTML / JS
C# / XAML, C++ HTML5

6. Chapter 1
theBIG
BANG

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 …)

10. Chapter 1
Inconsistent
experience
All browsers WebKit based, but:
× No H/W acceleration
× Slow performance
× Render breaks
× Missing events
× Memory problems

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.)

12. Chapter 2
Android
Performance

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.

16. Chapter 3
The Era
of the
Windows
Phone

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

22. Let’s have a look
at the big players

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!

27. < / Thank you >
Questions?
about.me/eranzinman
eran@conduit.com
@zzeran
Eran Zinman