Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Edge at your fingertips, Literally!

Gift Egwuenu
October 18, 2022
0
20

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.

Gift Egwuenu

October 18, 2022
Tweet

More Decks by Gift Egwuenu

See All by Gift Egwuenu
Personal Branding for Software Engineers
lauragift21
0
91
Building Serverless Applications with Cloudflare Pages
lauragift21
0
10
The Edge at your fingertips, Literally!
lauragift21
0
100
Writing Clean Code for Humans
lauragift21
1
150
One Rule to Rule Them All: Learning in Public
lauragift21
1
950
How to get Started as an Open Source Contributor
lauragift21
0
50
Personal Branding for Software Engineers
lauragift21
0
39
Jamstack FTW: Static Site Generation with Gridsome
lauragift21
0
160
Scaling Your eCommerce with Vue Storefront
lauragift21
0
220

Featured

See All Featured
Happy Clients
brianwarren
92
6.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
318
23k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
225
50k
Streamline your AJAX requests with AmplifyJS and jQuery
dougneiner
130
9k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
239
1.2M
Bash Introduction
62gerente
603
210k
Side Projects
sachag
450
39k
4 Signs Your Business is Dying
shpigford
172
21k
Six Lessons from altMBA
skipperchong
17
2.6k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
184
15k
From Idea to $5000 a Month in 5 Months
shpigford
376
45k
Scaling GitHub
holman
455
140k

Transcript

  1. THE EDGE AT YOUR FINGERTIPS,
    LITERALLY!
    COMMS API Meetup Lagos, Oct 2022

    View Slide

  2. WHAT WE'LL COVER?
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  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_

    View Slide

  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_

    View Slide

  8. GIFT EGWUENU
    DEVELOPER ADVOCATE @CLOUDFLARE
    EDUCATOR & YOUTUBER
    @LAURAGIFT_

    View Slide

  9. WHAT IS THE Edge?
    @lauragift_

    View Slide

  10. The edge is a server geographica y located
    close to your users.
    @lauragift_

    View Slide

  11. View Slide

  12. Where it a started...
    @lauragift_

    View Slide

  13. View Slide

  14. View Slide

  15. View Slide

  16. LIMITATIONS OF TRADITIONAL SERVERS
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  20. SERVERLESS FUNCTIONS
    @lauragift_

    View Slide

  21. Serverless doesn't mean no servers!
    There's still a server, you just don't manage it.
    @lauragift_

    View Slide

  22. SERVERLESS PROVIDERS
    @lauragift_

    View Slide

  23. ADVANTAGES OF SERVERLESS FUNCTIONS
    @lauragift_

    View Slide

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

    View Slide

  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_

    View Slide

  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_

    View Slide

  27. LIMITATION OF SERVERLESS FUNCTIONS
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

  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_

    View Slide

  31. EDGE FUNCTIONS
    @lauragift_

    View Slide

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

    View Slide

  33. REGION EARTH

    View Slide

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

    View Slide

  35. ADVANTAGES OF EDGE FUNCTIONS
    @lauragift_

    View Slide

  36. ADVANTAGES OF EDGE FUNCTIONS
    •Reduced Latency
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

  39. LIMITATIONS OF EDGE FUNCTIONS

    View Slide

  40. @lauragift_

    View Slide

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

    View Slide

  42. @lauragift_

    View Slide

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

    View Slide

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

    View Slide

  45. View Slide

  46. @lauragift_

    View Slide

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

    View Slide

  48. CLOUDFLARE DEVELOPER PLATFORM
    @lauragift_

    View Slide

  49. CLOUDFLARE WORKERS
    @lauragift_

    View Slide

  50. Cloudflare Workers is a serverless execution environment that allows
    you to create new applications or augment existing ones without
    configuring or maintaining infrastructure.

    View Slide

  51. @lauragift_

    View Slide

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

    View Slide

  53. How is a zero cold start possible?

    View Slide

  54. How is a zero cold start possible?

    View Slide

  55. @lauragift_

    View Slide

  56. ▸ V8 Isolates Engine
    @lauragift_

    View Slide

  57. View Slide

  58. 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.

    View Slide

  59. @lauragift_

    View Slide

  60. ▸ Cost Savings - 100,000 request/daily free & affordable plans to
    scale.
    @lauragift_

    View Slide

  61. @lauragift_

    View Slide

  62. ▸ Edge Storage with KV, Durable Object, R2 & D1.
    @lauragift_

    View Slide

  63. HELLO WORKER EXAMPLE
    export default {
    fetch() {
    return new Response('Hello Worker!');
    },
    };
    @lauragift_

    View Slide

  64. COMMON USE CASES OF EDGE FUNCTIONS
    @lauragift_

    View Slide

  65. COMMON USE CASES OF EDGE FUNCTIONS
    •Geolocation Based Redirects
    @lauragift_

    View Slide

  66. COMMON USE CASES OF EDGE FUNCTIONS
    •Geolocation Based Redirects
    •A/B Testing
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

  69. COMMON USE CASES OF EDGE FUNCTIONS
    •Geolocation Based Redirects
    •A/B Testing
    •Custom HTTP Headers & Cookie Management
    •User Authentication and Authourization
    •Localization and Personalization
    @lauragift_

    View Slide

  70. @lauragift_

    View Slide

  71. DATA STORAGE ON THE EDGE
    @lauragift_

    View Slide

  72. WORKERS KV
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  77. await NAMESPACE.list();
    @lauragift_

    View Slide

  78. R2
    @lauragift_

    View Slide

  79. 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_

    View Slide

  80. R2 BINDINGS
    # wrangler.toml
    [[r2_buckets]]
    binding = 'MY_BUCKET' # <~ valid JavaScript variable name
    bucket_name = ''
    @lauragift_

    View Slide

  81. D1
    @lauragift_

    View Slide

  82. View Slide

  83. export default {
    async fetch(request, env, ctx) {
    const { pathname } = new URL(request.url)
    if (pathname === '/num-products') {
    const { result } = await env.DB.get(`SELECT count(*) AS num_products FROM Product;`)
    return new Response(`There are ${result.num_products} products in the D1 database!`)
    }
    }
    }
    @lauragift_

    View Slide

  84. export default {
    async fetch(request, env, ctx) {
    const { pathname } = new URL(request.url)
    if (pathname === '/num-products') {
    const { result } = await env.DB.get(`SELECT count(*) AS num_products FROM Product;`)
    return new Response(`There are ${result.num_products} products in the D1 database!`)
    }
    }
    }
    @lauragift_

    View Slide

  85. WHEN not TO USE CLOUDFLARE WORKERS

    View Slide

  86. @lauragift_

    View Slide

  87. USE CASES WONT RECOMMEND
    Data Latency - Database is not hosted on the Edge!
    @lauragift_

    View Slide

  88. USE CASES WONT RECOMMEND
    Requires large amount of compute resources to run.
    @lauragift_

    View Slide

  89. Workers Examples
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  94. GEOLOCATION BASED REDIRECTS
    export default {
    async fetch(request: Request): Promise {
    const { cf } = request
    if ( cf?.country === "NL") {
    return Response.redirect("https://cloudflare.com")
    }
    },
    };

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  99. A/B TESTING REMOTE ORIGINS
    export default {
    async fetch(request: Request): Promise {
    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_

    View Slide

  100. A/B TESTING REMOTE ORIGINS
    export default {
    async fetch(request: Request): Promise {
    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_

    View Slide

  101. A/B TESTING REMOTE ORIGINS
    export default {
    async fetch(request: Request): Promise {
    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_

    View Slide

  102. A/B TESTING REMOTE ORIGINS
    export default {
    async fetch(request: Request): Promise {
    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_

    View Slide

  103. A/B TESTING REMOTE ORIGINS
    export default {
    async fetch(request: Request): Promise {
    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_

    View Slide

  104. A/B TESTING REMOTE ORIGINS
    export default {
    async fetch(request: Request): Promise {
    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);
    }
    },
    };

    View Slide

  105. WHAT WE'VE LEARNED TODAY?
    @lauragift_

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  109. 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_

    View Slide

  110. 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_

    View Slide

  111. 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_

    View Slide

  112. FURTHER RESOURCES

    View Slide

  113. FURTHER RESOURCES
    • Cloudflare Workers Documentation

    View Slide

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

    View Slide

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

    View Slide

  116. FURTHER RESOURCES
    • Cloudflare Workers Documentation
    • Cloudflare Pages Documentation
    • Cloudflare Blog - blog.cloudflare.com
    • Cloudflare Devs Discord

    View Slide

  117. THANK YOU!
    @lauragift_

    View Slide