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.
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
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
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
18. •Fortunately device API features are
gradually starting to become standardized
•We are implementing these things as they
are available
going standard
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
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
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
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
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
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