{Adventures in Rendering Off the Main Thread}
Simon MacDonald
@macdonst@mastodon.online
I ❤️
🤷🏾
Why do we care about the main thread?
# CHAPTER 1
Main Thread Responsibilities
Parses HTML
Builds the DOM
Parses CSS
Executes JavaScript
Responds to User Events
60 fps
16.7 ms
State of the Art
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<noscript>Bad luck / uflaks</noscript>
</body>
</html>
🤔
But what if JavaScript fails?
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<title>My App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
<noscript>Bad luck / Bad trot</noscript>
</body>
</html>
😏
JavaScript never fails, right?
1-2%
Failure Rate
Failure Reasons
Did the HTTP request for your JS fail?
Was the JS blocked by the corporate firewall?
Is something interfering with your JS?
Has the user switched off JS?
Is data saver mode turned on?
Does a browser plugin mess with your JS?
Ad blocker?
Old Browser?
Page Loads | JavaScript Failures |
---|---|
100 | 1-2 |
1,000 | 10-20 |
10,000 | 100-200 |
100,000 | 1,000-2,000 |
1,000,000 | 10,000-20,000 |
Failure Rates
some code
😰
Adventure
Reduce
Reduce your JavaScript footprint by server side rendering HTML.
1.
# CHAPTER 2
1
The server sends a "ready to be rendered" HTML response to the browser
2
The browser renders the HTML page which is now interactive for the user
3
The browser requests JavaScript code from the server
4
Our JavaScript is parsed and our page is progressively enhanced to be even more interactive
- Time to First Interaction is fast
- Better SEO
- Works on older devices and slow network connections
SSR Benefits
Photo by Rayson Tan on Unsplash
Isn't SSR slow 🐢?
No
🤓
The first lesson in rendering off the main thread is to leverage your server to do the initial render
Adventure
Reduce
Reduce your JavaScript footprint by server side rendering HTML
1.
2.
Reuse
Compose our application with re-usable components
# CHAPTER 3
🙋🏻
Can I still use a component framework when using SSR?
Yes
But…
Why use a framework when Web Components exist?
- Custom Elements ➡️ define components
- Shadow DOM ➡️ encapsulate styles
- Slots and Templates ➡️ re-use
Hello World Web Component
const template = document.createElement('template');
template.innerHTML = `
<h1>
Hello <slot name="name"></slot>
</h1>`;
class HelloWorld extends HTMLElement {
constructor() {
super();
const shadow = this.attachShadow({ mode: 'open' });
shadow.appendChild(template.content.cloneNode(true));
}
}
customElements.define('hello-world', HelloWorld);
Hello World Web Component
<hello-world>
<span slot="name">
Web Directions Summit
</span>
</hello-world>
<hello-world>
<span slot="name">Sydney</span>
</hello-world>
Hello Web Directions Summit
Hello Sydney
💁🏿♀️
Aren't you contradicting yourself? Web components need JavaScript, right?
😅
WHAT IS ENHANCE?
Author
Enhance allows developers to write components as pure functions that return HTML. Then render them on the server to deliver complete HTML immediately available to the end user.
Standards
Enhance takes care of the tedious parts, allowing you to use today’s Web Platform standards more efficiently. As new standards and platform features become generally available, Enhance will make way for them.
Progressive
Enhance allows for easy progressive enhancement so that working HTML can be further developed to add additional functionality with JavaScript.
Enhance is a web standards-based HTML framework. It’s designed to provide a dependable foundation for building lightweight, flexible, and future-proof web applications.
🤓
The second lesson in rendering off the main thread is to reuse what the browser already provides
Adventure
Reduce
Reduce your JavaScript footprint by server side rendering HTML
1.
2.
Reuse
Use the platform to provide a reusable component architecture with Web Components
3.
Recycle Offload
Expensive or time consuming tasks to web workers
# CHAPTER 4
Web Workers
Web Workers makes it possible to run a script operation in a background thread separate from the main execution thread of a web application.
Main Thread
Web Worker
onclick Event
The user clicks a button to save a new todo
postMessage()
postMessage()
onMessage Event
Sends new todo to our server and awaits the response
onMessage Event
Update our Store and emit an event for the web components to update
Todo API
// Todo API
let worker
export default function saveTodo(todo) {
if (!worker) {
worker = new Worker('worker.mjs')
worker.onmessage = mutate
}
worker.postMessage({
data: todo
})
}
const store = Store()
function mutate(result) {
const copy = Array.from(store.todos)
copy.push(result)
store.todos = copy
}
Web Worker
// worker.js
self.onmessage = async function message({ data }) {
try {
const result = await (await fetch(
`/todos/${data.key}`, {
body: payload,
credentials: 'same-origin',
headers: {
'Content-Type': 'application/json'
},
method: 'POST'
}
)).json()
self.postMessage(result)
}
catch (err) {
console.error(err)
}
}
Todo API
// Todo API
let worker
export default function saveTodo(todo) {
if (!worker) {
worker = new Worker('worker.mjs')
worker.onmessage = mutate
}
worker.postMessage({
data: todo
})
}
const store = Store()
function mutate(result) {
const copy = Array.from(store.todos)
copy.push(result)
store.todos = copy
}
Store API
// store.js
function subscribe (fn, props) {
return listeners.push(fn)
}
function unsubscribe (fn) {
return listeners.splice(listeners.indexOf(fn), 1)
}
_state.subscribe = subscribe
_state.unsubscribe = unsubscribe
function notify () {
listeners.forEach(fn => {
fn(payload)
})
}
const handler = {
set: function (obj, prop, value) {
if (obj[prop] !== value) {
obj[prop] = value
set(notify)
}
return true
}
}
const store = new Proxy(_state, handler)
Todo List Web Component
// todo-list.js
class TodosList extends HTMLElement {
constructor () {
super()
this.api = API()
this.update = this.update.bind(this)
}
connectedCallback () {
this.api.subscribe(this.update, [ 'todos' ])
}
disconnectedCallback () {
this.api.unsubscribe(this.update)
}
update ({ todos }) {
const activeTodos = todos.filter(t => !t.completed)
const completedTodos = todos.filter(t => t.completed)
this.activeTodosList.todos = activeTodos
this.completedTodosList.todos = completedTodos
}
}
🤓
The third lesson in rendering off the main thread is to use web workers for expensive operations after you've mastered the first two lessons!
In conclusion…
Reduce: the amount of JavaScript required to build your HTML
Reuse: what the platform already provides
Offload: expensive or time consuming tasks to web workers
Use JavaScript
Not a lot
Mostly for progressive enhancement
h/t Michael Pollan
Slides
https://slides.com/simonmacdonald/web-directions-summit-adventures-in-rendering-off-the-main-thread-3c8214
Thanks!
Web Directions Summit: Adventures in Rendering Off the Main Thread
By Simon MacDonald
Web Directions Summit: Adventures in Rendering Off the Main Thread
- 424