HTML5 BEYOND THE HYPE: LET’S MAKE IT WORK

?!Christian Heilmann, Mozilla (@codepo8) Hungarian Web Development conference, Budapest, 8/11/13

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

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/

BROKEN COMPARISONS

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

DIFFERENT GOALS…

NATIVE APPS WEB APPS / SITESProvide 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

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.

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…

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 movie, or an actual website.”

"Scroll Hijacking" by Trent Waltonhttp://trentwalton.com/2013/10/23/scroll-hijacking/

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

SECURITY

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" }

Privileged Web App

More access, more responsibility

Web Content

Regular web content

APPLICATIONS

Installed Web App

A regular web app

Certified Web App

Device-critical applications

PERMISSIONS

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

HARDWARE ACCESS

WEB APISVibration 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

BATTERY STATUS API

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); }

VIBRATION API

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);

NETWORK INFORMATION API

NETWORK INFORMATION API

var connection = window.navigator.mozConnection, online = connection.bandwidth > 0, metered = connection.metered;

PAGE VISIBILITY

PAGE VISIBILITY

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

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-of-the-web-as-a-platform-for-gaming

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

THANKS! CHRIS HEILMANN @CODEPO8