The Edge is the new frontier of computing possibilities, offering promises, opportunities, and it’s own set of challenges. In this talk, we’ll break down what it is, why it’s awesome, and how it fits into your application architecture. We’ll cover things like: - What are the benefits - What are the limitations - When it makes sense - When it doesn’t make sense - How to get started

1. What the
heck is Edge
Compute
anyway?
(aka "edge functions"
or "edge workers")
Slides: bit.ly/edge-compute

2. @heyAustinGil
Hey 👋
I'm Austin Gil
austingil.com | @heyAustinGil
Hacking on websites since 2013
Teach folks how to build better websites
Have a cool chiweenie named Nugget

3. @heyAustinGil
Plain and simple:
Edge compute is the result of distributing serverless functions to thousands of
locations around the world to handle requests from as close to the user as
possible.
The result is programmable/dynamic/customizable responses with the least
amount of latency (aka more speed).

4. @heyAustinGil
That’s it!

5. @heyAustinGil
But that’s also really boring

6. @heyAustinGil
Let’s make dog hats!!!

7. @heyAustinGil
Natural progression of dog hats
1. Client wants a thing
2. You make a thing
3. You give them a thing
Mediocre analogy / really good photos ¯_(ツ)_/¯

8. @heyAustinGil
Let’s start with "Compute"
What:
Compute = bleeps & bloops -> HTML
Where:
Traditional Servers
Client-Side JavaScript
Client-Side workers
Static-Site-Generators
Cloud functions
Edge functions

9. @heyAustinGil
Traditional Servers
Machine runs software you choose to execute code you write to return HTML.

10. @heyAustinGil
🏭
Commercial workspace

11. @heyAustinGil
Client-Side Rendering
JavaScript (or WebAssembly) running in the user’s browser generates HTML.

12. @heyAustinGil
🛠️
DIY kits

13. @heyAustinGil
Static-Site-Generators
(SSGs)
Generate all pages ahead of time, into static folders and files.
(Technically still SSR)

14. @heyAustinGil
🐶🎩
Pre-knitted dog hats

15. @heyAustinGil
Cloud Functions
(aka "lambda", "serverless")
Service providers route requests to the functions you provide.

16. @heyAustinGil
🐶🎩🧶💉🤖
Dog-hat-knitting robots

17. @heyAustinGil
Ok, that’s compute

18. @heyAustinGil
What about "Edge"?
What
A network of globally distributed
computers capable of handling user
requests.
Why
By putting resources as close to users
as possible, we can reduce latency,
thereby improving performance and
user experience.

19. @heyAustinGil
Content Delivery Network
(CDN)
Thousand of globally distributed servers to deliver static assets closer to users

20. @heyAustinGil
🏪
Convenience stores

21. @heyAustinGil
Now let’s talk performance

22. @heyAustinGil
Users experience performance in 3-D
Distance request/response must travel (latency)
Download size before code executes
Device hardware capabilities

23. @heyAustinGil
The speed-of-light-problem
Technology continues to improve, but the speed of light remains the same.
Edge vs. Origin
Eventually, the biggest bottleneck is distance

24. @heyAustinGil
With everything in mind, we should…
Do things closer to users (like a CDN)
Do more work on servers (like cloud servers/functions)
Send smaller assets (???)

25. @heyAustinGil
The logical next step is…

26. @heyAustinGil
Put dog-hat-knitting robots
inside convenience stores
🐶🎩🧶💉🤖+🏪

27. @heyAustinGil
Edge compute
Programmable runtimes (like cloud functions)...that are globally distributed (like
a CDN)...and live between a client and origin.
Dynamic server-side functionality...that executes as close to users as possible.
Plus:
Reliable location information
Access to key-value stores

28. @heyAustinGil
For Users
Dynamic content with…
Less latency (compared to servers/cloud functions)
Less to download (compared to client-side rendering)
Less work on the client (better batt. & perf.)

29. @heyAustinGil
For Developers
Low barrier for POC
Consistent execution environment (no x-browser issues)
Location-based logic
Secrets stay secret (compared to client-side)
Common programming language (JavaScript)
No servers/infrastructure to manage

30. @heyAustinGil
For Website owners
Reduce load on origin servers (performance, reliability, cost)
Automatic scaling
Only pay for what you use

31. @heyAustinGil
The rough edges ( ͡° ͜ʖ ͡°)
Limited platform features (V8 isolates != Node.js)
Limited compute resources
Limited time resources
Limited networking protocols (HTTP != TCP/IP)

32. @heyAustinGil
No one likes to talk about
the hard part…

33. @heyAustinGil
Distributed data

34. @heyAustinGil
Edge compute isn’t
always better
💻: origin
🤵: server
🔪: edge
🎯: target

35. @heyAustinGil
Proxy service in same region 🙂
💻---------------🤵-🎯
vs.
💻-🔪---------------🎯

36. @heyAustinGil
Proxy service in distant region 😀
💻---------------🤵---------------🎯
vs.
💻-🔪---------------🎯

37. @heyAustinGil
Multiple concurrent requests 😄
(a.k.a API Orchestration)
┌----------------🎯
💻----------------🤵-🎯
└------🎯
vs.
┌----------------🎯
💻-🔪---🎯
└------🎯

38. @heyAustinGil
Multiple sequential requests 😬
(eg: Blog Post -> Catgeories -> Related Posts)
💻---------------🤵-🎯-🤵🎯-🤵---------------💻
vs.
💻-🔪---------------🎯---------------🔪---------------🎯---------

39. @heyAustinGil
There are solutions
Edge Key-Value stores
Replica databases
Distributed cache

40. @heyAustinGil
An addition, not a replacement
Where to run compute becomes a tough question
(latency, bundle size, device capabilities, data location etc).
Before
Client-side JS -> Client-side service worker -> Cloud functions -> Traditional
servers
After
Client-side JS -> Client-side service worker -> Edge compute -> Cloud functions
-> Traditional servers

41. @heyAustinGil
So maybe not for full apps
But good at other things…

42. @heyAustinGil
Common use cases
Modify request/response (server-side ads)
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

43. @heyAustinGil
The next phase of web
development
Dog hats for everyone!!!

44. @heyAustinGil
Available in frameworks near you
Astro
Remix
Next.js
Nuxt.js
11ty
Sveltekit
Fresh
SolidStart
Qwik City
and more

45. @heyAustinGil
It’s exciting!!!
but also…

46. @heyAustinGil
Existential crisis!!!
(ಥ﹏ಥ)
Isn't my app fast enough?
How much does 300 milliseconds matter?
Is all the effort worth it?
Do dogs even like wearing hats?

47. @heyAustinGil
Does 300ms really matter?

48. @heyAustinGil
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
Source: Akamai’s 2017 Online Retail Performance Report

49. @heyAustinGil
Visualization
In 2008, Amazon found 100ms in load hurt sales by 1%
($513.98b annual revenue x 1% = >$5b)
They could hire SIXTY THOUSAND developers and still profit
(2023 average = $83k)
More case studies of performance vs. UX/biz metrics at wpostats.com

50. @heyAustinGil
Is it worth it?
Lemme work it
It depends 💩
(but when you need it, give Akamai EdgeWorkers a try)

51. @heyAustinGil
Akamai EdgeWorkers
Most distributed network (>300k servers, >4k POPs)
More customizable lifecycle hooks
After client request, before origin request, after origin response, before
client response
Integrates with CDN’s cached content
Protected by industry-leading security
Canary-deployment rollouts
No per-region/per-server limits (only per-request)

52. @heyAustinGil

53. @heyAustinGil

54. @heyAustinGil

55. @heyAustinGil

56. @heyAustinGil

57. @heyAustinGil

58. @heyAustinGil

59. @heyAustinGil

60. @heyAustinGil

61. @heyAustinGil

62. @heyAustinGil
How’d I do?
bit.ly/thanks-austin
$100 Cloud Credit
linode.com/austingil
Let’s talk:
Edge compute, web development,
career, chiweenies, whatever :D
Let’s connect:
austingil.com @heyAustinGil @mastodon.social/@Austingil
@heyAustinGil @heyAustinGil @AustinGil