Revised v4Presenter

Web or Native for Mobile Development?

Android
Reto Meier
@retomeier
Web
Michael Mahemoff
@mahemoff
The Question
Should you build you mobile apps as HTML5 apps or
native apps
The !ns"er
YES
The #ase for $ative !pps
%f you can&t thin' of a "ay to improve your
"eb app usin( !ndroid S)* features+++
%f you can&t thin' of a "ay to improve your
"eb app usin( !ndroid S)* features+++
You're doing it wrong!
Standards ,ill !l"ays Trail %nnovation
Hard"are support
Rich %nte(ration
%mpendin( Hard"are Standards
Location -ased Services
Microphone input
!ccelerometers
Hard"are is Rapidly .volvin(
/0012 Multi3touch4 accelerometers4 microphone
/0052 6ideo4 compass4 bac'(round apps
/0072 -luetooth4 multiple screen si8es
/0902 :yroscopes4 front facin( cameras4 $;#

/0992
$e" Hard"are Platforms
Tablets
Televisions
#ars Picture ;rames ;rid(es ,ashin( Machines
#urrently Supported Hard"are
Smartphones < Tablets < Television
Microphone
6ideo camera =front facin( < rear facin(>
Sensors =compass4 (yro4 accelerometers4 li(ht

Multi3touch
Telephony and S%P stac's

-luetooth
%ntents -ased )ata Sharin(
Lets ?rd parties e@chan(e data
Lets apps e@tend each other
AbiBuity
,id(et4 Live ;olders4 Live ,allpapers
Quic' Search -o@
$otifications
!bility to replace native apps
True -ac'(round Services
!larms
%ntent Receivers
#loud to )evice Messa(in(
-ac'(round e@ecution < concurrent apps
#urrent !ndroid Platform ;eatures
:eo services
Sensors
%nterprocess communications =%ntentsC>
-ac'(round4 scheduled4 and concurrent apps

Home screen "id(ets and Buic' search bo@

Rich multimedia

$ative =#<#DD> development

;ull database < SQLLite support

#amera and microphone access

)eep system inte(ration < replacement
$ative !pp Stren(ths
!pps that use the hard"are
!pps that inte(rate system features
!pps that "or' "ith other apps
!pps that need to be fast

!pps that are ubiBuitous

The #ase for HTML5
Remember "hen computers "ere computers
T6s "ere T6s
Mobile phones "ere thumpin( (reat bric's
;orm ;actors Roc'C
;orm ;actors Roc'
+++ for usersC
-ut less so for developers+
Modern )eveloper4
Eou need to consider +++
)es'top
Laptop
$etboo'
Smartphone
;eature phone
Tablet
T6
!s a )eveloper4 you need to
consider +++
,atch
#ar
;rid(e
AS- )es'top !Buarium
=Maybe not+>
)es'top
,indo"s
FSG
Linu@
+++
Mobile
!ndroid
iFS
-lac'-erry
,indo"s Mobile H+5
,indo"s Mobile 1 =re"rite>
Symbian
Mee(o
+++
Ho" about in /095
!nyone&s (uessC
-ut one platform is li'ely to be there2 ,eb+
,rite Fnce4 Run Many
is startin( to sound li'e a (ood idea
,eb Handles Many Aser %nterfaces
-ro"sers use a fluid layout model+
Sensible defaults4 "hether a 90cm phone or a /00cm T6
Tar(et specific platforms "ith #SS Media Queries
,eb Provides Secure Sandbo@in(
Same3ori(in policy prevents sharin( across different domains
,eb Provides Porous -oundaries
%t&s not blac'3and3"hite+
!pps IcanI share data securely 3 F!uth4 #ross3Fri(in
Resource Sharin(4 #ross3)ocument Messa(in(+
,eb Supports Permissionin(
$o" "e have rich functionality on the "eb4 e+(+ :eoLocation+
-ut not every app (ets access+
!s "ith smartphones4 bro"sers as' permission first+
So ,eb !rchitecture is :ood in Theory
Ho" about in practice
HTML5 is Ready Today
$ot /0504 $ot /0/0+ Today+
HTML5 is Ready Today
Fh and it&s fast too
Javascript Performance -enchmar'
http2<<is+(d<d!*BS
;irefo@ 0+5 =/004>2 1802ms
#hrome 1 =/090>2 10ms
)FM Renderin( -enchmar'
http2<<Ksperf+com<dom3selection3appendin(</
;irefo@ 0+5 =/004>2 L111ms =7 ops<sec>
#hrome 1 =/090>2 2ms =4H0 ops<sec>
Aser %nterface2 #anvas
#anvas2 .ffect .n(ine
HTML5 :ame Jam2 M.nterpriseM
Aser %nterface2 #SS
#ustom ;onts
Transforms
Much more+++
%nput
:eolocation
Frientation
Speech )etection
%dle )etection
)evice !P%2 #amera Microphone
http2<<flic'r+com<photos<mofetos<4?55/11?7<
$et"or'in(
Eour :randpa&s HTML2
Lin's
;orms
!Ka@2
GMLHttpReBuest
$o"2
#ross3)omain access "ith #FRS
/3,ay Streamin( "ith ,ebSoc'et
Server3Sent .vents "ith .ventSource
Fffline
!pplication #achin(
,eb Stora(e
,eb SQL )atabase
%nde@ed )atabase
;ile !ccess
%nstallable4 if you "ant to
Mobile2 Phone:ap4 Titanium4 Roll3Eour3F"n
)es'top2 :oo(le #hrome ,eb Store
!nd -esides #ompatibility +++
Fpen standards
Fpen source
.asy to dive in
Tools and library support
)iverse community
,ant to Learn More
HTML5Roc's+com
#hrome.@periments+com
,ant to Learn .ven More
http2<<"""+html5roc's+com<resources+html
&,hich& is the ,ron( Question
,eb !pps
$ear universal covera(e
)eploy once4 update instanly
$ative !pps
)eep hard"are and platform inte(ration
Support for rapid hard"are innovation

)evice and platform specific features

Fptimi8ed user e@perience
T"o :reat Tastes that Taste :reat To(ether
EesC
-uild a "eb client first to offer your app to the lar(est
possible community of users+
-uild an optimi8ed native client that levera(es platform
specific features and an optimi8ed user e@perience+
-oth Really
Hard"are access
;eel the need for speed
-ac'(round or concurrent e@ecution
System access

)eep inte(ration
Anderstand Eour !pp&s $eeds
HTML5 in $ative
Most platforms include a native ,eb 6ie" control+
%nclude ,eb 6ie" for specific features
-oo' reader2 The catalo(ue
:ame2 Hi(h scores
or use HTML5 for the entire app +++
HTML5 for .ntire !pp
,rap HTML5 app as native+
#an also use native capabilities+
$itobi Phone:ap
http2<<phone(ap+com<apps
http2<<build+phone(ap+com =private beta>
http2<<apparat+io< from A@ebu =private beta>
!ppcelerator Titanium
http2<<appcelerator+com
$ative !pps "ith HTML5
Ma'e it "or' offline+
Ase client3side stora(e "hen offline+
)on&t point to server+++pac'a(e it upC
Fr use !pplication #ache and #lient3Side Stora(e+
$ative !pps "ith HTML5
Prioriti8e platforms+
;or hi(h3priority platforms4 customise A% and incorporate
native features+
#SS Media Queries+
JavaScript ;eature )etection =Moderni8r library>+
%ntroduce native stylin(+
A% Tool'its2 Sencha Touch4 KQTouch4 KQuery Mobile +++
Questions

T"itter2
o
!retomeier "Android#
o
!ma$emoff "Web#