Edge Computing For Frontend Web Development

Nils Röhrig | Loql

Agenda

Agenda

What is Edge Computing?

What use does Edge Computing have in web development?

What are SvelteKit & Cloudflare Pages?

How could an app be built with these tools?

What is Edge Computing?

Edge computing is computing that takes place at or near the physical location of either the user or the source of the data.

Parts of an Edge Network

Core

End-user premises edge

Device edge

Service provider edge

End user

What use does Edge Computing have in web development?

Core

End-user premises edge

Device edge

Service provider edge

End user

Core

End-user premises edge

Device edge

Service provider edge

End user

CDN

Core

Web Frontend

Web Frontend

Web Frontend

Service Provider Edge

Edge Node

Parts of
Application

Edge Node

Parts of
Application

Edge Node

Parts of
Application

Core

Sync data

Sync data

What are SvelteKit & Cloudflare Pages?

SvelteKit is a framework for ra-pidly developing robust, performant web applications using Svelte.
  • Components
  • Interactivity
  • State
  • ... UI Stuff
  • Routing
  • Data Loading
  • Form Handling
  • Build Optimization
  • SSG & SSR
  • Platform Independence
  • ... App Stuff

Meta framework for

Cloudflare Pages is a JAMstack platform for frontend developers to collaborate and deploy websites.

 CDN

deploys to

-Providers

 CDN

integrates with

deploys to

-Providers

 CDN

integrates with

deploys to

uses

-Providers

 CDN

integrates with

deploys to

uses

runs code at

How could an app be built with these tools?

Set it up in 4 simple steps...

3. Create a SvelteKit app

4. Push app to repository

1. Create a GitHub repository

2. Create a Cloudflare Pages project from repository

Set it up in 4 simple steps...

Introducing

  • Minimal blog app
  • CRUD for blog posts
  • Built with SvelteKit
  • Deployed to Cloudflare Pages
  • Auth.js + GitHub OAuth
  • Workers KV as storage

Why Workers KV?

Worker Code </>

Why Workers KV?

replicates

replicates

Edge Nodes

KV Cache

KV Cache

KV Cache

updates

Runtime API

list()

get()

put()

delete()

uses

  • Propagates in up to 60 seconds
  • Pairs are eventually-consistent
  • Optimized for frequent reading
  • Suboptimal frequent writing

Storage in Workers KV

Why Cloudflare Pages?

application

Target platforms

Platform-specific adapter

uses

adapts to

Demo & Code Walkthrough

Findings

Findings

Edge web apps run in close proximity to the user

1.

Tools like SvelteKit can ease the development

2.

Platforms like Cloudflare can ease deployment

3.

Edge Computing For Frontend Web Development (iJS Munich 2023)

By Nils Röhrig

Edge Computing For Frontend Web Development (iJS Munich 2023)

  • 583