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.
Ähnlich wie Doing things better: A more efficient, usable web through streams, WebAssembly, web components, service workers and progressive web apps (20)
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
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
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();
});
}
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)
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>
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
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