html5 for mobile - digi challenge for change

HTML5 for mobile

@janjongboom

@janjongboom

@janjongboom

@janjongboom

SO MANY PLATFORMS

SO MANY PLATFORMSGotta catch them all!

The world is divided

The world is dividedDesktop computers, tablets, laptops, game consoles, mobile phones, etc.

Write once, run.. er, once?Different APIsDifferent languagesDifferent stores

Application platform

Apabila masa yang ketat, saya memilih web

New tech available every day

New libraries availableevery day

But HTML5 is SLOOOW

HTML5 version on 60 euro phone

If performance isn’t an issue, then what is?

The web is kinda broken...

We’re back in 1999

We’re back in 1999

No AJAX?!

The web is bad at leveraging phone capabilities

And it’s also bad in of!ine

This does not live up to my expectation!

mobile

4,500,000,000

All the info is on the web

All the info is on the web

Browser engine on top of hardware

=Less overhead

=Cheaper devices

Firefox OS can’t take shortcutsEven the phone UI is built in HTML

From javascript to chipset

Gecko

From javascript to chipset

Gecko

Gonk

From javascript to chipset

Gecko

Gonk

From javascript to chipset

http://wiki.mozilla.org/WebAPI

Completely built on top of HTML5

Adoption = Slow

Of!ine

1. The shell2. App content

The shell

• All assets

• Distribution through:

• App store

• Publish on web server

• Changes are costly

The shell

• All assets

• Distribution through:

• App store

• Publish on web server

• Changes are costly

App content

• Everything your app serves up

• Pushed down from server

• Highly volatile

• Changes are cheap

App content

• Everything your app serves up

• Pushed down from server

• Highly volatile

• Changes are cheap

Part I: The shell

Packaging

Packaging

AppCache: a more web’y approach

example.appcache

Serve as text/cache-manifest

example.appcache

Serve as text/cache-manifest

example.appcache

Serve as text/cache-manifest

How AppCache works

I NEED AN ADULT!

Shit you will do wrong• Setting wrong MIME type

• Have one !le 404

• Not realizing user will always see old version !rst

• Expiration headers on appcache

• Develop with appcache enabled(tip: set wrong MIME type in dev)

Part II: App content

A simple AJAX request

A simple AJAX request

A simple AJAX request

Naive caching with localStorage

Naive caching with localStorage

Naive caching with localStorage

Making it less naive

• Use localForage: https://github.com/mozilla/localForage

• Wrap around current AJAX lib

• Expiration dates

• Of!ine -> ignore expiration date

It’s awesome!

Every person in the audience today

WebRTCPeer to Peer communication

between web browsers

Real time communicationNo server connectionNo plugins requiredStream data

https://appear.in/digi

Access to webcam and microphone stream

getUserMedia

Live green screenbit.ly/1k8tEvM

https://github.com/auduno/headtrackr

Fun with device light and WebAudiohttp://js!ddle.net/ucgq7/

I’m here all weekend(ish)I also have some Firefox OS devices

Thank you!

slideshare.net/janjongboom

slideshare.net/janjongboom

Questions?