Functional Web Apps

The revenge of dynamic web apps

Simon MacDonald

@macdonst

What is a dynamic web app?

• Not static! HTML is rendered on-demand

• Completely required for building an API

• Database backed (full stack!)

Three-Tiered Architecture

Traditional dynamic web app ecosystem

Rails Logical Architecture

Rails Physical Architecture

Rails Physical Architecture

• 3 tier logical architecture is not the same as the physical infra

  • Difficult to deploy when infra is not versioned

  • Slow rolling deployment

  • Servers are difficult to scale horizontally

• Slow to render HTML because traditional databases are slow

• Maintenance cost is huge and not fun (patching, updating, debugging, etc)

• Background jobs are required for performance but a clunky bolt on

  • pub/sub, queues, cron

📘Book Rec

⭐⭐⭐⭐⭐

Enter the

JAMstack logical architecture

JAMstack physical architecture

JAMstack

immutable deployment

• Slow build

• Dynamic is a second class citizen

• Complex ecosystem of libraries, tooling and services need glue

The Rebound Effect

In conservation and energy economics, the rebound effect (or take-back effect) is the reduction in expected gains from new technologies that increase the efficiency of resource use, because of behavioral or other systemic responses. These responses diminish the beneficial effects of the new technology or other measures taken.

Rebound Effect

The expected gains from a new JavaScript framework is always less because of the amount of JavaScript being deployed on the client. This additional JavaScript diminishes the beneficial effects of the new technology and in some cases makes things worse.

The

• HTML first (dynamic personalization and a11y is the priority)

• Cloud function centric mode

• On-demand database

• Declarative deployment (explicitly defined Infra as Code)

FWA: A Different Approach

Functional Web App logical architecture

Functional Web App physical architecture

Functional Web App advantages

• Power: build with a full-stack

• Way more fun! Less maintaining, more shipping

• Inclusive, fast, and accessible web consumer experience

But what about…

• Coldstart *

• Database story still emergent (DynamoDB, Cosmos, Planetscale, FaunaDB)

• Declarative Infra-as-Code solutions are oft complex

• All-in with managed services means all-in with a cloud vendor

A growing ecosystem

• OpenJS Architect

• AWS SAM

• Azure Functions

• Begin

• Cloudflare

• Deno Deploy

• GCP

Functional Web Apps

in the wild

• BBC

• A Cloud Guru

• Bustle

• Begin

Static App → Functional Web App

• A modern architectural pattern for dynamic apps:

  • HTML-first progressive enhancement

  • Cloud functions centered development model

  • Managed database built-in

  • Explicit declarative deployment (aka Infra-as-Code or IaC)

Learn More

Thanks!