Back in the day...

...we had to manage our own servers.

Then, we got webspace...

...and the opportunity to rent servers.

This lead to “The Cloud”...

...and subsequently to containers and serverless computing.

From these developments, even easier platforms emerged.

An Exploration of Serverless Full-Stack Development

Nils Röhrig | Loql

What’s the deal with Cloudflare® and Vercel?

Which caveats to be aware of?

III

What the heck is a “meta-framework”?

Did you say “SvelteKit”?

Show me the code!

What’s the deal with Cloudflare® and Vercel?

Cloudflare

, Inc.

Cloudflare, Inc.

Web Security

Cloudflare, Inc.

Web Security

Cloudflare, Inc.

Web Security

Content Delivery

Cloudflare, Inc.

Web Security

Content Delivery

Cloudflare, Inc.

Web Security

Content Delivery

Developer Platform

Cloudflare, Inc.

Web Security

Content Delivery

Developer Platform

Cloudflare, Inc.

Web Security

Content Delivery

Developer Platform

...and much more!

Cloudflare, Inc.

Web Security

Content Delivery

Developer Platform

...and much more!

Developer Platform

Cloudflare Pages™

Cloudflare Workers®

Cloudflare D1™

Developer Platform

Cloudflare Pages™

Cloudflare Workers®

Cloudflare D1™

Cloudflare Pages

A serverless full-stack developer platform

[that enables developers to]

Build, deploy, and deliver trusted full-stack applications in a fraction of the time.

https://www.cloudflare.com/developer-platform/pages/

Cloudflare Pages

Server by Adrien Coquet from Noun Project (CC BY 3.0)

Laptop by Adrien Coquet from Noun Project (CC BY 3.0)

GitHub

Gitlab

Wrangler CLI

CDN

deploy to

Cloudflare Workers

Run serverless code with exceptional performance, reliability, and scale

https://www.cloudflare.com/developer-platform/workers/

Cloudflare Workers

Server by Adrien Coquet from Noun Project (CC BY 3.0)

world by Adrien Coquet from Noun Project (CC BY 3.0)

script by Adrien Coquet from Noun Project (CC BY 3.0)

User by Adrien Coquet from Noun Project (CC BY 3.0)

GitHub

Gitlab

Wrangler CLI

deploy to

Edge Location

Nearby User

Cloudflare D1™

Create a serverless relational database in seconds with D1.

https://www.cloudflare.com/developer-platform/d1/

Cloudflare D1

world by Adrien Coquet from Noun Project (CC BY 3.0)

Data by Adrien Coquet from Noun Project (CC BY 3.0)

script by Adrien Coquet from Noun Project (CC BY 3.0)

Server by Adrien Coquet from Noun Project (CC BY 3.0)

replicate

Edge Location

Regional Data Centre

What’s the deal with Cloudflare® and Vercel?

Vercel

Web Hosting

Vercel

Web Hosting

Vercel

Web Hosting

Vercel

Developer Tools

Web Hosting

Vercel

Developer Tools

Web Hosting

Vercel

Developer Tools

Managed Infrastructure

Vercel Hosting

Server by Adrien Coquet from Noun Project (CC BY 3.0)

Laptop by Adrien Coquet from Noun Project (CC BY 3.0)

GitHub

Gitlab

Vercel CLI

CDN

deploy to

Vercel Functions

Server by Adrien Coquet from Noun Project (CC BY 3.0)

world by Adrien Coquet from Noun Project (CC BY 3.0)

script by Adrien Coquet from Noun Project (CC BY 3.0)

User by Adrien Coquet from Noun Project (CC BY 3.0)

Regional Data Centre

Edge Location

Nearby User

GitHub

Gitlab

Vercel CLI

deploy to

Edge Functions

Serverless Functions

Vercel Postgres

Vercel Postgres is a serverless SQL database designed to integrate with Vercel Functions.

Vercel Postgres

world by Adrien Coquet from Noun Project (CC BY 3.0)

Data by Adrien Coquet from Noun Project (CC BY 3.0)

Regional Data Centre

Nearby User

Which caveats to be aware of?

It can be expensive!

Limited runtime, fast execution,
globally distributed.

Full environment, slow cold starts,
regional data centres.

Vendor lock-in.

III

What the heck is a “meta-framework”?

The Full Stack

Browser

(Interactivity)

View

(Server-side rendering)

Controller

(Routing)

Model

(Business Logic)

Database

(Data Model)

Meta-Framework Scope

Traditional Web Framework Scope

Cloudflare / Vercel + Meta-Framework = ✅

Did you say “SvelteKit”?

SvelteKit is a framework for rapidly developing robust, performant web applications using Svelte.

https://svelte.dev/docs/kit/introduction

Code Based Routing

request

match

Route Definitions

Route Code

Laptop by Adrien Coquet from Noun Project (CC BY 3.0)

script by Adrien Coquet from Noun Project (CC BY 3.0)

File Based Routing

request

match

File System

Route File

Laptop by Adrien Coquet from Noun Project (CC BY 3.0)

script by Adrien Coquet from Noun Project (CC BY 3.0)

Folder by Adrien Coquet from Noun Project (CC BY 3.0)

https://your.host/articles/slug

https://your.host/about-me

src/routes/about-me/+page.svelte

Special purpose

Svelte component

src/routes/about-me/+page.svelte

<h1>About me</h1>
<p>Hi, I'm Nils!</p>

src/routes/articles/[slug]/+page.svelte

page by Adrien Coquet from Noun Project (CC BY 3.0)

src/routes/articles/[slug]/+page.server.js

Loads data and processes forms on the server. Returns data available within data and form.

+page.server.js

Loads data on the client and on the server. Returns data available within the data prop.

+page.js

src/routes/articles/[slug]/+page.svelte

<script>
  export let data;
</script>

<img src={data.article.headerImageUrl} alt="" />

<h1>{data.article.title}</h1>

{@html data.article.content}

src/routes/articles/[slug]/+page.server.js

export function load({ params }) {
  const article = getArticleBySlug(params.slug);
  
  if(!article) {
    error(404);
  }
  
  return {
    article
  }
}

Form Actions

enters form data

sends form data

processes form data

sends redirect

requests page

produce HTML

sends HTML

renders HTML

sends visual info

Form Actions

enters form data

sends form data

processes form data

sends redirect

requests page

produces HTML

sends HTML

renders HTML

sends visual info

Happy how-the-

web-worked-forever-

day!

Server by Adrien Coquet from Noun Project (CC BY 3.0)

web by Adrien Coquet from Noun Project (CC BY 3.0)

User by Adrien Coquet from Noun Project (CC BY 3.0)

src/routes/form/+page.svelte

<script>
	export let form;
    $: errors = form?.errors ?? [];
</script>

<form method="post" use:enhance>
	{#each errors as error}
    	<p class="error">{error.message}</p>
    {/each}
    
    <label for="email">
    	E-mail:
        <input name="email" id="email" type="email">
    </label>
    
    <label for="password">
    	Password: <input name="password" id="password" type="password">
    </label>
    
    <button>Login</button>
</form>

src/routes/form/+page.server.js

export const actions = {
	async default() {
    	// ...default action
    }
    
    // usage: 
    // <html method="post"></html>
}

// OR

export const actions = {
	async namedActionOne() { /* ... */ },
    // ...
    async namedActionN() { /* ... */ }
    
    // usage: 
    // <html method="post" action="?/namedActionX"></html>
}

src/routes/form/+page.server.js

export const actions = {
	async default({ request }) {
    	const formData = await request.formData();
        
        const [errors] = validate(formData);
        
        if(errors) {
        	fail(400, { errors });
        }
        
        const [loginErrors] = login(
        	formData.get("email"),
            formdata.get("password")
        );
        
        if(loginErrors) {
        	fail(401, { errors });
        }        
        
        redirect("/secured-area");
    }
}

SvelteKit ❤️ Cloudflare & Vercel

SvelteKit Adapters

SvelteKit Application

Platform-specific adapter

uses

adapts to

Cloudflare

Vercel

Netlify

Azure

Cloud Run

...

Show me the code!

Contact

@drunknzombiecow

linkedin.com/in/nilsroehrig/

LinkedIn:

xing.com/profile/Nils_Roehrig2

Xing:

Thank you very much!

nilsroehrig/couchfinder

couchfinder.pages.dev

Code:

Cloudflare:

couchfinder.vercel.app/

Vercel: