A presentation at HalfStack Charlotte in in Charlotte, NC, USA by Trent Willis
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?
In a time when frameworks and libraries make up the bulk of our web applications, it can feel like native Web APIs (the “boring” things built into the browser) are no longer helpful or relevant, but they are!
Let’s learn about some lesser-known Web APIs and exciting ways to use them to bring even more power to your applications. Along the way, we’ll also discover the joy of exploring these “lower” levels of the web platform and how they can supercharge your creative problem-solving.
for free. You
can too.