Your SlideShare is downloading. ×
0
THE STATE OF HTML5

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

?
!
Christian Heilmann, Mozilla (@codepo8)
Samsung Devcon, San Francisco 2013
WHAT IS HTML5?

http://www.flickr.com/photos/37031529@N00/4468724263/
PROMISES OF HTML5
REALITIES OF HTML5
HTML5 WORRIES…
★

Performance

★

Fragmentation

★

Security

★

Access to hardware

★

Painless app updates

★

Developme...
BROKEN COMPARISONS

http://www.flickr.com/photos/orangeacid/212833788
http://www.flickr.com/photos/richardnorth/7037250865
DIFFERENT GOALS…
NATIVE APPS

WEB APPS / SITES

Provide the best experience in a
defined environment.

Reach the largest a...
DIFFERENT APPROACHES…
NATIVE ENVIRONMENTS THE WEB
Innovate with closed, patented
technology and secret features
to gain ad...
For an HTML5 solution to be as
good as a native implementation, it
would only have to work on one
browser, on one operatin...
WORRYING TRENDS…
GET OUR APP!
We don’t care if you
came from an email
or entered a URL, this
is about us, not you!
CREATING A FIRST WORLD WEB…
BENEFITS OF THE WEB…
MILLIONS OF DEVELOPERS
INCREDIBLE REACH
CUSTOMISABLE EXPERIENCES
ATOMIC UPDATES
APP STORE INDEPENDENCE
TACKLING HTML5 ISSUES…
SOME FACTS…
★

Released in six countries: Spain, Poland, Venezuela and
Columbia, Brazil and Mexico (more to come very soon...
SECURITY
APPLICATION MANIFEST
{

"version": "1.0",

"name": "MozillaBall",

"description": "Exciting Open Web development action!",...
APPLICATIONS
Web Content

Privileged Web App

Regular web content

More access, more
responsibility

Installed Web App

Ce...
PERMISSIONS
"permissions": {

"contacts": {

"description": "Required for autocompletion in the share screen",

"access": ...
HARDWARE
ACCESS
WEB APIS (FOR ALL)
Vibration API, Screen Orientation, Geolocation API, Mouse Lock
API, Open WebApps, Network Information A...
BATTERY STATUS
API
BATTERY STATUS API
var battery = navigator.battery;

if (battery) {

var batteryLevel = Math.round(battery.level * 100) + ...
WEB
ACTIVITIES
GET A PHOTO?
APP
DISTRIBUTION
FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/
FXOS, ANDROID, WINDOWS, OSX, LINUX

https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/
INSTALL FROM THE WEB…
TOOLING
DEVELOPER ENVIRONMENT
GOOGLE WEBDESIGNER

https://www.google.com/webdesigner
ADOBE EDGE SUITE

http://html.adobe.com/edge/
SENCHA

http://www.sencha.com/products/touch/
WHAT’S COOKING?
WEBCOMPONENTS

http://customelements.io
WEBCOMPONENTS

http://www.polymer-project.org/
MOZILLA BRICK

http://mozilla.github.io/brick/
WEBRTC

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

https://togetherjs.com/
ASM.JS / EMSCRIPTEN

https://blog.mozilla.org/blog/2013/03/27/mozilla-is-unlocking-the-power-ofthe-web-as-a-platform-for-g...
USING
HTML5 NOW
STAY UP TO DATE
MOBILE AND OFFLINE FIRST
FLEXIBILITY IS THE SUPERPOWER
RE-USE WITH PHONEGAP

https://build.phonegap.com/
BE FEARLESS…
THANKS!

CHRIS HEILMANN
@CODEPO8
Samsung Devcon - State of HTML5 - Chris Heilmann
Upcoming SlideShare
Loading in...5
×

Samsung Devcon - State of HTML5 - Chris Heilmann

26,578

Published on

Screencast is available on YouTube: https://www.youtube.com/watch?v=8Hq22HdEznM

Published in: Education, Technology
0 Comments
50 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
26,578
On Slideshare
0
From Embeds
0
Number of Embeds
14
Actions
Shares
0
Downloads
298
Comments
0
Likes
50
Embeds 0
No embeds

No notes for slide

Transcript of "Samsung Devcon - State of HTML5 - Chris Heilmann"

  1. 1. THE STATE OF HTML5 ? ! Christian Heilmann, Mozilla (@codepo8) Samsung Devcon, San Francisco 2013
  2. 2. THE STATE OF HTML5 ? ! Christian Heilmann, Mozilla (@codepo8) Samsung Devcon, San Francisco 2013
  3. 3. WHAT IS HTML5? http://www.flickr.com/photos/37031529@N00/4468724263/
  4. 4. PROMISES OF HTML5
  5. 5. REALITIES OF HTML5
  6. 6. HTML5 WORRIES… ★ Performance ★ Fragmentation ★ Security ★ Access to hardware ★ Painless app updates ★ Development environment
  7. 7. BROKEN COMPARISONS http://www.flickr.com/photos/orangeacid/212833788 http://www.flickr.com/photos/richardnorth/7037250865
  8. 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. 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. 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. 11. WORRYING TRENDS…
  12. 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. 13. CREATING A FIRST WORLD WEB…
  14. 14. BENEFITS OF THE WEB…
  15. 15. MILLIONS OF DEVELOPERS
  16. 16. INCREDIBLE REACH
  17. 17. CUSTOMISABLE EXPERIENCES
  18. 18. ATOMIC UPDATES
  19. 19. APP STORE INDEPENDENCE
  20. 20. TACKLING HTML5 ISSUES…
  21. 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. 22. SECURITY
  23. 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. 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. 25. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  26. 26. HARDWARE ACCESS
  27. 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. 28. BATTERY STATUS API
  29. 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. 30. WEB ACTIVITIES
  31. 31. GET A PHOTO?
  32. 32. APP DISTRIBUTION
  33. 33. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  34. 34. FXOS, ANDROID, WINDOWS, OSX, LINUX https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/
  35. 35. INSTALL FROM THE WEB…
  36. 36. TOOLING
  37. 37. DEVELOPER ENVIRONMENT
  38. 38. GOOGLE WEBDESIGNER https://www.google.com/webdesigner
  39. 39. ADOBE EDGE SUITE http://html.adobe.com/edge/
  40. 40. SENCHA http://www.sencha.com/products/touch/
  41. 41. WHAT’S COOKING?
  42. 42. WEBCOMPONENTS http://customelements.io
  43. 43. WEBCOMPONENTS http://www.polymer-project.org/
  44. 44. MOZILLA BRICK http://mozilla.github.io/brick/
  45. 45. WEBRTC http://www.google.com/hangouts/
  46. 46. WEBRTC https://togetherjs.com/
  47. 47. ASM.JS / EMSCRIPTEN https://blog.mozilla.org/blog/2013/03/27/mozilla-is-unlocking-the-power-ofthe-web-as-a-platform-for-gaming
  48. 48. USING HTML5 NOW
  49. 49. STAY UP TO DATE
  50. 50. MOBILE AND OFFLINE FIRST
  51. 51. FLEXIBILITY IS THE SUPERPOWER
  52. 52. RE-USE WITH PHONEGAP https://build.phonegap.com/
  53. 53. BE FEARLESS…
  54. 54. THANKS! CHRIS HEILMANN @CODEPO8
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×