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.

1. HTML5 BEYOND THE HYPE: LET’S MAKE IT WORK
?
!
Christian Heilmann, Mozilla (@codepo8)
Hungarian Web Development conference, Budapest, 8/11/13

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

3. PROMISES OF HTML5

4. REALITIES OF HTML5

5. "CAN HTML5 COMPETE WITH NATIVE?"
developereconomics.com/downloads/can-html5-compete-native/

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. 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. BROKEN COMPARISONS
http://www.flickr.com/photos/orangeacid/212833788
http://www.flickr.com/photos/richardnorth/7037250865

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. 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. 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. WORRYING TRENDS…

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. CREATING A FIRST WORLD WEB…

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. BENEFITS OF THE WEB…

17. MILLIONS OF DEVELOPERS

18. INCREDIBLE REACH

19. CUSTOMISABLE EXPERIENCES

20. ATOMIC UPDATES

21. APP STORE INDEPENDENCE

22. TACKLING HTML5 ISSUES…

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. SECURITY

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. 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. PERMISSIONS
"permissions": {
"contacts": {
"description": "Required for autocompletion in the share screen",
"access": "readcreate"
},
"alarms": {
"description": "Required to schedule notifications"
}
}

28. HARDWARE
ACCESS

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. BATTERY STATUS
API

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. VIBRATION API

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. NETWORK
INFORMATION API

35. NETWORK INFORMATION API
var connection = window.navigator.mozConnection,
online = connection.bandwidth > 0,
metered = connection.metered;

36. PAGE VISIBILITY

37. PAGE VISIBILITY
document.addEventListener("visibilitychange", function () {
if (document.hidden) {
console.log("App is hidden");
}
else {
console.log("App has focus");
}
});

38. WEB
ACTIVITIES

39. GET A PHOTO?

41. APP
DISTRIBUTION

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

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

44. INSTALL FROM THE WEB…

45. TOOLING

46. DEVELOPER ENVIRONMENT

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

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

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

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

51. WHAT’S COOKING?

52. WEBCOMPONENTS
http://customelements.io

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

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

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

56. WEBRTC
https://togetherjs.com/

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

58. USING
HTML5 NOW

59. STAY UP TO DATE

60. MOBILE AND OFFLINE FIRST

61. FLEXIBILITY IS THE SUPERPOWER

62. BE FEARLESS…

63. 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/

64. THANKS!
CHRIS HEILMANN
@CODEPO8