Multiplatform, Promises and HTML5

Nov, 7th, 2012
San Francisco, USA Max Firtman @ﬁrt

MULTIPLATFORM,
PROMISES AND
HTML5

Wednesday, November 7, 12

Watch the video with slide
synchronization on InfoQ.com!
http://www.infoq.com/presentations
/Mobile-Multiplatform-HTML5

InfoQ.com: News & Community Site
• 750,000 unique visitors/month
• Published in 4 languages (English, Chinese, Japanese and Brazilian
Portuguese)
• Post content from our QCon conferences
• News 15-20 / week
• Articles 3-4 / week
• Presentations (videos) 12-15 / week
• Interviews 2-3 / week
• Books 1 / month

Presented at QCon San Francisco
www.qconsf.com
Purpose of QCon
- to empower software development by facilitating the spread of
knowledge and innovation
Strategy
- practitioner-driven conference designed for YOU: influencers of
change and innovation in your teams
- speakers and topics driving the evolution and innovation
- connecting and catalyzing the influencers and innovators
Highlights
- attended by more than 12,000 delegates since 2007
- held in 9 cities worldwide

who am I?


who am I?
@firt
mobile+web developer


where?


speaker


books

Image from my house

50% off

Code: AUTHD
at oreilly.com


Let’s start


the track


Cross Platform mobile
10.30 Maximiliano Firtman
Multiplatform, promises and HTML5

11.40 James Pearce
Building social apps for all mobile platforms

13.30 Pete LePage
The Mobile Web Developer’s Tool belt

14.40 Christophe Coenraets
Cross-Platform Mobile Apps with PhoneGap

16.00 Robert Shilston
Developing the FT web app

how many...?


why mobile?


why cross platform?


mobile is a
mineﬁeld

Photo by World of Good (Flickr)
Malvinas / Falklands Islands


lots of platforms

Hey you!

I have a BlackBerry


Hey you!

I have a Nokia


Hey you!

I have a Windows Phone


Hey you!

I have a Surface


Hey you!

I’m using Firefox


Hey you!

I have a TouchPad and browse
with Internet Explorer!

Discrimination


Frustration


market share


cross platform


cross form-factor


Source: informationweek


cross version


http://developer.android.com/about/dashboards

QQVGA WVGA FWXGA
QVGA FWVGA Sq.HD
WQVGA VGA XGA
FWQVGA DVGA WXGA
LQVGA WDVGA WUXGA
HVGA QHD QXGA
nHD WSVGA WQXGA
HD

Give me a break!

Gold museum, Bogotá, Colombia


mobile apps

1. distribution channel
2. development platform
3. native vs. web?


distribution


distribution

‣ web: browser - url


distribution

‣ installed webapp


distribution


‣ apps


development

Native SDKs
Cross-compilers/runtime


development


Native SDKs


development


‣ apps
Native SDKs


native sdks


native sdks
‣ no cross platform


native sdks
‣ no code sharing


native sdks
‣ no code sharing

‣ high cost


native sdks
‣ no code sharing

‣ high cost

‣ high performance


native sdks
‣ no code sharing

‣ high cost

‣ high performance

‣ high ﬂexibility


cross compilers / runtimes



‣ medium cross platform



‣ code sharing



‣ code sharing

‣ lot of promises



‣ code sharing

‣ lot of promises

‣ performance analysis



‣ code sharing

‣ lot of promises

‣ performance analysis

‣ risk analysis



...

native
vs
web


native code
vs
javascript


native ui
elements
vs
html/css


browser
vs
installed apps
& stores


Photo by Ben Millett (Flickr)

Are you
sure?

Photo by Ricky David (Flickr)

What is ?


html5


advantages


advantages

‣ multiplataforma


advantages

‣ multiplataforma
‣ apis


advantages

‣ multiplataforma
‣ apis
‣ know how


advantages

‣ multiplataforma
‣ apis
‣ know how
‣ “future friendly”


disadvantages


disadvantages

‣ multiplataform


disadvantages

‣ multiplataform
‣ underestimation


disadvantages

‣ multiplataform
‣ underestimation
‣ performance


disadvantages

‣ multiplataform
‣ underestimation
‣ performance
‣ native ui


typeof html5 != boolean


some features safe


some features only on
few platforms


some features
experimental


some features with
preﬁxes


second class developers



‣ vague, non-existent or outdated info



‣ new features discovered by third-parties




‣ lack of samples




‣ lack of samples

‣ no developer tools on some platforms


mobile
html5
is slow

Picture from Simon Howden freedigitalphotos.net!

performance


performance

‣ do we need jQuery?


performance

‣ performance best practices


performance


‣ JIT compilers


performance


‣ JIT compilers

‣ hardware acceleration


battery consumption
WW 2012 – Session: Mobile Web Performance April 16–20, 2012, Lyon, Fra

50
45
40
Energy (Joules)

35
30
25
20
15
10
5
0
live.com

microsoft

weather
picasa
baidu

facebook

imdb
youtube

go.com
wall st. journal

blogger
3G setup

nytimes

tumblr

wikipedia

apple
ebay

amazon
gmail

yahoo
cnn

bbc

engadget

natgeo

wordpress
aol
Figure 6: Energy consumption of top websites
Web site Comment % Battery Trafﬁc (bytes)
life Upload Download
The resulting numbers are shown in Figure 6. Note that the e
m.gmail.com inbox 0.41 9050 12048 bars are so small that they are barely visible.
m.picasa.com
m.aol.com Who Killed My Battery ~ mobilexweb.com/go/battery
user albums
portal home
0.43
0.59
8223
11927
15475
37085
The left most column in Figure 6 shows the energy neede
set up a 3G connection and download a few bytes without any
m.amazon.com product page 0.48 9523 26838
ditional processing. Since all navigation requests must setup a
mobile.nytimes.com US home page 0.53 15386 66336
touch.facebook.com facebook wall 0.65 30214 81040 connection we treat this measurement as a baseline where th
mw.weather.com Stanford weather 0.62 38253 134531 teresting differences between web sites are above this line.
apple.com home page
Wednesday, November 7, 12 1.41 86888 716835 Figure 6 is generated from the mobile versions of the

battery consumption
Apple has no mobile website

Amazon consumes 17% energy
in a non used JS

jQuery.js ~ 4 joules (0,02%)
~5000 jQuery parsings per charge

Who Killed My Battery ~ mobilexweb.com/go/battery


now the fun part


html5

websites => url

installed webapps => url and store?

native webapps (aka hybrid) => store


native webapps

BlackBerry WebWorks


native webapps

Windows 8 HTML5 dev


native webapps

ﬁrefox apps


native webapps

chrome apps


native webapps


live demos!


so...


conclusions


conclusions
‣ Multiplatform is a key for success


conclusions
‣ HTML5 is good for cross platform on some situations


conclusions

‣ HTML5 is not a heaven


conclusions


‣ write once, deploy anywhere is... a promise


conclusions



‣ However, it’s better than 10 SDKs or than create only

elite users


conclusions




elite users
‣ On some situations you will need native SDKs


conclusions




elite users

‣ Some problems will be gone in the future


conclusions




elite users

‣ Some problems will be gone in the future

‣ Use the best technology for every situation


some last advices


performance,
performance


good practices


don’t be fanatic

photo by Kurt Christensen
(ﬂickr)

be multiplatform


be

futurefriend.ly

you can reach a good
thanks!
experience
firt.mobi
firtman@gmail.com

twitter: @firt
www.mobilexweb.com

Pictures)from)freedigitalphotos.net)

Multiplatform, Promises and HTML5

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (10)

Similar to Multiplatform, Promises and HTML5

Similar to Multiplatform, Promises and HTML5 (20)

More from C4Media

More from C4Media (20)

Recently uploaded

Recently uploaded (20)

Multiplatform, Promises and HTML5