fowa 2012: native, html5, and hybrid mobile app development: real-life experiences - eran zinman

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

/ Thank you< >Questions?

@zzeran

Eran Zinman

eran@conduit.com

about.me/eranzinman