We're all living on it. But what exactly is The Edge?

It’s 2022 and we’re all on the edge of our serverless seats. But what is The Edge? What are Edge Functions? And what impact does this new technology have on the Jamstack, the web, and ultimately — people and our planet?

Transcript

1. SALMA ALAM-NAYLOR 
 @whitep4nth3r WE’RE ALL LIVING ON IT. BUT WHAT EXACTLY IS THE EDGE?
2. 👋 I’m Salma.
3. @whitep4nth3r
4. 🧱📕😻 I help developers build stu ff , learn things, and love what they do.
5. netlify.com/blog
6. twitch.tv/whitep4nth3r
7. github.com/whitep4nth3r
8. 🤔 
 WE’RE ALL LIVING ON IT. BUT WHAT EXACTLY IS THE EDGE?
9. ⚙ 
 SERVERLESS FUNCTIONS
10. AT THE EDGE ⚙ 
 SERVERLESS FUNCTIONS
11. 🤔 
 WHAT IS THE EDGE?
12. 🤔 
 WHAT ARE EDGE FUNCTIONS?
13. 😅 
 WHY DOES IT MATTER?
14. 🤔 
 WE’RE ALL LIVING ON IT. BUT WHAT EXACTLY IS THE EDGE? SERVERLESS FUNCTIONS ⚙
15. 🤔 
 WE’RE ALL LIVING ON IT. BUT WHAT EXACTLY IS THE EDGE? SERVERLESS + JAMSTACK SERVERLESS FUNCTIONS ⚙ 🍓
16. 🤔 
 WE’RE ALL LIVING ON IT. BUT WHAT EXACTLY IS THE EDGE? SERVERLESS + JAMSTACK THE EDGE SERVERLESS FUNCTIONS ⚙ 🍓 🧗
17. 🤔 
 WE’RE ALL LIVING ON IT. BUT WHAT EXACTLY IS THE EDGE? SERVERLESS + JAMSTACK THE EDGE SERVERLESS FUNCTIONS EDGE FUNCTIONS ON NETLIFY ⚙ 🍓 🧗 👩💻
18. 🤔 
 WHAT IS A SERVERLESS FUNCTION?
19. 🤔 
 WHAT IS A FUNCTION?
20. A BIT OF CODE THAT DOES SOMETHING. FUNCTION
21. FUNCTION
22. 🤔 
 WHAT IS SERVERLESS?
23. 🤔 
 WHAT IS A SERVER?
24. SERVER A COMPUTER THAT CAN STORE AND RUN BITS OF CODE.
25. SERVER A (PHYSICAL OR VIRTUAL) COMPUTER THAT CAN STORE AND RUN BITS OF CODE.
26. 🤨 
 SERVERLESS = NO SERVER?
27. NO! 🫠
28. 🗄 
 “MANAGED” SERVERS
31. 🗄 
 “MANAGED” SERVERS
32. 🗄 
 “MANAGED” SERVERS 🌩 
 “CLOUD” SERVERS
35. 🤔 
 WHY IS SERVERLESS GOOD?
36. LESS STRESS 😎
37. LESS STRESS COST-EFFECTIVE 😎
38. LESS STRESS COST-EFFECTIVE GET STARTED FOR FREE 😎
39. 🍓 
 SERVERLESS AND JAMSTACK
40. SERVERLESS 🤝 JAMSTACK
41. 🤔 
 WHAT IS JAMSTACK?
42. netlify.com/blog/the-jamstack-de fi nition-evolved/
43. 📡 
 CDN
44. 📡 
 CDN = CONTENT DELIVERY NETWORK
46. 👩💻
47. 👩💻 🛠
48. 👩💻 🛠 📄
49. 👩💻 🛠 📄
50. 👩💻 📄
53. 👨💻 👩💻
58. 🎉 
 EDGE FUNCTIONS
59. 🎉 
 SERVERLESS FUNCTIONS AT THE EDGE
60. netlify.com/blog/announcing-serverless-compute-with-edge-functions/
61. POWERED BY DENO
62. 💡 
 YOUR FIRST EDGE FUNCTION
63. YOUR FIRST EDGE FUNCTION
64. 🤨 
 WHY?
65. ⚙ 
 NETLIFY FUNCTIONS
66. GREAT FOR PROVIDING API END POINTS AND SERVING RESPONSES ⚙ 
 NETLIFY FUNCTIONS
67. 💡 
 NETLIFY EDGE FUNCTIONS
68. EMPOWER DEVELOPERS TO MODIFY NETWORK REQUESTS AND RESPONSES 💡 
 NETLIFY EDGE FUNCTIONS
69. 🔥 
 LET’S GET EDGY
70. ADD EDGE FUNCTION FILES TO YOUR PROJECT 1
71. ADD EDGE FUNCTION FILES TO YOUR PROJECT ASSOCIATE YOUR 
 FUNCTIONS WITH URLS 1 2
72. ADD EDGE FUNCTION FILES TO YOUR PROJECT ASSOCIATE YOUR 
 FUNCTIONS WITH URLS DEPLOY YOUR PROJECT 
 TO NETLIFY AS USUAL 1 2 3
73. ADD EDGE FUNCTION FILES TO YOUR PROJECT ASSOCIATE YOUR 

74. node_modules public src .gitignore index.html netlify.toml package.json README.md my-netlify-project
75. node_modules public src .gitignore index.html netlify.toml package.json README.md netlify my-netlify-project
76. node_modules public src .gitignore index.html netlify.toml package.json README.md netlify functions my-netlify-project
77. node_modules public src .gitignore index.html netlify.toml package.json README.md netlify functions edge-functions my-netlify-project
78. THE EDGE FUNCTION CODE
79. my-netlify-project node_modules public src .gitignore index.html netlify.toml package.json README.md netlify functions edge-functions hello-edge.js
80. ADD EDGE FUNCTION 
 FUNCTIONS WITH URLS DEPLOY YOUR PROJECT 

81. netlify.toml [[redirects]] from = "/short-url" to = "/terrible-url-that-is-too-long"
82. netlify.toml [[redirects]] from = "/short-url" to = "/terrible-url-that-is-too-long" [[edge_functions]]
83. netlify.toml [[redirects]] from = "/short-url" to = "/terrible-url-that-is-too-long" [[edge_functions]] path = "/hello"
84. netlify.toml [[redirects]] from = "/short-url" to = "/terrible-url-that-is-too-long" [[edge_functions]] path = "/hello" function = "hello-edge"
85. ADD EDGE FUNCTION 
 TO NETLIFY AS USUAL 1 2 3
86. my-netlify-project $ git push
87. my-netlify-project $ netlify deploy --build
88. edge-functions-examples.netlify.app/hello
89. ADD EDGE FUNCTION FILES TO YOUR PROJECT ASSOCIATE YOUR 
 FUNCTIONS WITH URLS DEPLOY YOUR PROJECT 
 TO NETLIFY AS USUAL 1 2 3
90. 🤔 
 THE NETLIFY CLI?
91. 💻 
 LOCAL DEVELOPMENT FOR THE EDGE
92. 💻 
 LOCAL DEVELOPMENT FOR THE EDGE WITH THE NETLIFY CLI
93. my-netlify-project $ npm install netlify-cli -g
94. my-netlify-project $ netlify link
95. my-netlify-project $ netlify init
96. my-netlify-project $ netlify dev # save some keystrokes! $ ntl dev
97. 🌍 
 SOME REAL-WORLD EXAMPLES
98. hello-edge.js export default async () => { return new Response("Hello, World!"); };
100. hello-edge.js export default async () => { return new Response("Hello, World!"); };
101. hello-edge.js export default async () => { return new Response("Hello, World!", { headers: { "content-type": "text/html" }, }); };
102. hello-edge.js export default async () => { return new Response("Hello, World!"); };
103. hello-edge.js export default async (request) => { return new Response("Hello, World!"); };
105. hello-edge.js export default async (request) => { request.headers.set("X-Your-Header", "Foo"); return new Response("Hello, World!"); };
106. hello-edge.js export default async (request) => { const url = new URL(request.url); };
107. hello-edge.js export default async (request) => { const url = new URL(request.url); if (url.searchParams.get("event") === "moar") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Hello, everyone else!"); } };
108. hello-edge.js export default async (request) => { const url = new URL(request.url); if (url.searchParams.get("event") === "moar") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Hello, everyone else!"); } };
109. hello-edge.js export default async (request) => { const url = new URL(request.url); if (url.searchParams.get("event") === "moar") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Hello, everyone else!"); } };
110. hello-edge.js export default async (request) => { const url = new URL(request.url); if (url.searchParams.get("event") === "moar") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Hello, everyone else!"); } };
111. hello-edge.js export default async (request) => { const url = new URL(request.url); if (url.searchParams.get("event") === "moar") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Hello, everyone else!"); } };
112. hello-edge.js export default async (request) => { return new Response("Hello, World!"); };
113. hello-edge.js export default async (request, context) => { return new Response("Hello, World!"); };
114. hello-edge.js Context cookies geo ip json log next rewrite site
115. hello-edge.js Context cookies geo ip json log next rewrite site
116. hello-edge.js export default async (request) => { const url = new URL(request.url); if (url.searchParams.get("event") === "moar") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Hello, everyone else!"); } };
117. hello-edge.js export default async (request, context) => { const url = new URL(request.url); const location = context.geo; if (url.searchParams.get("event") === "moar") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Hello, everyone else!"); } };
118. hello-edge.js export default async (request, context) => { const url = new URL(request.url); const location = context.geo; if (url.searchParams.get("event") === “moar" && location.country.code === "GB") { return new Response("Hello, Moar Serverless!"); } else { return new Response(“Sorry, go away!”); } };
119. hello-edge.js export default async (request, context) => { const url = new URL(request.url); const location = context.geo; if (url.searchParams.get("event") === "moar" && location.country.code === "GB") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Sorry, go away!", { status: 451, }); } };
120. hello-edge.js export default async (request, context) => { const url = new URL(request.url); const location = context.geo; if (url.searchParams.get("event") === "moar" && location.country.code === "GB") { return new Response("Hello, Moar Serverless!"); } else { return new Response("Sorry, go away!", { status: 451, }); } };
123. https://no-js-personalization.netlify.app/food/pizza
124. product-page.js export default async (request, context) => { const url = new URL(request.url); if (url.pathname.startsWith("/food")) { context.cookies.set("prefers", "food"); } if (url.pathname.startsWith("/corgis")) { context.cookies.set("prefers", "corgis"); } // return the Response and page };
125. product-page.js export default async (request, context) => { const url = new URL(request.url); if (url.pathname.startsWith("/food")) { context.cookies.set("prefers", "food"); } if (url.pathname.startsWith("/corgis")) { context.cookies.set("prefers", "corgis"); } // return the Response and page };
126. product-page.js export default async (request, context) => { const url = new URL(request.url); if (url.pathname.startsWith("/food")) { context.cookies.set("prefers", "food"); } if (url.pathname.startsWith("/corgis")) { context.cookies.set("prefers", "corgis"); } // return the Response and page };
127. home-page.js export default async (request, context) => { const prefers = context.cookies.get("prefers"); if (prefers === "food") { context.rewrite("/home-page-food"); } if (prefers === "corgis") { context.rewrite("/home-page-corgis"); } // return the default Response and page };
128. home-page.js export default async (request, context) => { const prefers = context.cookies.get("prefers"); if (prefers === "food") { context.rewrite("/home-page-food"); } if (prefers === "corgis") { context.rewrite("/home-page-corgis"); } // return the default Response and page };
129. home-page.js export default async (request, context) => { const prefers = context.cookies.get("prefers"); if (prefers === "food") { context.rewrite("/home-page-food"); } if (prefers === "corgis") { context.rewrite("/home-page-corgis"); } // return the default Response and page };
135. 🤯 
 AND THERE’S MORE!
138. 🤩 
 LET’S RECAP!
139. 🎉 
 SERVERLESS FUNCTIONS
140. 🎉 
 EDGE NETWORK
141. 🎉 
 SERVERLESS FUNCTIONS AT THE EDGE
142. netlify.com/blog/announcing-serverless-compute-with-edge-functions/
143. ADD EDGE FUNCTION FILES TO YOUR PROJECT ASSOCIATE YOUR 
 FUNCTIONS WITH URLS DEPLOY YOUR PROJECT 
 TO NETLIFY AS USUAL 1 2 3
145. my-netlify-project $ npm install netlify-cli -g
148. @whitep4nth3r
149. 🧱📕😻 I help developers build stu ff , learn things, and love what they do.
151. 👋 THANK YOU! @whitep4nth3r whitep4nth3r.com