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
Web Frontend
Application
CDN
Core
Web Frontend
Application
Web Frontend
Web Frontend
Service Provider Edge
Edge Node
Parts of
Application
Edge Node
Parts of
Application
Edge Node
Parts of
Application
Core
Service Provider Edge
Web Frontend
Edge Node
Application
Web Frontend
Edge Node
Application
Web Frontend
Edge Node
Application
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
Edge Functions </>
KV
DO
D1
integrates with
deploys to
uses
-Providers
CDN
Edge Functions </>
KV
DO
D1
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
updates
KV
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.
Kontakt
X:
LinkedIn:
Xing:
Thank you!
Code:
Live:
Guide:
Edge Computing For Frontend Web Development (iJS Munich 2023)
By Nils Röhrig
