Christian Heilmann (@codepo8) Campus Party Mexico

(27/06/14, Guadalajara, Mexico)

THE FUTURE OF THE OPEN WEB

AT THE START OF MY CAREER…

CHRIS <3 *

I ALWAYS WANTED TO BUILD THINGS

BUT THEY TURNED OUT DIFFERENT

I LOVED TO ASK QUESTIONS

I DIDN’T SEE MUCH FUTURE IN MY TOWN

HELLO WORLD…

HELLO WEB…

HELLO MONEY…

+

AND I WAS OUT OF THERE…

THINGS MOVED FAST…

FORM FACTORS CHANGE…

FROM DOCUMENTS TO APPS…

WHAT MAKES A GOOD APP?

• focused: fullscreen with a simple interface

• mobile: works offline

• contained: deleting the icon deletes the app

• integrated: works with the OS and has hardware access

• responsive and fast: runs smooth, can be killed without taking down the rest of the OS

PROMISES OF HTML5

LOCKOUT

NO FUN FOR YOU!

FIXING HTML ISSUES

FIREFOX OS

ARCHITECTURE

Linux/Gonk (ADB enabled)

Gecko rendering engine

Third Party HTML5 Apps

Web APIs / Web Actitivies

GAIA

- + =

PREDICTABLE HTML5 SUPPORT

WEB APIS

WEB APIS (FOR ALL)

Vibration API (W3C)

Screen Orientation

Geolocation API

Mouse Lock API (W3C)

Open WebApps

Network Information API (W3C)

Battery Status API (W3C)

Alarm API

Web Activities

Push Notifications API

WebFM API

WebPayment

IndexedDB (W3C)

Ambient light sensor

Proximity sensor

Notification

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

SECURITY

AVOIDING USER OVERLOAD…

http://smus.com/installable-webapps/

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

PERMISSIONS

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

WHAT MAKES A GREAT HTML5 APP?

DOES ONE THING AND ONE THING WELL!

FOCUSED APPS

WORKS OFFLINE

HELP US MAKE SERVICE WORKER EPIC.

CROSS-PLATFORM

INTEGRATED

https://hacks.mozilla.org/2014/03/better-integration-for-open-web-apps-on-android/

https://hacks.mozilla.org/2013/10/progress-report-on-cross-platform-open-web-apps/

ENTER CORDOVA

• Camera • Contacts • Device • Device-motion • Geolocation • Orientation • Vibration

EASY DISTRIBUTION

FIREFOX OS MARKETPLACE

https://marketplace.firefox.com/

INSTALL FROM THE WEB…

USE WHATEVER EDITOR AND ENVIRONMENT YOU ARE

HAPPY WITH!

OR…

OR…

https://www.youtube.com/watch?v=n8c34wk4OnY

JUST USE FIREFOX!

WHAT’S THE FUTURE OF THE OPEN WEB?

YOU ARE!

TOOLS I’D HAVE KILLED FOR IN THE PAST…

COLLABORATIVE EDUCATION

https://www.youtube.com/watch?v=hC9sXz3tRow

THE WEB IS YOURS!

EDUCATE YOURSELF AND OTHERS.

FIGHT FOR YOUR RIGHT TO PUBLISH, SPEAK AND SHARE

#EPNvsInternet

THANKS! CHRIS HEILMANN @CODEPO8