What the heck is Edge Compute anyway?
(aka "edge functions"
or "edge workers")
Slides: bit.ly/edge-compute
Hey 👋
I'm Austin Gil
austingil.com | @heyAustinGil
- Hacking on websites since 2013
- Help folks build better websites
- Interests: bikes, soccer, camping, pinball, roller derby, my chiweenie
What the heck is Edge Compute anyway?
(aka "edge functions"
or "edge workers")
Slides: bit.ly/edge-compute
Hey 👋
I'm Austin Gil
austingil.com | @heyAustinGil
- Hacking on websites since 2013
- Help folks build better websites
- Interests: bikes, soccer, camping, pinball, roller derby, my chiweenie
🚧 DISCLOSURE 🚧
I work at Akamai (akamai.com)
We offer a lot of relevant services
Really hard not to mention (kind of my job)
Impossible to be 100% unbiased
🤝 ASSURANCE 😘
This is not a sales pitch in disguise
I’m here to teach practical, general concepts
I may mention Akamai because it’s familiar
But this info applies anywhere
Plain and simple:
Edge compute is the result of distributing serverless functions to multiple locations around the world to handle requests from as close to the user as possible.
The result is dynamic responses with the least amount of latency.
That’s it!
But that’s also really boring
Let’s make dog hats!!!
How to make dog hats
- Client asks for the thing
- You do work to make the thing
- You give them the thing
A mediocre analogy for delivering websites
…but really good photos ¯\_(ツ)_/¯
Background on "Compute"
What:
Compute = bleeps & bloops -> stuff (like HTML)
Where:
- Servers-Side (SSR)
- Client-Side (CSR)
- Static-Site-Generators (SSG)
Server-Side
User request travels to a machine (own/rent) in a specific location which runs your code and return the HTML that’s rendered on the page.
(on-prem, VPS, cloud functions)
🏭
Commercial workspace
Client-Side
User downloads your code to run on THEIR machine to generate HTML.
(JavaScript, service workers, WASM)
🛠️
DIY kits
Static-Site-Generators
Machine you control builds website ahead of time into static folders and files, allowing for immediate HTML response.
(technically still SSR)
🐶🎩
Pre-knitted dog hats
Ok, that’s compute
(mostly)
What about "Edge"?
Content Delivery Network (CDN)
Network of globally distributed computers that deliver STATIC assets closer to users, reducing latency and improving performance.
🏪
Convenience stores
Edge isn’t always CDNs
Can be IoT, cell networks, ISPs, you and your friend’s Raspberry Pis.
But usually, for the web it’s CDNs.
Now let’s talk performance
Performance: Now in 3-D!
- Distance: How far does the payload have to travel?
- Device: How fast can the hardware build the payload?
- Download: How big is the payload that’s being sent?
With that in mind, we should…
- Move things closer to users (like a CDN)
- Do work on servers (like cloud servers/functions)
- Build smaller apps (pfft)
Unfortunately, you can only pick 2:
- Powerful Processing
- Low Latency
- Dynamic Data
SSR
😀 Powerful + Dynamic
😟 Latency
CSR + CDN
😀 Latency + Dynamic
😟 Powerful
SSG + CDN
😀 Powerful + Latency
😟 Dynamic
But what if you want all 3?
🐶🎩🧶💉🤖+🏪
Dog-hat-knitting robots inside convenience stores
Edge compute
Programmable runtimes (like cloud functions)...that are globally distributed (within a CDN)...and can cache content (like SSG).
Dynamic server-side functionality...that executes as close to users as possible...and may avoid repeat work.
Also important to note
They sit BETWEEN a client and origin server and have access to the client request and the server response.
Plus access to:
- Location information
- Key-value data storage
For Users
Dynamic responses with…
- Less latency (compared to SSR)
- Less data usage (compared to CSR)
- Less work on the client (better batt. & perf.)
For Developers
- Fast POC development
- Consistent execution environment (no x-browser issues)
- Location-based logic
- Server-side benefits (secrets)
- Common programming language (JavaScript)
- No servers/infrastructure to manage
For Website Owners
- Reduce load on origin servers (performance, reliability, cost)
- Automatic scaling
- Only pay for what you use
The rough edges 😏
- Limited platform features (V8 isolates != Node.js)
- Limited compute resources
- Limited time resources
- Limited networking protocols (HTTP != TCP/IP)
😱
The big, scary thing no one likes to talk about…
😵
Managing data from distributed compute
Edge compute isn’t
always the right choice
💻: client
🤵: origin server
🔪: edge node
🎯: target
Proxy service in same region 🙂
💻---------------🤵-🎯vs.
💻-🔪---------------🎯Proxy service in distant region 😀
💻---------------🤵---------------🎯vs.
💻-🔪---------------🎯Multiple concurrent requests 😄
(a.k.a API Orchestration)
┌----------------🎯
💻----------------🤵-🎯
└------🎯vs.
┌----------------🎯
💻-🔪---🎯
└------🎯Multiple sequential requests 😬
(eg: Blog Post -> Catgeories -> Related Posts)
💻---------------🤵-🎯-🤵🎯-🤵---------------💻vs.
💻-🔪---------------🎯---------------🔪---------------🎯---------------🔪-💻And that’s only reads
Writes are even harder
There are solutions
- Edge Key-Value stores
- Read-replica DB instances
- Distributed cache
Maybe no full fl(edge)d apps
But there’s several GREAT use-cases…
Great use cases
- Modify request/response
- Fast static search (auto-complete, store locator)
- Geolocation (language, policies)
- Redirect management (blog post)
- Token-based personalization
- A/B testing & Feature flags
- Stateless auth (JSON Web Tokens)
- API proxy / orchestration
- Upstream software patches
- Dynamic content assembly from static/cached templates
🤨
The big, awesome thing more folks should talk about
🤑
Caching
Caching: Origin Server Only
Caching: Origin & CDN
Caching: Origin, CDN, Edge Compute
This all raises a
difficult question
Where should your application run?
Remember to consider latency, size, devices, location, data etc.
Before
Client-side JS -> Client-side service worker -> Cloud functions -> Traditional servers
Now
Client-side JS -> Client-side service worker -> Edge compute -> Cloud functions -> Traditional servers
Origin Server:
Provide HTML Template (empty content wrappers)Edge Compute:
Construct Page w/ Data (breadcrumbs, title, store location, desc. img urls)CDN:
Deliver Static Files (images, CSS, JS, fonts, etc.)Client JS:
Dynamic Compute (price, quantity, size, shipping, cart)Web Worker:
Heavy Compute (image resize, transcoding)
Is Edge Compute the future?
I think it will be, but it needs to be easier.
It’s exciting!!!
but also…
Existential crisis!!!
(ಥ﹏ಥ)
My app is already pretty fast.
How much difference can it posssibly make?
That sounds like a lot of work.
Do dogs even like wearing hats?
Does 300ms really matter?
Compulsory slide with lots of stats
- 100ms delay => 7% drop in sales
- 2s delay => 103% increased bounce rate
- Over 3s load times => 53% smartphone users don’t convert
- Optimal loading for most sales: 1.8-2.7s
- 28% users won’t return to slow sites
- Webpages with most sales loaded 26% faster
- 250ms faster => keeps users from visiting competitors
- Performance impact’s revenue, perception, loyalty, & engagement
If Amazon hired 60,000 to shave 100ms
It could cost them $5b and they would STILL make a profit
(Based on 1% of Amazon’s revenue and average developer salary for 2023)
(More legit case studies of performance vs. UX/biz metrics at wpostats.com)
Is it worth it?
It depends 😘
Building for distributed systems is hard.
Edge compute adds complexity.
Small projects may not get as good of an ROI.
The important thing is to understand distributed systems and architecture.
Build applications for today, in such a way that can scale tomorrow.
And if tomorrow you tip those scales, give Akamai EdgeWorkers a try.
Akamai EdgeWorkers
- Largest distributed network (>300k servers, >4k POPs)
- Fine-tuned lifecycle hooks
- On client request
- Before origin request
- On origin response
- Before client response
- Integrates with CDN’s cache
- Protected by industry-leading security
- Canary-deployment rollouts
- No per-region/per-server limits (only per-request)
How’d I do?
$100 Cloud Credit
Let’s talk:
Edge compute, web development,
career, chiweenies, whatever :D