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

Model

View 

Controller

Traditional dynamic web app ecosystem

Rails Logical Architecture

Model

View 

Controller

Rails Physical Architecture

Rails Physical Architecture

Traditional dynamic app problems

  • 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

Pre-rendering HTML and served via CDN. Dynamic functionality initiated by JavaScript at runtime.

1

Totally static

Authortime build of all presentation/business logic delivered as static assets

2

Immutable deployment

Empowers the frontend web developers

3

Outsource backend

JAMstack logical architecture

JAMstack physical architecture

JAMstack

immutable deployment

JAMstack tradeoffs

  • 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

*  there are two solutions to coldstart for AWS Lambda: write small functions or pre-provision capacity

A growing ecosystem

Functional Web Apps

in the wild

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

Check out https://github.com/architect/architect

Build your first app on https://begin.com

Read https://fwa.dev

Tell me how wrong I am

@macdonst

Thanks!

Functional Web Apps

By Simon MacDonald

Functional Web Apps

  • 1,060

More from Simon MacDonald