97
HTML5 for mobile @janjongboom

HTML5 for mobile - DiGi Challenge for Change

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

Page 1: HTML5 for mobile - DiGi Challenge for Change

HTML5 for mobile

@janjongboom

Page 2: HTML5 for mobile - DiGi Challenge for Change

@janjongboom

Page 3: HTML5 for mobile - DiGi Challenge for Change

@janjongboom

Page 4: HTML5 for mobile - DiGi Challenge for Change

@janjongboom

Page 5: HTML5 for mobile - DiGi Challenge for Change
Page 6: HTML5 for mobile - DiGi Challenge for Change
Page 7: HTML5 for mobile - DiGi Challenge for Change
Page 8: HTML5 for mobile - DiGi Challenge for Change

SO MANY PLATFORMS

Page 9: HTML5 for mobile - DiGi Challenge for Change

SO MANY PLATFORMSGotta catch them all!

Page 10: HTML5 for mobile - DiGi Challenge for Change

The world is divided

Page 11: HTML5 for mobile - DiGi Challenge for Change

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

Page 12: HTML5 for mobile - DiGi Challenge for Change
Page 13: HTML5 for mobile - DiGi Challenge for Change

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

Page 14: HTML5 for mobile - DiGi Challenge for Change

Application platform

Page 15: HTML5 for mobile - DiGi Challenge for Change
Page 16: HTML5 for mobile - DiGi Challenge for Change

Apabila masa yang ketat, saya memilih web

Page 17: HTML5 for mobile - DiGi Challenge for Change

New tech available every day

Page 18: HTML5 for mobile - DiGi Challenge for Change

New libraries availableevery day

Page 19: HTML5 for mobile - DiGi Challenge for Change

But HTML5 is SLOOOW

Page 20: HTML5 for mobile - DiGi Challenge for Change
Page 21: HTML5 for mobile - DiGi Challenge for Change

HTML5 version on 60 euro phone

Page 22: HTML5 for mobile - DiGi Challenge for Change
Page 23: HTML5 for mobile - DiGi Challenge for Change
Page 24: HTML5 for mobile - DiGi Challenge for Change

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

Page 25: HTML5 for mobile - DiGi Challenge for Change

The web is kinda broken...

Page 26: HTML5 for mobile - DiGi Challenge for Change
Page 27: HTML5 for mobile - DiGi Challenge for Change

We’re back in 1999

Page 28: HTML5 for mobile - DiGi Challenge for Change

We’re back in 1999

Page 29: HTML5 for mobile - DiGi Challenge for Change

No AJAX?!

Page 30: HTML5 for mobile - DiGi Challenge for Change
Page 31: HTML5 for mobile - DiGi Challenge for Change

The web is bad at leveraging phone capabilities

Page 32: HTML5 for mobile - DiGi Challenge for Change

And it’s also bad in of!ine

Page 33: HTML5 for mobile - DiGi Challenge for Change

This does not live up to my expectation!

Page 34: HTML5 for mobile - DiGi Challenge for Change

mobile

Page 35: HTML5 for mobile - DiGi Challenge for Change
Page 36: HTML5 for mobile - DiGi Challenge for Change

4,500,000,000

Page 37: HTML5 for mobile - DiGi Challenge for Change
Page 38: HTML5 for mobile - DiGi Challenge for Change

All the info is on the web

Page 39: HTML5 for mobile - DiGi Challenge for Change

All the info is on the web

Page 40: HTML5 for mobile - DiGi Challenge for Change

Browser engine on top of hardware

=Less overhead

=Cheaper devices

Page 41: HTML5 for mobile - DiGi Challenge for Change
Page 42: HTML5 for mobile - DiGi Challenge for Change
Page 43: HTML5 for mobile - DiGi Challenge for Change
Page 44: HTML5 for mobile - DiGi Challenge for Change

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

Page 45: HTML5 for mobile - DiGi Challenge for Change

From javascript to chipset

Page 46: HTML5 for mobile - DiGi Challenge for Change

Gecko

From javascript to chipset

Page 47: HTML5 for mobile - DiGi Challenge for Change

Gecko

Gonk

From javascript to chipset

Page 48: HTML5 for mobile - DiGi Challenge for Change

Gecko

Gonk

From javascript to chipset

Page 49: HTML5 for mobile - DiGi Challenge for Change

http://wiki.mozilla.org/WebAPI

Page 50: HTML5 for mobile - DiGi Challenge for Change
Page 51: HTML5 for mobile - DiGi Challenge for Change
Page 52: HTML5 for mobile - DiGi Challenge for Change
Page 53: HTML5 for mobile - DiGi Challenge for Change
Page 54: HTML5 for mobile - DiGi Challenge for Change

Completely built on top of HTML5

Adoption = Slow

Page 55: HTML5 for mobile - DiGi Challenge for Change
Page 56: HTML5 for mobile - DiGi Challenge for Change
Page 57: HTML5 for mobile - DiGi Challenge for Change

Of!ine

Page 58: HTML5 for mobile - DiGi Challenge for Change

1. The shell2. App content

Page 59: HTML5 for mobile - DiGi Challenge for Change

The shell

• All assets

• Distribution through:

• App store

• Publish on web server

• Changes are costly

Page 60: HTML5 for mobile - DiGi Challenge for Change

The shell

• All assets

• Distribution through:

• App store

• Publish on web server

• Changes are costly

Page 61: HTML5 for mobile - DiGi Challenge for Change

App content

• Everything your app serves up

• Pushed down from server

• Highly volatile

• Changes are cheap

Page 62: HTML5 for mobile - DiGi Challenge for Change

App content

• Everything your app serves up

• Pushed down from server

• Highly volatile

• Changes are cheap

Page 63: HTML5 for mobile - DiGi Challenge for Change

Part I: The shell

Page 64: HTML5 for mobile - DiGi Challenge for Change

Packaging

Page 65: HTML5 for mobile - DiGi Challenge for Change

Packaging

Page 66: HTML5 for mobile - DiGi Challenge for Change

AppCache: a more web’y approach

Page 67: HTML5 for mobile - DiGi Challenge for Change
Page 68: HTML5 for mobile - DiGi Challenge for Change
Page 69: HTML5 for mobile - DiGi Challenge for Change
Page 70: HTML5 for mobile - DiGi Challenge for Change
Page 71: HTML5 for mobile - DiGi Challenge for Change

example.appcache

Serve as text/cache-manifest

Page 72: HTML5 for mobile - DiGi Challenge for Change

example.appcache

Serve as text/cache-manifest

Page 73: HTML5 for mobile - DiGi Challenge for Change

example.appcache

Serve as text/cache-manifest

Page 74: HTML5 for mobile - DiGi Challenge for Change

How AppCache works

Page 75: HTML5 for mobile - DiGi Challenge for Change
Page 76: HTML5 for mobile - DiGi Challenge for Change

I NEED AN ADULT!

Page 77: HTML5 for mobile - DiGi Challenge for Change

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)

Page 78: HTML5 for mobile - DiGi Challenge for Change

Part II: App content

Page 79: HTML5 for mobile - DiGi Challenge for Change

A simple AJAX request

Page 80: HTML5 for mobile - DiGi Challenge for Change

A simple AJAX request

Page 81: HTML5 for mobile - DiGi Challenge for Change

A simple AJAX request

Page 82: HTML5 for mobile - DiGi Challenge for Change

Naive caching with localStorage

Page 83: HTML5 for mobile - DiGi Challenge for Change

Naive caching with localStorage

Page 84: HTML5 for mobile - DiGi Challenge for Change

Naive caching with localStorage

Page 85: HTML5 for mobile - DiGi Challenge for Change

Making it less naive

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

• Wrap around current AJAX lib

• Expiration dates

• Of!ine -> ignore expiration date

Page 86: HTML5 for mobile - DiGi Challenge for Change

It’s awesome!

Every person in the audience today

Page 87: HTML5 for mobile - DiGi Challenge for Change

WebRTCPeer to Peer communication

between web browsers

Page 88: HTML5 for mobile - DiGi Challenge for Change

Real time communicationNo server connectionNo plugins requiredStream data

Page 89: HTML5 for mobile - DiGi Challenge for Change

https://appear.in/digi

Page 90: HTML5 for mobile - DiGi Challenge for Change

Access to webcam and microphone stream

getUserMedia

Page 91: HTML5 for mobile - DiGi Challenge for Change
Page 92: HTML5 for mobile - DiGi Challenge for Change

Live green screenbit.ly/1k8tEvM

Page 94: HTML5 for mobile - DiGi Challenge for Change

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

Page 95: HTML5 for mobile - DiGi Challenge for Change

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

Page 96: HTML5 for mobile - DiGi Challenge for Change

Thank you!

slideshare.net/janjongboom

Page 97: HTML5 for mobile - DiGi Challenge for Change

slideshare.net/janjongboom

Questions?