Christian Heilmann gave a talk on the state of HTML5. He discussed both the promises and realities of HTML5, including performance issues, fragmentation, security concerns, and limitations in accessing hardware. He explained that while native apps aim to provide the best experience for a single environment, web apps strive for broad reach across many devices and contexts. Firefox OS was highlighted as an open HTML5-based platform targeting emerging markets with low-cost phones. Key HTML5 features like the battery status API, web activities, and application manifests were covered.

1. THE STATE OF HTML5
?
!
Christian Heilmann, Mozilla (@codepo8)
Samsung Devcon, San Francisco 2013

2. THE STATE OF HTML5
?
!
Christian Heilmann, Mozilla (@codepo8)
Samsung Devcon, San Francisco 2013

3. WHAT IS HTML5?
http://www.flickr.com/photos/37031529@N00/4468724263/

4. PROMISES OF HTML5

5. REALITIES OF HTML5

6. HTML5 WORRIES…
★
Performance
★
Fragmentation
★
Security
★
Access to hardware
★
Painless app updates
★
Development environment

7. BROKEN COMPARISONS
http://www.flickr.com/photos/orangeacid/212833788
http://www.flickr.com/photos/richardnorth/7037250865

8. DIFFERENT GOALS…
NATIVE APPS
WEB APPS / SITES
Provide the best experience in a
defined environment.
Reach the largest amount of
users, regardless of location,
technical environment or ability.
FIXED IN A CURRENT STATE.
FIERCELY FLEXIBLE AND
ADAPTING

9. DIFFERENT APPROACHES…
NATIVE ENVIRONMENTS THE WEB
Innovate with closed, patented
technology and secret features
to gain advantage over
competitors.
Use browser maker innovation
to agree on standards, stay
backwards compatible and
vendor independent.
QUICK RESULTS, NO VISIBILITY,
CONSTANT REPLACEMENT
HIGH VISIBILITY, CONSENSUS
AND MAINTAINABILITY.

10. For an HTML5 solution to be as
good as a native implementation, it
would only have to work on one
browser, on one operating
system, on one defined piece of
hardware in a fixed specification.
!
!
This is against everything the web
stands for and not what HTML was
invented for…

11. WORRYING TRENDS…

12. GET OUR APP!
We don’t care if you
came from an email
or entered a URL, this
is about us, not you!

13. CREATING A FIRST WORLD WEB…

14. BENEFITS OF THE WEB…

15. MILLIONS OF DEVELOPERS

16. INCREDIBLE REACH

17. CUSTOMISABLE EXPERIENCES

18. ATOMIC UPDATES

19. APP STORE INDEPENDENCE

20. TACKLING HTML5 ISSUES…

21. SOME FACTS…
★
Released in six countries: Spain, Poland, Venezuela and
Columbia, Brazil and Mexico (more to come very soon)
★
18 mobile operator partners, 6 hardware partners
★
Hardware options: Alcatel One Touch Fire, ZTE Open,
Geeksphone Keon, Geeksphone Peak…
★
Aimed at emerging markets/low end market
★
Aimed to be an alternative to feature phones and
unavailable closed environments.
★
Open source - it is all on GitHub

22. SECURITY

23. APPLICATION MANIFEST
{
"version": "1.0",
"name": "MozillaBall",
"description": "Exciting Open Web development action!",
"icons": {
"16": "/img/icon-16.png",
"48": "/img/icon-48.png",
"128": "/img/icon-128.png"
},
"developer": {
"name": "Mozilla Labs",
"url": "http://mozillalabs.com"
},
"installs_allowed_from": ["*"],
"appcache_path": "/cache.manifest",
"locales": {
"es": {
"description": "¡Acción abierta emocionante del desarrollo del Web!",
"developer": {
"url": "http://es.mozillalabs.com/"
}
}
},
"default_locale": "en"
}

24. APPLICATIONS
Web Content
Privileged Web App
Regular web content
More access, more
responsibility
Installed Web App
Certified Web App
A regular web app
Device-critical
applications

25. PERMISSIONS
"permissions": {
"contacts": {
"description": "Required for autocompletion in the share screen",
"access": "readcreate"
},
"alarms": {
"description": "Required to schedule notifications"
}
}

26. HARDWARE
ACCESS

27. WEB APIS (FOR ALL)
Vibration API, Screen Orientation, Geolocation API, Mouse Lock
API, Open WebApps, Network Information API, Battery Status API,
Alarm API, Push Notifications API, WebFM API / FMRadio,
WebPayment, IndexedDB, Ambient light sensor, Proximity sensor,
Notification, Device Storage API, Browser API, TCP Socket API,
Contacts API, systemXHR, WebTelephony, WebSMS, Idle API,
Settings API, Power Management API, Mobile Connection API,
WiFi Information API, WebBluetooth, Permissions API, Network
Stats API, Camera API, Time/Clock API, Attention screen, Voicemail
https://wiki.mozilla.org/WebAPI

28. BATTERY STATUS
API

29. BATTERY STATUS API
var battery = navigator.battery;
if (battery) {
var batteryLevel = Math.round(battery.level * 100) + "%",
charging = (battery.charging)? "" : "not ",
chargingTime = parseInt(battery.chargingTime / 60, 10),
dischargingTime = parseInt(battery.dischargingTime / 60, 10);
// Set events
battery.addEventListener("levelchange", setStatus, false);
battery.addEventListener("chargingchange", setStatus, false);
battery.addEventListener("chargingtimechange", setStatus, false);
battery.addEventListener("dischargingtimechange", setStatus, false);
}

30. WEB
ACTIVITIES

31. GET A PHOTO?

33. APP
DISTRIBUTION

34. FIREFOX OS MARKETPLACE
https://marketplace.firefox.com/

35. FXOS, ANDROID, WINDOWS, OSX, LINUX
https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/

36. INSTALL FROM THE WEB…

37. TOOLING

38. DEVELOPER ENVIRONMENT

39. GOOGLE WEBDESIGNER
https://www.google.com/webdesigner

40. ADOBE EDGE SUITE
http://html.adobe.com/edge/

41. SENCHA
http://www.sencha.com/products/touch/

42. WHAT’S COOKING?

43. WEBCOMPONENTS
http://customelements.io

44. WEBCOMPONENTS
http://www.polymer-project.org/

45. MOZILLA BRICK
http://mozilla.github.io/brick/

46. WEBRTC
http://www.google.com/hangouts/

47. WEBRTC
https://togetherjs.com/

48. ASM.JS / EMSCRIPTEN
https://blog.mozilla.org/blog/2013/03/27/mozilla-is-unlocking-the-power-ofthe-web-as-a-platform-for-gaming

49. USING
HTML5 NOW

50. STAY UP TO DATE

51. MOBILE AND OFFLINE FIRST

52. FLEXIBILITY IS THE SUPERPOWER

53. RE-USE WITH PHONEGAP
https://build.phonegap.com/

54. BE FEARLESS…

55. THANKS!
CHRIS HEILMANN
@CODEPO8