APIsNow, and in the future

chris mills, mozillA

Get the slides!•Don’t worry about notes •You can get the slides from slideshare.net/

chrisdavidmills •Sit back and relax •Or fidget if you get bored… •Ask questions at @chrisdavidmills or

cmills@mozilla.com

who am i?•I’m Chris •Mozilla, MDN writer •Twiddling around with JS/CSS/HTML •Firefox OS and APIs •Guerrilla education •Accessibility whiner •Heavy metal drummer

APIslike, what are we talking about?

•I really mean browser JavaScript APIs •Exposing complex functionality to JS •Making the Web more powerful and useful

api, why oh why?

•For a time, we only really had a few APIs •We had DOM stuff, and XHR •(And a bunch of horrid non-standard stuff) •But the scene exploded •WHATWG, Web Apps WG, and others

api, why oh why?

•Earlier APIs added interesting new features •E.g. Geolocation, Canvas •But this still wasn’t enough

api, why oh why?

•We want to remain competitive with native •Get everything working together more

cohesively •Work offline ;-) •Deal with multimedia effectively in the

browser •Improve performance, for games, etc. •Improve internationalization

api, why oh why?

•New ECMAScript 6 features shaping APIs •None more so than promises — async

operations very important •(and maybe typed arrays)

ES6 mention

myFunction().then(function(value) { return my2ndFunction(value); }).then(function(value) { // do something else with new value }).catch(function(err) { console.log(err); });

promise me this

catching nativeapps, device apis, etc.

•Native platforms had better functionality •Hardware access •Offline •Access to core functionality •We wanted to catch up •And make it webby

web versus native

•We made this Firefox OS thing •To show what a web-based OS could be like •We invented a bunch of APIs •For fast iteration •To get to market on time •Browsers never had access

to much of this before

firefox os

•Telephony/SMS/MMS •Bluetooth/NFC •Browser •FMRadio, TV •Camera, Contacts •Device storage, Data store •Settings, installation •etc, etc.

proprietary apis

•manifest.webapp file defines app •Including permissions for sensitive APIs

•Web apps •Privileged •Certified (internal)

installing apps

manifest{ "version": "0.1", "name": "To-do alarms", "description": "My awesome open web app", "launch_path": "/index.html", "icons": { "128": "/img/icon-128.png" }, "developer": { "name": "Chris Mills", "url": "http://yourawesomeapp.com" }, "permissions": { "desktop-notification" : { "description": "Required to fire notifications" }, "alarms": { "description": "Required to schedule alarms" } }, "messages": [ { "alarm": "/index.html" }, { "notification": "/index.html" } ] }

var install = navigator.mozApps.install(manifest_url); install.onsuccess = function(data) { // App is installed };

install.onerror = function() { // App wasn't installed, info is in // install.error.name alert(install.error.name); };

Installing an app

•Fortunately device API features are gradually starting to become standardized

•We are implementing these things as they are available

going standard

•Geolocation •Device orientation •Notifications •Vibration •WebRTC/gUM for capturing media •Storage mechanisms (e.g. IndexedDB) •Battery Status

some things work

•WebNFC •Web Bluetooth •Service workers for offline (+ other stuff) •Manifest files •Permissions API •Web Speech API

coming soon

•The Web is a good thing •Progressive enhancement •No app stores •You can’t progressively enhance on native,

or cache seamlessly, or render text easily

we love web

•Next version of Firefox OS to be more webby

•Rather than trying to be native apps •Embracing the Web’s security model •Pin the Web •Save state •Packaged apps?

new plan

offlinestill a problem?

No connection = no experience

•Especially on mobile •Offline data storage •Offline asset storage •Reacting to network changes

offline is hard

•Not so bad •We have storage mechanisms (e.g.

IndexedDB, Web Storage, WebSQL) •Something available in most browsers •Plus polyfills (e.g. LocalForage)

offline data

•More of a pain •Firefox OS packaged apps installed and

available offline •This doesn’t help the web at large •We had AppCache…

offline assets

CACHE MANIFEST # v1

CACHE: css/app.css index.html js/main.js js/lib/require.js

this had promise

•It’s actually fairly useless •Too much voodoo… •Assumed a specific set of behaviours

but….

Hello service workers!

•Proxy servers that sit between app and network

•Intercepting network requests and customising responses

•Does similar things to AppCache (plus a lot more…much harder to use)

•Granular control over actions

sw are cool

if ('serviceWorker' in navigator) { navigator.serviceWorker.register('/sw-test/sw.js', { scope: '/*' }).then(function(sw) { // registration worked console.log('Registration succeeded.'); }).catch(function() { // registration failed console.log('Registration failed.'); }); }

registration

this.addEventListener('install', function(event) { event.waitUntil( caches.create('v1').then(function(cache) { return cache.add( '/sw-test/', '/sw-test/index.html', '/sw-test/style.css', '/sw-test/app.js', '/sw-test/image-list.js', '/sw-test/star-wars-logo.jpg' // etc. ); }) ); });

installation

this.addEventListener('fetch', function(event) { event.respondWith( caches.match(event.request).catch(function() { return caches.get('v1').then(function(cache) { cache.add(event.request); return event.default(); }); }).catch(function() { return caches.match('/sw-test/gallery/myLittleVader.jpg'); }) ); });

custom responses

continuityspecs working together

•Creating extra work, repetition, and confusion

•E.g. CSS and SVG functionality overlap •Led to them forming the FXTF •More care taken these days •Extensible web manifesto — modular and

explainable

silos aren’t cool

•Fetch is a good example •Similar to what XHR does •Abstracts the whole request/response model

as JS objects •So it can be used with other APIs like

Service Workers

fetch / sw

•Other specs also work well with/are based on SW: •Notifications API •Push API •Channel Messaging

•They all contain partial additions for SW

sw add-ons

navigator.serviceWorker.ready.then(function(reg) { reg.pushManager.getSubscription() .then(function(subscription) { // Enable any UI for subscribing to push messages. var endpoint = subscription.endpoint; updateStatus(endpoint,'init'); }).catch(function(err) { console.log('Error during getSubscription()', err); }); });

push

self.addEventListener('push', function(event) { event.waitUntil( self.registration.showNotification(title, { body: body, icon: icon, tag: tag }) ); });

notifications

var channel = new MessageChannel(); channel.port1.onmessage = function(e) { alert(e.data); } mySW = reg.active; mySW.postMessage('hello', [channel.port2]);

channel msg

self.onmessage = function(e) { port = e.ports[0]; } port.postMessage(‘hello');

•Web components •Readable streams

other points

mediaweb audio visuals

•Media was broken for years on the Web •Audio/video delivery needed Flash for so

long •The <video> tag took long enough

fix media

•We already mentioned WebRTC/gUM •Should solve many use cases, from simple

image and video capture to video conferencing

•What about recording? •Media Recorder API

media capture

var constraints = { audio: true, video: true };

var onSuccess = function(stream) { // do stuff with your media stream };

var onError = function(err) { console.log('The following error occurred: ' + err); }

navigator.getUserMedia(constraints, onSuccess, onError);

getusermedia

var mediaRecorder = new MediaRecorder(stream);

record.onclick = function() { mediaRecorder.start(); }

stop.onclick = function() { mediaRecorder.stop(); }

mediaRecorder.ondataavailable = function(e) { var audio = document.createElement('audio'); audio.setAttribute('controls', ''); var audioURL = window.URL.createObjectURL(e.data); audio.src = audioURL; }

media recorder

•Media Source Extensions •Encrypted Media Extensions •DRM on the Web?!? •A necessary evil, WRT services like

Netflix..? •Netflix involved in both the above specs

streaming/drm

•Web Audio API •Precise audio control •Add effects •Split and merge audio channels •Spatialization •Audio visualizations •WebMIDI coming too…

audio processing

Performancefaster and faster…

•General performance much improved •Web Workers •Emscripten/asm.js •WebGL •SIMD •WebVR (mozvr.com also good)

performance

I18ninternationalization

•The Web is international •But adapting sites for an intl. audience is a

pain •E.g. Dealing with time/date formats •And BIDI websites •But we are working on this too

i18n

var date = new Date(Date.UTC(2012, 11, 20, 3, 0, 0));

console.log(new Intl.DateTimeFormat().format(date));console.log(new Intl.DateTimeFormat('en-US').format(date)); // DateTimeFormat without arguments returns the // correct value for the language/timezone.

JavaScript i18n api•The JS Internationalization API provides

features for formatting dates/times for different languages, etc.

#content { padding-left: 12px: margin-right: 20px; }

html[dir="rtl"] #content { padding-left: 0; padding-right: 12px; margin-left: 20px; margin-right: 0; }

CSS BIDI features•BIDI websites are simpler to layout with CSS

BIDI features

#content { padding-inline-start: 12px: margin-inline-end: 20px; }

CSS BIDI features

FinitoThanks for listening!

chris mills, mozillA@chrisdavidmills, cmills@mozilla.com

•Main image: Bokeh Dandelion, by Nicolas Raymond

credits