The shift to the edge

WebAssembly became 4th official language on the Web (following HTML, CSS and JavaScript) and was initially meant to run in the browser in order to improve client side rendering. It quickly turned out that WebAssembly on the server is also a thing and can revolutionise the way we think of web applications. Fastly and Cloudflare adopted WebAssembly and allow you to run custom code at the edge. That opens up completely new possibilities - authentication, personalised content rendering, A/B testing - you name it. Everything as close to end users as possible.

Transcript

1. The shift to the edge Jakub Wądołowski, diva-e (@jwadolowski) https://flic.kr/p/2fz8gHM
2. Web standards HTML JavaScript CSS
3. Web standards HTML JavaScript CSS WebAssembly
4. WebAssembly (WASM)
5. Buzzword bingo
6. • Binary instruction format for a conceptual machine • Compilation target for other languages • Supported in all major browsers since 2017 • Runs outside of the browser too! WebAssembly https://flic.kr/p/RJ5xEs
10. • Polyglot • Simple • Small & portable • Streamable • Fast & secure WASM features https://flic.kr/p/e7noPK
12. WebAssembly Text (WAT)
14. WASM in the wild
15. WebAssembly beyond the browser
16. • Compiler • Runtime • Wasmer • Wasmtime • Lucet • … Server-side WebAssembly https://flic.kr/p/dD6gQr
17. • Fastly Compute@Edge • Cloudflare Workers • WasmEdge Runtime (CNCF sandbox project) • AWS Lambda@Edge • … Edge computing https://flic.kr/p/2m47Daf
19. • Regular services (based on VCL) • VCL = Varnish Configuration Language • WASM services • Custom code (Rust / AssemblyScript / JavaScript) Fastly service types https://flic.kr/p/MM8vVZ
20. • Cache layer • HTTP router • Request/response normalization • Security layer • … Front door service https://flic.kr/p/nrVZ7r
21. VCL
22. WASM service development flow
23. Demo https://flic.kr/p/27Py5HK
24. • Edge Side Includes (ESI) • Templating libraries • Handlebars • Tera (~Jinja2) • Liquid • … Content stitching at the edge https://flic.kr/p/opCnxv
26. • User session awareness at CDN level • Performance improvements • Details: https://www.fastly.com/blog/simplifying- authentication-with-oauth-at-the-edge OAuth2 at the edge https://flic.kr/p/8STQmo
27. • Browser security feature • POST request on every violation • Log aggregation Content Security Policy logging https://flic.kr/p/iYxHLh
29. • Content stitching (incl. SSR) • A/B testing • Authentication • Personalisation • Ad targeting • Games?! Compute@Edge use cases https://flic.kr/p/XqGdcM
31. • Supported languages • Rust (limited availability) • AssemblyScript (Beta) • JavaScript (Beta) • Constraints • max 32 backend requests • max 50 MB binary • max 2 min of runtime / request • max 50ms of CPU time + 128 MB memory / request The state of Compute@Edge https://flic.kr/p/XqGdcM
32. Thank you! 
 Q&A