Your SlideShare is downloading. ×
0
HTML5 BEYOND THE HYPE: LET’S MAKE IT WORK

?
!
Christian Heilmann, Mozilla (@codepo8)

Hungarian Web Development conferenc...
WHAT IS HTML5?

http://www.flickr.com/photos/37031529@N00/4468724263/
PROMISES OF HTML5
REALITIES OF HTML5
"CAN HTML5 COMPETE WITH NATIVE?"

developereconomics.com/downloads/can-html5-compete-native/
LACK OF APIS
!
!

“63% of HTML5 mobile developers go direct
to browser when developing a mobile
website or app. The browse...
NO FIRST CLASS CITIZEN STATE
“37% of Android apps could be
implemented using HTML5 via the
Mobile browser, 49% via Phonega...
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…
RE-INVENTING FLASH
“There comes a time in every URL’s
life where it needs to decide
whether it wants to be a
powerpoint, a...
BENEFITS OF THE WEB…
MILLIONS OF DEVELOPERS
INCREDIBLE REACH
CUSTOMISABLE EXPERIENCES
ATOMIC UPDATES
APP STORE INDEPENDENCE
TACKLING HTML5 ISSUES…
SOME FACTS…
★

Released in eight countries: Spain, Poland, Venezuela,
Peru, Colombia, Brazil, Mexico, Germany

★

18 mobil...
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
Vibration API, Screen Orientation, Geolocation API, Mouse Lock
API, Open WebApps, Network Information API, Batter...
BATTERY STATUS
API
BATTERY STATUS API
var battery = navigator.battery;

if (battery) {

var batteryLevel = Math.round(battery.level * 100) + ...
VIBRATION API
VIBRATION API
// Vibrate for one second

navigator.vibrate(1000);



// Vibration pattern [vibrationTime, pause,…]

naviga...
NETWORK
INFORMATION API
NETWORK INFORMATION API

var connection = window.navigator.mozConnection,

online = connection.bandwidth > 0,

metered = c...
PAGE VISIBILITY
PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {

if (document.hidden) {

console.log("App is h...
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/
RE-USE WITH PHONEGAP

https://build.phonegap.com/
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
BE FEARLESS…
FIREFOX OS APP WORKSHOP!
Saturday, November 23rd
Budapest, Hungary.
Port your app with our experts
• Get a phone to deploy...
THANKS!

CHRIS HEILMANN
@CODEPO8
Hungarian Web Conference: HTML5 beyond the hype - let's make it work!
Upcoming SlideShare
Loading in...5
×

Hungarian Web Conference: HTML5 beyond the hype - let's make it work!

6,593

Published on

We're past the honeymoon period of HTML5 by now. The excitement of inflated promises is over and we start wondering what to do – use HTML5 or just build an iOS app instead? In this talk Chris Heilmann of Mozilla will show what HTML5 is really good for, what its problems are, what causes a lot of these problems and how new operating systems like Firefox OS work and conversion tools like PhoneGap work around these issues. You'll see the now of HTML5 and what is cooking in the kitchens of browser makers and standards bodies that will developing and deploying apps cross-platform much easier than it is now. We have a lot of tools at our disposal, we simply need to dare to use them.

Published in: Education, Technology
2 Comments
8 Likes
Statistics
Notes
No Downloads
Views
Total Views
6,593
On Slideshare
0
From Embeds
0
Number of Embeds
42
Actions
Shares
0
Downloads
22
Comments
2
Likes
8
Embeds 0
No embeds

No notes for slide

Transcript of "Hungarian Web Conference: HTML5 beyond the hype - let's make it work!"

  1. 1. HTML5 BEYOND THE HYPE: LET’S MAKE IT WORK ? ! Christian Heilmann, Mozilla (@codepo8) Hungarian Web Development conference, Budapest, 8/11/13
  2. 2. WHAT IS HTML5? http://www.flickr.com/photos/37031529@N00/4468724263/
  3. 3. PROMISES OF HTML5
  4. 4. REALITIES OF HTML5
  5. 5. "CAN HTML5 COMPETE WITH NATIVE?" developereconomics.com/downloads/can-html5-compete-native/
  6. 6. LACK OF APIS ! ! “63% of HTML5 mobile developers go direct to browser when developing a mobile website or app. The browser is the most popular route to the mobile market. Yet 61% of Android apps (US) cannot be implemented via the mobile browser due to lack of APIs.” developereconomics.com/downloads/can-html5-compete-native/
  7. 7. NO FIRST CLASS CITIZEN STATE “37% of Android apps could be implemented using HTML5 via the Mobile browser, 49% via Phonegap, 63% via Appcelerator and 98% via Firefox OS.” developereconomics.com/downloads/can-html5-compete-native/
  8. 8. BROKEN COMPARISONS http://www.flickr.com/photos/orangeacid/212833788 http://www.flickr.com/photos/richardnorth/7037250865
  9. 9. 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
  10. 10. 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.
  11. 11. 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…
  12. 12. WORRYING TRENDS…
  13. 13. GET OUR APP! We don’t care if you came from an email or entered a URL, this is about us, not you!
  14. 14. CREATING A FIRST WORLD WEB…
  15. 15. RE-INVENTING FLASH “There comes a time in every URL’s life where it needs to decide whether it wants to be a powerpoint, a movie, or an actual website.” "Scroll Hijacking" by Trent Walton http://trentwalton.com/2013/10/23/scroll-hijacking/
  16. 16. BENEFITS OF THE WEB…
  17. 17. MILLIONS OF DEVELOPERS
  18. 18. INCREDIBLE REACH
  19. 19. CUSTOMISABLE EXPERIENCES
  20. 20. ATOMIC UPDATES
  21. 21. APP STORE INDEPENDENCE
  22. 22. TACKLING HTML5 ISSUES…
  23. 23. SOME FACTS… ★ Released in eight countries: Spain, Poland, Venezuela, Peru, Colombia, Brazil, Mexico, Germany ★ 18 mobile operator partners, 7 hardware partners ★ Hardware options: Alcatel One Touch Fire, ZTE Open, Geeksphone Keon, Geeksphone Peak, LG Fireweb ★ 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
  24. 24. SECURITY
  25. 25. 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"
 }

  26. 26. 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
  27. 27. PERMISSIONS "permissions": {
 "contacts": {
 "description": "Required for autocompletion in the share screen",
 "access": "readcreate"
 },
 "alarms": {
 "description": "Required to schedule notifications"
 }
 }
  28. 28. HARDWARE ACCESS
  29. 29. WEB APIS 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
  30. 30. BATTERY STATUS API
  31. 31. 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); }
  32. 32. VIBRATION API
  33. 33. VIBRATION API // Vibrate for one second
 navigator.vibrate(1000);
 
 // Vibration pattern [vibrationTime, pause,…]
 navigator.vibrate([200, 100, 200, 100]);
 
 // Vibrate for 5 seconds
 navigator.vibrate(5000);
 
 // Turn off vibration
 navigator.vibrate(0);
  34. 34. NETWORK INFORMATION API
  35. 35. NETWORK INFORMATION API var connection = window.navigator.mozConnection,
 online = connection.bandwidth > 0,
 metered = connection.metered;

  36. 36. PAGE VISIBILITY
  37. 37. PAGE VISIBILITY document.addEventListener("visibilitychange", function () {
 if (document.hidden) {
 console.log("App is hidden");
 }
 else {
 console.log("App has focus");
 }
 });
  38. 38. WEB ACTIVITIES
  39. 39. GET A PHOTO?
  40. 40. APP DISTRIBUTION
  41. 41. FIREFOX OS MARKETPLACE https://marketplace.firefox.com/
  42. 42. FXOS, ANDROID, WINDOWS, OSX, LINUX https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/
  43. 43. INSTALL FROM THE WEB…
  44. 44. TOOLING
  45. 45. DEVELOPER ENVIRONMENT
  46. 46. GOOGLE WEBDESIGNER https://www.google.com/webdesigner
  47. 47. ADOBE EDGE SUITE http://html.adobe.com/edge/
  48. 48. SENCHA http://www.sencha.com/products/touch/
  49. 49. RE-USE WITH PHONEGAP https://build.phonegap.com/
  50. 50. WHAT’S COOKING?
  51. 51. WEBCOMPONENTS http://customelements.io
  52. 52. WEBCOMPONENTS http://www.polymer-project.org/
  53. 53. MOZILLA BRICK http://mozilla.github.io/brick/
  54. 54. WEBRTC http://www.google.com/hangouts/
  55. 55. WEBRTC https://togetherjs.com/
  56. 56. ASM.JS / EMSCRIPTEN https://blog.mozilla.org/blog/2013/03/27/mozilla-is-unlocking-the-power-ofthe-web-as-a-platform-for-gaming
  57. 57. USING HTML5 NOW
  58. 58. STAY UP TO DATE
  59. 59. MOBILE AND OFFLINE FIRST
  60. 60. FLEXIBILITY IS THE SUPERPOWER
  61. 61. BE FEARLESS…
  62. 62. FIREFOX OS APP WORKSHOP! Saturday, November 23rd Budapest, Hungary. Port your app with our experts • Get a phone to deploy and test your app on! • Food + Drinks is sorted - you need to sort out travel and hotel • Talk to the local Mozillians outside! • https://mozhacks.wufoo.com/forms/r81kw881ft7mgd/
  63. 63. 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.

×