Upload
jan-jongboom
View
1.191
Download
1
Embed Size (px)
DESCRIPTION
Or why HTML5 is more awesome than 2 years ago. Presented during DiGi's Challenge for Change in Kuala Lumpur on February 28, 2014.
Citation preview
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
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
Access to webcam and microphone stream
getUserMedia
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?