Web APIs The app-changing magic (and joy) of

Raise your ✋ if you’ve built a website/app without any libraries in the last year or so

Developing with libraries is so common, many of us can’t remember what it is like to develop without them

This isn’t a bad thing

What is bad, is many of us have forgotten about the web platform

Web APIs The app-changing magic (and joy) of

Trent Willis Staff Software Engineer

What is a Web API? A programming interface built in to the browser But, maybe not all browsers Usually come from the Web Hypertext Application Technology Working Group (WHATWG) Standards

Standards help you discover new realms of web development

Web APIs help you discover new realms of web development

The MessageChannel

Execution Context Execution Context = Website, Iframe, Web/Shared Worker

Execution Context Message Channel Execution Context 2 Execution Context = Website, Iframe, Web/Shared Worker

Why would you need that? Get things off the main thread (and stay off)

Website

Website Web Worker

Website Web Worker Web Worker 2

Website Web Worker Web Worker 2

Website Web Worker Message Channel Web Worker 2

Why would you need that? Get things off the main thread (and stay off) Decouple execution contexts

Website

Website Sandboxed Iframe

Main Thread Website Sandboxed Iframe

Main Thread Worker Thread Website Sandboxed Iframe Web Worker

Main Thread Worker Thread Website Sandboxed Iframe Web Worker

Main Thread Worker Thread Website Sandboxed Iframe Web Worker

Sandybox Secure, non-blocking sandbox for arbitrary (i.e., user created) functions github.com/trentmwillis/sandybox

The real APIs are the things we learned along the way MessagePort Web Locks Iframe Shadow Realms* Web Worker Compartments** Shared Worker HTML Sanitizer*** Broadcast Channel

The real APIs are the things we learned along the way Transferable Knowledge Multi-Threading Execution Contexts

Web APIs help you learn Transferable programming skills

The FetchEvent.respondWith()

Website

Website Service Worker

Website Service Worker Server

Website Service Worker Server

Service Worker Website event.respondWith(stuff) Cache Server

Why would you need that? Caching network responses Invisible file/data manipulation Polyfilling/creative new file types Mocking non-XHR responses

Service Worker Website Server

Blackbox Service Worker Website Server

Blackbox GET image.epng* Service Worker Website .epng .epng event.respondWith(stuff) .epng .png Transform† *.epng = custom encrypted image format not supported by browsers †in this case, decrypt .epng to .png Server

Blackbox GET script.ts Service Worker Website .ts .ts event.respondWith(stuff) .ts .js Transform† †in this case, compile .ts to .js Server

TypeScript in the Browser Use <script src=“index.ts”></script> typescript-in-browser.glitch.me

Client-Side TypeScript Plugin System Only need to store the TypeScript file No server-side compilation But! breaks “progressive enhancement”

The real APIs are the things we learned along the way “Advanced” Fetch Web Crypto Response (De)Compression* Streams

The real APIs are the things we learned along the way Network request and response handling Caching Streams File Formats Graceful Degradation Creative API Usage

Web APIs help you come up with new Creative ideas

The AudioWorkletProcessor

Website

Website AudioContext

Website AudioContext AudioWorkletNode

Website Main Thread Web Audio Rendering Thread AudioContext AudioWorkletNode AudioWorkletProcessor

Website Main Thread AudioContext AudioWorkletNode AudioWorkletProcessor Web Audio Rendering Thread process()

Website Main Thread AudioContext AudioWorkletNode AudioWorkletProcessor Web Audio Rendering Thread process() Audio Source

Website Main Thread AudioContext AudioWorkletNode Audio Output (Speakers) AudioWorkletProcessor Web Audio Rendering Thread process() Audio Source

Why would you need that? Custom signal processing (effects) Off-main thread audio visualization Custom sound/noise generation

Website Main Thread AudioContext AudioWorkletNode Audio Output (Speakers) AudioWorkletProcessor Web Audio Rendering Thread process() Audio Source

Website Main Thread AudioContext AudioWorkletNode AudioWorkletProcessor Web Audio Rendering Thread process() Audio Output (Speakers)

Website Main Thread AudioContext AudioWorkletNode AudioWorkletProcessor Web Audio Rendering Thread process() RNG(-1, 1) (White Noise) Audio Output (Speakers)

DeepBreathing.app “Smooth” brown noise generation

Website Main Thread AudioContext AudioWorkletNode AudioWorkletProcessor Web Audio Rendering Thread process() RNG(-1, 1) (White Noise) Audio Output (Speakers)

AudioContext AudioWorkletNode White Noise From AudioWorkletProcessor

AudioContext AudioWorkletNode BiquadFilterNode (Lowpass) White Noise From AudioWorkletProcessor

AudioContext AudioWorkletNode BiquadFilterNode (Lowpass) White Noise From AudioWorkletProcessor BiquadFilterNode (Highpass)

AudioContext AudioWorkletNode BiquadFilterNode (Lowpass) White Noise From AudioWorkletProcessor BiquadFilterNode (Highpass) GainNode (Volume)

AudioContext White Noise From AudioWorkletProcessor BiquadFilterNode (Highpass) GainNode (Volume) Brown Noise To Speakers AudioWorkletNode BiquadFilterNode (Lowpass)

AudioContext OscillatorNode (LFO) White Noise From AudioWorkletProcessor BiquadFilterNode (Highpass) GainNode (Volume) Brown Noise To Speakers AudioWorkletNode BiquadFilterNode (Lowpass)

AudioContext GainNode (Intensity) OscillatorNode (LFO) White Noise From AudioWorkletProcessor BiquadFilterNode (Highpass) GainNode (Volume) Brown Noise To Speakers AudioWorkletNode BiquadFilterNode (Lowpass)

AudioContext Frequency GainNode (Intensity) OscillatorNode (LFO) White Noise From AudioWorkletProcessor BiquadFilterNode (Highpass) GainNode (Volume) Brown Noise To Speakers AudioWorkletNode BiquadFilterNode (Lowpass)

DeepBreathing.app “Smooth” brown noise generation Immersive experience beyond visuals Cross-browser (Safari) debugging

The real APIs are the things we learned along the way Web Audio APIs Permissions Web MIDI Vibration Media Capture and Streams

The real APIs are the things we learned along the way Audio Concepts Input Devices Signal Processing Streams, Threads, File Formats, etc.

Cool, so what?

Web APIs can unlock new architectures

Web APIs can unlock new creative power

Web APIs can unlock new perspectives

Web APIs can unlock new perspectives Why would I need that? What else is related to this? How does this improve my understanding of the web? What transferrable skills am I learning? When is the next JS trivia night?

Web APIs can restore the joy of web development. What are you going to build?