The document discusses ways to improve the efficiency, extensibility, and flexibility of the web, including through streams, WebAssembly, web components, service workers, and progressive web apps. Streams allow programmatic access to streams of data from the network. WebAssembly allows running compiled code in the browser faster than JavaScript. Web components define custom elements with encapsulated code. Service workers enable offline functionality and caching. Progressive web apps provide native app-like experiences through features like installing offline, home screen icons, and full screen.

1. Doing things better: A more
efficient, usable web?
Chris Mills, :

2. Who am I?
:
‣ Content lead for MDN (web docs) at
Mozilla
‣ Open web evangelist/hippy
‣ Lover of HTML/CSS/JS
‣ Accessibility whinge bag
‣ Heavy metal drummer

3. So what are we talking about?

4. The early days
:
‣ Text
‣ Static
‣ Few form factors

5. It got better
:
‣ Images AND text!
‣ Dynamic websites
‣ Better, more consistent client-side
tech
‣ Still low power on the client

6. The modern web is amazing
:
‣ The web on phones, tablets, TVs!
‣ Apps, not pages
‣ The client-side is waaaaay more
complex

7. Further improvements
:
‣ Efficiency — doing existing things
better
‣ Extensibility — making things more
customizable
‣ Flexibility — allowing the web to
work better across platforms

8. Streams

9. A pipe dream…
:
‣ Streaming is nothing new
‣ The browser does it all the time
‣ But why not use it to our advantage?

10. The Streams API
:
‣ Programatically access streams of
data from the network
‣ Processing chunks one by one
‣ Not having to wait for the whole lot

11. In addition
:
‣ You can detect when streams start or
end
‣ Cancel streams if required
‣ React to the speed a stream is being
read at

12. Writing streams
:
‣ You can also write to streams
‣ If you want to modify or generate a
stream to be read somewhere else.

13. Example
:
// Fetch the original image
fetch('./tortoise.png')
// Retrieve its body as ReadableStream
.then(response => {
const reader = response.body.getReader();

14. Example
:
return pump();
function pump() {
return reader.read().then(({ done, value }) => {
// When no more data needs to be consumed,
// close the stream
if (done) {
controller.close();
return;
}
// do something with the value here
return pump();
});
}

15. WebAssembly

16. Faster code in the browser
:
‣ JavaScript used to be slow
‣ Browser vendors worked hard on this
— V8, SpiderMonkey, etc.
‣ But there is still a limit to how fast JS
can go

17. A new JavaScript?
:
‣ Some folks from Mozilla came up
with asm.js
‣ A very optimizable subset of JS
‣ And Emscripten, a C++ -> asm.js
compiler

18. Enter WebAssembly (wasm)
:
‣ A low-level language
‣ Runs in the browser
‣ A compilation target for low-level
languages

19. Not a JS replacement
:
‣ wasm modules can run alongside JS
‣ Functions can be imported into the
JS runtime
‣ (in the same way as EcmaScript
modules)

20. Example
:
#include <stdio.h>
int main(int argc, char ** argv) {
printf("Hello Worldn");
}

21. Example
:
(func $func54 (param $var0 i32) (param
$var1 i32) (param $var2 i32) (result i32)
block (result i32)
i32.const 1
call $import0
i32.const 0
end
)
(func $func55 (param $var0 i32)
i32.const 2
call $import0
)
(data (i32.const 1024)
"0404000005"

22. Example
:
var importObject = {
imports: { imported_func: arg =>
console.log(arg) }
};
fetch('simple.wasm').then(response =>
response.arrayBuffer()
).then(bytes =>
WebAssembly.instantiate(bytes, importObject)
).then(obj => {
obj.instance.exports.exported_func();
});

23. Example
:
var importObject = {
imports: { imported_func: arg =>
console.log(arg) }
};
WebAssembly.instantiateStreaming(fetch('simple.wasm'
), importObject)
.then(obj => obj.instance.exports.exported_func());

24. Web components

25. Spaghetti code
:
‣ We write a lot of complex HTML
‣ Custom controls, media players, etc.
‣ This makes a mess in our markup
‣ And we risk conflicts

26. Frameworks do this
:
‣ But their components are locked in
‣ Can’t be transferred

27. Web components…
:
‣ …allow us to mitigate this
‣ Define custom elements
‣ With encapsulated DOM/style/script
‣ And flexible templates

28. Custom elements
:
‣ Can be autonomous (stand alone)
‣ Or customized built-ins (extend
existing elements)

29. Example
:
class EditWord extends HTMLElement {
constructor() {
// Always call super first in constructor
super();
…
}
}
customElements.define('edit-word', EditWord);
<p>My name is <edit-word>Chris</edit-word>.</p>

30. Example
:
class WordCount extends HTMLParagraphElement {
constructor() {
// Always call super first in constructor
super();
…
}
}
customElements.define('word-count', WordCount,
{ extends: 'p' });
<p is="word-count"></p>

31. Shadow DOM
:
‣ Already exists in browsers
‣ Think of a <video> element

32. Shadow DOM
:
‣ You can attach a shadow root to
certain elements
‣ Inside here, you can encapsulate all
your DOM/style/script

33. Shadow DOM
:

34. Example
:
// Create a shadow root and a span node
var shadow = this.attachShadow({mode: 'open'});
var text = document.createElement('span');
// Append span to the shadow root
shadow.appendChild(text);
// We want to count words in element's parent
var wcParent = this.parentNode;
// Update word count regularly
setInterval(function() {
var count = 'Words: ' + countWords(wcParent);
text.textContent = count;
}, 200)

35. Templates
:
‣ <template> is really useful
‣ Store markup now, add it to the DOM
later
‣ Use templates inside a Shadow DOM

36. Slots
:
‣ <slot> allows you to define a
placeholder
‣ In a template
‣ That you can fill later with whatever
you want

37. Example
:
<template id="my-paragraph">
<style>
p {
color: white;
background-color: #666;
padding: 5px;
}
</style>
<p><slot name="my-text">My default text</slot></p>
</template>

38. Example
:
customElements.define('my-paragraph',
class extends HTMLElement {
constructor() {
super();
let template = document.getElementById('my-paragraph');
let templateContent = template.content;
const shadowRoot = this.attachShadow({mode: 'open'})
.appendChild(templateContent.cloneNode(true));
}
})

39. Example
:
<my-paragraph>
<span slot="my-text">Some text!</span>
</my-paragraph>

40. Service workers

41. The offline web?
:
‣ Hrm.
‣ Still doesn’t work very well offline,
does it?
‣ We had AppCache, but that was
proven to be awful

42. Service workers
:
‣ Chunks of JS that control pages
‣ Registered against pages
‣ Allow you to create custom
responses

43. Cache API
:
‣ Works with service workers
‣ (Although it doesn’t have to)
‣ Allows you to cache responses

44. Example
:
if('serviceWorker' in navigator) {
navigator.serviceWorker
.register('/pwa-examples/a2hs/sw.js')
.then(function() { console.log('Service
Worker Registered');
});
}

45. Example
:
self.addEventListener('install', function(e) {
e.waitUntil(
caches.open('video-store').then(function(cache) {
return cache.addAll([
'/pwa-examples/a2hs/',
'/pwa-examples/a2hs/index.html',
'/pwa-examples/a2hs/index.js',
'/pwa-examples/a2hs/style.css',
…
]);
})
);
});

46. Example
:
self.addEventListener('fetch', function(e) {
console.log(e.request.url);
e.respondWith(
caches.match(e.request).then(function(response)
{
return response || fetch(e.request);
})
);
});

47. SW use cases
:
‣ Offlining web sites using Cache
‣ Client-side compilation
‣ Handling push messages
‣ Custom templating
‣ Background synchronization
‣ On-the-fly polyfilling…

48. PWAs

49. Competing with native
:
‣ That age old battle
‣ We’ve largely got tech parity
‣ What we need is UX parity too

50. The native experience
:
‣ Installing offline
‣ Homescreen icons
‣ Occupying fullscreen

51. Progressive web apps
:
‣ Provide all of this
‣ While still using the strengths of the
web

52. Offline
:
‣ Store data offline using IndexedDB,
Web Storage, etc.
‣ Store assets offline using Service
workers + Cache API.

53. Homescreen/fullscreen
:
‣ Controlled using the web manifest
‣ “Add to homescreen” (A2HS)
supported in Fx/Chrome

54. Example
:
{
…
"display": "fullscreen",
"icons": [
{
"src": "icon/fox-icon.png",
"sizes": "192x192",
"type": "image/png"
}
],
"name": "Awesome fox pictures",
"short_name": "Foxes",
"start_url": "/pwa-examples/a2hs/index.html"
}

56. Finished!
Chris Mills, :
cmills@:.com | @chrisdavidmills

57. Credits
:
‣ Shipping containers photo by Glyn Lowe
‣ Max headroom stolen from a syfy.com article
‣ IE2 image from geek.com
‣ Pipes photo by Matt
‣ Circuit board photo by Phil Norton
‣ Component bricks photo by Sondra
‣ Brain photo by Like_the_Grand_Canyon