$30 off During Our Annual Pro Sale. View Details »

The Edge at your fingertips, Literally!

The Edge at your fingertips, Literally!

In the not very distant past, we had to spin up our own server and manage a whole infrastructure just to get our application deployed and available to our users. Today's world is moving from on-premises to cloud deployments, and that has completely changed the picture.

In this talk, we will explore the capabilities that the Cloudflare Edge network offers and how you can benefit from it to build and ship faster websites and applications.

Egwuenu Gift

June 01, 2022
Tweet

More Decks by Egwuenu Gift

Other Decks in Technology

Transcript

  1. THE EDGE AT YOUR FINGERTIPS, LITERALLY! JSWorld Conference - Amsterdam,

    June 2022
  2. WHAT WE'LL COVER? @lauragift_

  3. WHAT WE'LL COVER? •What is the Edge? @lauragift_

  4. WHAT WE'LL COVER? •What is the Edge? •How is it

    different from Serverless Functions? @lauragift_
  5. WHAT WE'LL COVER? •What is the Edge? •How is it

    different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. @lauragift_
  6. WHAT WE'LL COVER? •What is the Edge? •How is it

    different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem. @lauragift_
  7. WHAT WE'LL COVER? •What is the Edge? •How is it

    different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem. •Use Cases and Examples. @lauragift_
  8. GIFT EGWUENU DEVELOPER ADVOCATE @CLOUDFLARE EDUCATOR & YOUTUBER @LAURAGIFT_

  9. WHAT IS THE Edge? @lauragift_

  10. The edge is a server geographica y located close to

    your users. @lauragift_
  11. None
  12. Where it a started... @lauragift_

  13. None
  14. None
  15. None
  16. LIMITATIONS OF TRADITIONAL SERVERS @lauragift_

  17. LIMITATIONS OF TRADITIONAL SERVERS •Expensive to maintain. @lauragift_

  18. LIMITATIONS OF TRADITIONAL SERVERS •Expensive to maintain. •High latency due

    to large amount of traffic. @lauragift_
  19. LIMITATIONS OF TRADITIONAL SERVERS •Expensive to maintain. •High latency due

    to large amount of traffic. •Limited opportunity for scaling. @lauragift_
  20. SERVERLESS FUNCTIONS @lauragift_

  21. Serverless doesn't mean no servers! There's still a server, you

    just don't manage it. @lauragift_
  22. SERVERLESS PROVIDERS @lauragift_

  23. ADVANTAGES OF SERVERLESS FUNCTIONS @lauragift_

  24. ADVANTAGES OF SERVERLESS FUNCTIONS •Hosted by a provider, no need

    to manage your servers. @lauragift_
  25. ADVANTAGES OF SERVERLESS FUNCTIONS •Hosted by a provider, no need

    to manage your servers. •Low costs of bandwidth (pay for only what you use). @lauragift_
  26. ADVANTAGES OF SERVERLESS FUNCTIONS •Hosted by a provider, no need

    to manage your servers. •Low costs of bandwidth (pay for only what you use). •Scalibility On Demand. @lauragift_
  27. LIMITATION OF SERVERLESS FUNCTIONS @lauragift_

  28. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a

    centralized core location (us-east1). @lauragift_
  29. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a

    centralized core location (us-east1). •Cold start after the function is idle. @lauragift_
  30. LIMITATION OF SERVERLESS FUNCTIONS •All functions are stored in a

    centralized core location (us-east1). •Cold start after the function is idle. •Limited execution time(10ms). @lauragift_
  31. EDGE FUNCTIONS @lauragift_

  32. EDGE FUNCTIONS = Serverle Functions at The Edge @lauragift_

  33. REGION EARTH

  34. EDGE PROVIDERS Cloudflare Workers, AWS Lambda@Edge, Deno Deploy, Netlify Edge

    Functions
  35. ADVANTAGES OF EDGE FUNCTIONS @lauragift_

  36. ADVANTAGES OF EDGE FUNCTIONS •Reduced Latency @lauragift_

  37. ADVANTAGES OF EDGE FUNCTIONS •Reduced Latency •Zero Cold Start (0ms)

    @lauragift_
  38. ADVANTAGES OF EDGE FUNCTIONS •Reduced Latency •Zero Cold Start (0ms)

    •Improved Application Performace @lauragift_
  39. LIMITATIONS OF EDGE FUNCTIONS

  40. @lauragift_

  41. •Limited compute resources (~10 ms). @lauragift_

  42. @lauragift_

  43. •No support for browser or Node.js specific features(V8 Engine). @lauragift_

  44. The best packages and libraries supported by Cloudflare Workers.

  45. None
  46. @lauragift_

  47. •High latency due to data storage limitations. @lauragift_

  48. CLOUDFLARE DEVELOPER PLATFORM @lauragift_

  49. CLOUDFLARE WORKERS @lauragift_

  50. Cloudflare Workers is a serverless execution environment that allows you

    to create new applications or augment existing ones without configuring or maintaining infrastructure.
  51. @lauragift_

  52. ▸ Goodbye to cold starts—support for 0ms worldwide. @lauragift_

  53. How is a zero cold start possible?

  54. How is a zero cold start possible?

  55. @lauragift_

  56. ▸ Cost Savings - 100,000 request/daily free & affordable plans

    to scale. @lauragift_
  57. @lauragift_

  58. ▸ Edge Storage with KV, Durable Object, R2 & D1.

    @lauragift_
  59. CLOUDFLARE WORKERS HOW IT WORKS? @lauragift_

  60. @lauragift_

  61. ▸ V8 Isolates Engine @lauragift_

  62. None
  63. VIRTUAL MACHINES V8 ISOLATES A virtual machine (VM) is a

    software-based computer that exists within another computer’s operating system. Isolates are lightweight contexts that group variables with the code allowed to mutate them. Consumes more memory. Consumes less memory. Start-up time 500ms- 10secs. Start-up time under 5ms.
  64. HELLO WORKER EXAMPLE export default { fetch() { return new

    Response('Hello Worker!'); }, }; @lauragift_
  65. PAGES FUNCTIONS @lauragift_

  66. Pages enable you build full-stack applications by executing code on

    the Cloudflare network with help from Cloudflare Workers. @lauragift_
  67. FUNCTIONS (BETA) export async function onRequest(context) { // Contents of

    context object const { request, // same as existing Worker API env, // same as existing Worker API params, // if filename includes [id] or [[path]] waitUntil, // same as ctx.waitUntil in existing Worker API next, // used for middleware or to fetch assets data, // arbitrary space for passing data between middlewares } = context; return new Response("Hello, world!"); } @lauragift_
  68. DATA STORAGE ON THE EDGE @lauragift_

  69. @lauragift_

  70. WORKERS KV @lauragift_

  71. Workers KV is a global, low-latency, key-value data store.

  72. await NAMESPACE.put(key, value); @lauragift_

  73. await NAMESPACE.get(key); @lauragift_

  74. await NAMESPACE.delete(key); @lauragift_

  75. await NAMESPACE.list(); @lauragift_

  76. DURABLE OBJECTS @lauragift_

  77. Durable Objects provide low-latency coordination and consistent storage for the

    Workers platform through two features - global uniquene and a transactional storage API. @lauragift_
  78. export class DurableObject { constructor(state, env) {} async fetch(request) {

    return Response("Hello World") } } @lauragift_
  79. R2 @lauragift_

  80. R2 storage allows developers to store large amounts of unstructured

    data without the costly egre bandwidth f s associated with typical cloud storage services. @lauragift_
  81. R2 BINDINGS # wrangler.toml [[r2_buckets]] binding = 'MY_BUCKET' # <~

    valid JavaScript variable name bucket_name = '<YOUR_BUCKET_NAME>' @lauragift_
  82. None
  83. COMMON USE CASES @lauragift_

  84. COMMON USE CASES •Geolocation Based Redirects @lauragift_

  85. COMMON USE CASES •Geolocation Based Redirects •A/B Testing @lauragift_

  86. COMMON USE CASES •Geolocation Based Redirects •A/B Testing •Custom HTTP

    Headers & Cookie Management @lauragift_
  87. COMMON USE CASES •Geolocation Based Redirects •A/B Testing •Custom HTTP

    Headers & Cookie Management •User Authentication and Authourization @lauragift_
  88. COMMON USE CASES •Geolocation Based Redirects •A/B Testing •Custom HTTP

    Headers & Cookie Management •User Authentication and Authourization •Localization and Personalization @lauragift_
  89. WHEN not TO USE CLOUDFLARE WORKERS

  90. @lauragift_

  91. USE CASES WONT RECOMMEND Data Latency - Database is not

    hosted on the Edge! @lauragift_
  92. USE CASES WONT RECOMMEND Requires large amount of compute resources

    to run. @lauragift_
  93. Workers Examples @lauragift_

  94. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response>

    { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
  95. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response>

    { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
  96. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response>

    { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
  97. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response>

    { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://asos.com/nl") } }, }; @lauragift_
  98. GEOLOCATION BASED REDIRECTS export default { async fetch(request: Request): Promise<Response>

    { const { cf } = request if ( cf?.country === "NL") { return Response.redirect("https://cloudflare.com") } }, };
  99. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response>

    { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } } @lauragift_
  100. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response>

    { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } } @lauragift_
  101. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response>

    { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } } @lauragift_
  102. RETRY/LOG FAILED REQUESTS export default { async fetch(request: Request): Promise<Response>

    { const res = await fetch("https://httpstat.us/503?sleep=2000") if (!res.ok) { return await fetch("https://httpstat.us/200") } else { return res } } }
  103. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request):

    Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
  104. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request):

    Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
  105. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request):

    Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
  106. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request):

    Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
  107. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request):

    Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, }; @lauragift_
  108. A/B TESTING REMOTE ORIGINS export default { async fetch(request: Request):

    Promise<Response> { const origin1 = 'https://cloudflare.com'; const origin2 = 'https://jsworldconference.com'; const randomNumber = Math.floor(Math.random() * 100) + 1; if (randomNumber > 50) { return fetch(origin1); } else { return fetch(origin2); } }, };
  109. WHAT WE'VE LEARNED TODAY? @lauragift_

  110. WHAT WE'VE LEARNED TODAY? •What is the Edge? @lauragift_

  111. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is

    it different from Serverless Functions? @lauragift_
  112. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is

    it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. @lauragift_
  113. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is

    it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem (Workers, KV, R2, DO, D1). @lauragift_
  114. WHAT WE'VE LEARNED TODAY? •What is the Edge? •How is

    it different from Serverless Functions? •Pros & Cons of Serverless & Edge functions. •The Cloudflare Developer Ecosystem (Workers, KV, R2, DO, D1). •Use Cases & Examples of Edge Functions. @lauragift_
  115. Building applications on the Edge helps bring us close to

    our end-users, improving their experience and making the web more acce ible to everyone. @lauragift_
  116. FURTHER RESOURCES

  117. FURTHER RESOURCES • Cloudflare Workers Documentation

  118. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation

  119. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation

    • Cloudflare Blog - blog.cloudflare.com
  120. FURTHER RESOURCES • Cloudflare Workers Documentation • Cloudflare Pages Documentation

    • Cloudflare Blog - blog.cloudflare.com • Cloudflare Devs Discord
  121. THANK YOU! @lauragift_