APIsNow, and in the future discusses the evolution of browser JavaScript APIs. It describes how early APIs allowed new features like geolocation and canvas but more were needed to compete with native apps and improve multimedia, performance, and internationalization support. New APIs like Service Workers and Fetch help enable offline functionality while standards like WebRTC improve media capabilities. The talk argues the web is progressing through continued standardization of device and other APIs.

1. APIsNow, and in the future
chris mills, mozillA

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

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

4. APIslike, what are we talking about?

5. •I really mean browser JavaScript APIs
•Exposing complex functionality to JS
•Making the Web more powerful and useful
api, why oh why?

6. •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?

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

8. •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?

9. •New ECMAScript 6 features shaping APIs
•None more so than promises — async
operations very important
•(and maybe typed arrays)
ES6 mention

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

11. catching native
apps, device apis, etc.

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

13. •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

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

15. •manifest.webapp file defines app
•Including permissions for sensitive APIs
•Web apps
•Privileged
•Certified (internal)
installing apps

16. 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" }
]
}

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

18. •Fortunately device API features are
gradually starting to become standardized
•We are implementing these things as they
are available
going standard

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

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

21. •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

22. •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

23. offlinestill a problem?

24. No connection = no experience

25. •Especially on mobile
•Offline data storage
•Offline asset storage
•Reacting to network changes
offline is hard

26. •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

27. •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

28. CACHE MANIFEST
# v1
CACHE:
css/app.css
index.html
js/main.js
js/lib/require.js
this had promise

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

30. Hello service workers!

31. •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

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

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

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

35. continuityspecs working together

36. •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

37. •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

38. •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

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

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

41. 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');

42. •Web components
•Readable streams
other points

43. mediaweb audio visuals

44. •Media was broken for years on the Web
•Audio/video delivery needed Flash for so
long
•The <video> tag took long enough
fix media

45. •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

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

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

48. •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

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

50. Performancefaster and faster…

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

53. I18ninternationalization

54. •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

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

56. #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

57. #content {
padding-inline-start: 12px:
margin-inline-end: 20px;
}
CSS BIDI features

58. FinitoThanks for listening!
chris mills, mozillA@chrisdavidmills, cmills@mozilla.com

59. •Main image: Bokeh Dandelion, by Nicolas
Raymond
credits