Le futur du web
est sur la
périphérie du réseau

Qui en parle ?

Qui en parle ?

Cloud Providers

screenshot of cloudflare blog introducing workers screenshot of vercel edge functions screenshot of netlify edge page screenshot of aws edge page

Qui en parle ?

Frameworks JavaScript

screenshot of sveltekit app on the edge screenshot of vercel templates for frameworks on the edge screenshot of Qwik home page

Page de test

Page de test

Description

description of the project

Les pages dynamiques : historique

Les pages dynamiques : historique

2000's : le serveur au pouvoir

PHP, Java, JSF...

Les pages dynamiques : historique

2010's : si tu peux le faire en JavaScript, fais-le en JavaScript

Angular, React, Vue, Node, Webpack...

Les pages dynamiques : historique

2020's : finalement les serveurs c'est pratique

SSR, SSG, WASM, Rust, esbuild...

Sans oublier...

Sans oublier...

d'autres fonctionnalités

  • Authentification
  • Redirections
  • A/B Testing
  • Feature Flipping
  • API Rate Limiting
  • ...

Le futur du web est sur les serveurs

Tweet de Kent C. Dodds disant que le futur du web est sur les serveurs

Comment on fait un serveur ?

Comment on fait un serveur ?

containers serverless

Comment on fait un serveur ?

Fonctions Lambda

code for lambda function

Le problème actuel

Le problème actuel

World map with lambda functionWorld map with lambda functionWorld map with lambda function

Le problème actuel

table of response times

Le problème actuel

Le problème actuel

Le problème actuel

Le problème actuel

Le futur du web
sur le
réseau périphérique

Edge Server

(Serveur périphérique)

Edge Server https://www.cloudflare.com/learning/cdn/glossary/edge-server/

Edge Server

(Serveur périphérique)

Edge Network https://www.cloudflare.com/learning/cdn/glossary/edge-server/

Edge Network (AWS)

(Réseau périphérique)

AWS Edge Network https://aws.amazon.com/cloudfront/features

Edge Network (Cloudflare)

(Réseau périphérique)

Cloudflare Edge Network https://www.cloudflare.com/network/

Content Delivery Network (CDN)

Réseau de Diffusion de Contenu (RDC)

CDN schema https://www.cloudflare.com/learning/cdn/what-is-a-cdn/

Edge Computing

(Informatique périphérique)

Edge computing

Edge Functions

Fonctions déployées sur le réseau périphérique

Bénéfices :

  • Faible temps de réponse
  • Faible temps de démarrage (cold boot)
  • Peuvent être exécutées avant le cache
  • Support du WebAssembly

Edge Functions

Fonctions déployées sur le réseau périphérique

Limitations :

  • Contraintes plus strictes:
    • limite de taille : 1 MB (vs 50 MB)
    • limite de mémoire : 128 MB (vs 1024 MB)
    • limite de durée : 5s (vs 10s)
  • APIs Node non supportées (e.g. APIs filesystem)
  • Pas de node_modules dans le bundle

Edge Functions

Fonctions déployées sur le réseau périphérique

Tweet de Kent C. Dodds disant que le futur du web est sur les serveurs

Ça donne quoi ?

Ça donne quoi ?

Sur Vercel

Code for lambda function on the edge

Ça donne quoi ?

Ça donne quoi ?

Ça donne quoi ?

Ça donne quoi ?

Ça donne quoi ?

Le stockage sur le réseau périphérique

Le stockage sur le réseau périphérique

Stockage clé-valeur

cloudflare icon Cloudflare

Workers KV

vercel icon Vercel

Edge Config

Et si on utilisait...

Et si on utilisait...

... du cache ?

meme mind blown

Avec du cache

Code de la fonction

code for a lambda function with cache

Avec du cache

Temps de réponse de l'API

Avec du cache

Temps de réponse de l'API

Au-delà des APIs...

Au-delà des APIs...

d'autres usages des edge functions

  • Redirections
  • Authentification
  • A/B Testing
  • Feature Flipping
  • API Rate Limiting
  • ...

Au-delà des APIs...

d'autres usages des edge functions

Vercel Middleware

Vercel middleware schema https://vercel.com/docs/concepts/functions/edge-middleware

Au-delà des APIs...

Redirection i18n

code for middleware authentication

Au-delà des APIs...

Modification de headers

code for headers modification

Comment on démarre ?

(rtfm)

the future is now

Ressources

https://future-on-the-edge.vercel.app/

cloudflare icon Cloudflare

vercel icon Vercel