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
-
AWS SAM
-
Azure Functions
-
Begin
-
Cloudflare
-
Deno Deploy
-
GCP
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
Thanks!
Functional Web Apps
By Simon MacDonald
Functional Web Apps
- 1,029