Full Stack Web Apps Without a Backend, and More!

✨ UNIVERSAL HOSTLESS S U B S T R AT E 🌖 🌑 F U L L S TA C K W E B A P P S W I T H O U T A B A C K E N D … A N D M O R E 🚀

A U N I V E R S A L H O S T L E S S S U B S T R AT E B R O O K LY N Z E L E N K A , @ e x p e d e

A U N I V E R S A L H O S T L E S S S U B S T R AT E B R O O K LY N Z E L E N K A , @ e x p e d e • Cofounder/CTO at Fission — https://fission.codes • Functional Programming • Founder of the Vancouver FP meetup • Mainly known in FP-land for Witchcraft • Fission is very much informed by FP mindset • Universality, orthogonality, properties, &c • PLT, VMs, Distributed Systems • Previously an Ethereum Core Dev • Spending a lot of time with IPFS, ECC, CRDTs, & Bloom Clocks

A U N I V E R S A L H O S T L E S S S U B S T R AT E W H AT W E ’ R E C O V E R I N G

A U N I V E R S A L H O S T L E S S S U B S T R AT E W H AT W E ’ R E C O V E R I N G • Content addressing • Global file system • User-controlled auth • Portable compute

A U N I V E R S A L H O S T L E S S S U B S T R AT E S TA C K

A U N I V E R S A L H O S T L E S S S U B S T R AT E S TA C K • Server — Haskell (servant-server) • CLI — Haskell (servant-client) • Fission Drive (web file explorer) — Elm • Browser-based Authorization — Elm • Browser SDK — TypeScript • IPFS Responsive Image Resizer — Rust (native & wasm)

W E H AV E S T I C K E R S !

W E H AV E S T I C K E R S ! PING ME AND WE’LL MAIL SOME

SOME BACKGROUND CONTEXT

SOME BACKGROUND CONTEXT W H AT S E T O F P R O B L E M S I S F I S S I O N S O LV I N G ?

BACKGROUND CONTEXT S H I P P I N G A W E B A P P I N 2 0 2 0 I S TO O H A R D ! Backends DevOps • Multi-tenant • Expensive & complex • Increasingly sharded • Very much its specialty • Highly concurrent • We’re close to peak Kubernetes • Data leaks everywhere 😱 • ACL complexity & GDPR

BACKGROUND CONTEXT F R O N T E N D I S E AT I N G T H E B A C K E N D 🍔 😋 • Frontend is never going away • Browsers keep getting more powerful (e.g. WebAssembly, WebAuthN, WebCrypto) • Trend to more granular/edge (Cloudflare Workers or Fastly Edge Cloud) • Empower front end devs / full stack web apps for the 20’s and beyond 🚀 LAMP C O N TA I N E R S SERVERLESS W E B N AT I V E ☁ 🌐 λ

BACKGROUND CONTEXT CONSTRAINTS

BACKGROUND CONTEXT CONSTRAINTS • Everything for a modern web app directly in the browser • Vanilla browsers only — no plug-ins • As secure or better than traditional cloud infra • Equal or easier UX • Users fully control their data • Apps must work both offline and networked • Infrastructure agnostic — “local is the same as prod”

BACKGROUND CONTEXT W E H AV E S O M E N E W B U I L D I N G B L O C K S ! • Start thinking “universally” • WebCrypto API • Self-sovereign identity / DID • Content addressing • Macaroons & SPKI auth • CRDTs (Disclaimer: taken care of under the hood, but interoperable) • Immutable (functional) data structures at web scale!

BACKGROUND CONTEXT “ W E B N AT I V E ” + COMPUTE IDENTITY STORAGE 🔨 Build web apps more like native mobile & desktop 🛂 Password-less login, end-to-end encryption, secure by default 💽 Local-first, secure, user controlled, global file & hosting platform

BACKGROUND CONTEXT U P S H OT ?

BACKGROUND CONTEXT U P S H OT ? • Go from zero to production on a plane ✈ • Move data to compute and vice versa 🔄 • Scale sub-linearly 📈 • Serve areas that lack sufficient cloud hardware 🖥 • Anyone can be a service provider (lower bar to entry) 💁💁

CONTENT ADDRESSING

CONTENT ADDRESSING 🕸 M E E T T H E I N T E R P L A N E TA R Y F I L E S Y S T E M 👋

CONTENT ADDRESSING I N T E R P L A N E TA R Y F I L E S Y S T E M

CONTENT ADDRESSING L O C AT I O N A D D R E S S I N G

CONTENT ADDRESSING L O C AT I O N A D D R E S S I N G • Predominantly single-source (per file) server/client

CONTENT ADDRESSING L O C AT I O N A D D R E S S I N G • Predominantly single-source (per file) server/client • Like a key/value store {ip => {path => content}}

CONTENT ADDRESSING L O C AT I O N A D D R E S S I N G • Predominantly single-source (per file) server/client • Like a key/value store {ip => {path => content}} • “Location addressing” • DNS maps names to IP addresses • Focused on the physical network VIRTUAL ADDRESS P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING L O C AT I O N A D D R E S S I N G • Predominantly single-source (per file) server/client • Like a key/value store {ip => {path => content}} • “Location addressing” • DNS maps names to IP addresses • Focused on the physical network • Mutable addressing • www.foo.com/baz may be JSON today, but a video tomorrow • …or altered content VIRTUAL ADDRESS P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING CONTENT IDS VIRTUAL ADDRESS P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING CONTENT IDS • A layer of abstraction above location CONTENT ID VIRTUAL ADDRESS P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING CONTENT IDS • A layer of abstraction above location • Like a key/value store {hash(content) => content} CONTENT ID • Content hash AKA “content identifier” or CID • Special “universal” relationship to content VIRTUAL ADDRESS P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING CONTENT IDS • A layer of abstraction above location • Like a key/value store {hash(content) => content} CONTENT ID • Content hash AKA “content identifier” or CID • Special “universal” relationship to content VIRTUAL ADDRESS • Focused on the data P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING CONTENT IDS • A layer of abstraction above location • Like a key/value store {hash(content) => content} CONTENT ID • Content hash AKA “content identifier” or CID • Special “universal” relationship to content VIRTUAL ADDRESS • Focused on the data • Does not care where it lives P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING CONTENT IDS • A layer of abstraction above location • Like a key/value store {hash(content) => content} CONTENT ID • Content hash AKA “content identifier” or CID • Special “universal” relationship to content VIRTUAL ADDRESS • Focused on the data • Does not care where it lives • Still have paths • Immutable DAG • Why no loops? P H Y S I C A L L O C AT I O N

CONTENT ADDRESSING L I N K E D D ATA

CONTENT ADDRESSING L I N K E D D ATA { Qm123456…: { data: “Hello world”, links: [ {name: “company”, hash: Qmabcdef…} {name: “license”, hash: Qmzyxwvu…} ] } }

CONTENT ADDRESSING L I N K E D D ATA { { Qm123456…: { data: “Hello world”, links: [ {name: “company”, hash: Qmabcdef…} {name: “license”, hash: Qmzyxwvu…} ] } } Qmabcdef…: { data: “FISSION”, links: [ {name: “city”, hash: Qm1gb5sn…}, {name: “about”, hash: Qmzyxwvu…} ] } }

CONTENT ADDRESSING L I N K E D D ATA { { Qm123456…: { data: “Hello world”, links: [ {name: “company”, hash: Qmabcdef…} {name: “license”, hash: Qmzyxwvu…} ] } } Qmabcdef…: { data: “FISSION”, links: [ {name: “city”, hash: Qm1gb5sn…}, {name: “about”, hash: Qmzyxwvu…} ] } } ipfs cat /ipfs/Qm123456…/company/about/founder => “Brooke”

CONTENT ADDRESSING RO U T I N G & LO O KU P 🔍🌊

CONTENT ADDRESSING RO U T I N G & LO O KU P 🔍🌊 💁

CONTENT ADDRESSING RO U T I N G & LO O KU P 🔍🌊 💻 💻 ☕ 💻 💁

CONTENT ADDRESSING RO U T I N G & LO O KU P 🔍🌊 💻 💻 💻 💻 💻 ☕ 💻 💻 💁 💻 💻 💻 💻 💻

CONTENT ADDRESSING RO U T I N G & LO O KU P 🔍🌊 💻 💻 💁 💻

CONTENT ADDRESSING O N E H U G E N A M E S PA C E T O R U L E T H E M A L L 💍 🌋

CONTENT ADDRESSING O N E H U G E N A M E S PA C E T O R U L E T H E M A L L 💍 🌋 • Same file = same hash • Zero file duplication per node • No matter when 🕓 • Replication = CDN-ish features • No matter where 🌍🌌 • Immutable data structures • No matter who 👩🔧🤖👩🚀👨🎤🦊 • Structural sharing = dedup blocks • Files & data living together! • Automerge, OrbitDB, &c

CONTENT ADDRESSING FISSION FILE SYSTEM

CONTENT ADDRESSING FISSION FILE SYSTEM • Unix file system interface

CONTENT ADDRESSING FISSION FILE SYSTEM • Unix file system interface • Same files across apps (think native apps instead of trad. web apps)

CONTENT ADDRESSING FISSION FILE SYSTEM • Unix file system interface • Same files across apps (think native apps instead of trad. web apps) • Fully immutable, temporal data structure • Peek & rollback (like Apple Time Machine for the web)

CONTENT ADDRESSING FISSION FILE SYSTEM • Unix file system interface • Same files across apps (think native apps instead of trad. web apps) • Fully immutable, temporal data structure • Peek & rollback (like Apple Time Machine for the web) • Event-sourced file system (apps can consume stream)

CONTENT ADDRESSING D R I V E — “ F U L LY U S E R C O N T R O L L E D D R O P B O X ” https://drive.fission.codes

UCAN

UCAN 🔑 C L I E N T- S I D E A U T H N & A U T H Z 👩🎤

STEP ONE U S E R I D S W I T H O U T A D ATA B A S E

U S E R I D S W I T H O U T A D ATA B A S E S TA N D A R D I Z AT I O N 🏢

U S E R I D S W I T H O U T A D ATA B A S E S TA N D A R D I Z AT I O N 🏢 • W3C, Microsoft, BC, etc • For users, devices, and more • Based on public-key cryptography • Truly “universal” UUIDs • Agnostic about backing

U S E R I D S W I T H O U T A D ATA B A S E S E L F - S O V E R E I G N I D E N T I T Y ( S S I ) 🔑 👩🎤

U S E R I D S W I T H O U T A D ATA B A S E S E L F - S O V E R E I G N I D E N T I T Y ( S S I ) 🔑 👩🎤 • Generate your own globally-unique, verifiable user ID!

U S E R I D S W I T H O U T A D ATA B A S E S E L F - S O V E R E I G N I D E N T I T Y ( S S I ) 🔑 👩🎤 • Generate your own globally-unique, verifiable user ID! • As many as you like 🤷

U S E R I D S W I T H O U T A D ATA B A S E S E L F - S O V E R E I G N I D E N T I T Y ( S S I ) 🔑 👩🎤 • Generate your own globally-unique, verifiable user ID! • As many as you like 🤷 • Many methods — we’re starting with did:key

U S E R I D S W I T H O U T A D ATA B A S E S E L F - S O V E R E I G N I D E N T I T Y ( S S I ) 🔑 👩🎤 • Generate your own globally-unique, verifiable user ID! • As many as you like 🤷 • Many methods — we’re starting with did:key • Not super readable, so publicize over DNS TXT record _did.USERNAME.fission.name

U S E R I D S W I T H O U T A D ATA B A S E S E L F - S O V E R E I G N I D E N T I T Y ( S S I ) 🔑 👩🎤 • Generate your own globally-unique, verifiable user ID! • As many as you like 🤷 • Many methods — we’re starting with did:key • Not super readable, so publicize over DNS TXT record _did.USERNAME.fission.name did:key:zBR4m3DNZHT1G8Nb2RHzgKK7TrWxEmJjZskgvFdncTthzUHzngyNKmKx4VKWEJE6sk4SE4Ka3kH92MxU2YC7CcePHy77GzZy8 Ed25519 — AAAAC3NzaC1lZDI1NTE5AAAAIB7/gFUQ9llI1BTrEjW7Jq6fX6JLsK1J4wXK/dn9JMcO

STEP TWO DISTRIBUTED READ CONTROL

DISTRIBUTED READ CONTROL OCAP / READ KEYS

DISTRIBUTED READ CONTROL OCAP / READ KEYS • ACLs • “Reactive access control” • Authority by association

DISTRIBUTED READ CONTROL OCAP / READ KEYS • ACLs • “Reactive access control” • Authority by association • OCAP • “Proactive” access control • Authority by possession • “You either have the key, or you don’t”

DISTRIBUTED READ CONTROL OCAP / READ KEYS • ACLs • “Reactive access control” • Authority by association • OCAP • “Proactive” access control • Authority by possession • “You either have the key, or you don’t” • “Just” normal AES-256 keys

DISTRIBUTED READ CONTROL MORE GRANULAR ACCESS: CRYPTREES 🔐🌳

DISTRIBUTED READ CONTROL MORE GRANULAR ACCESS: CRYPTREES 🔐🌳 • Public keys playing double duty: IDs and secure key exchange!

DISTRIBUTED READ CONTROL MORE GRANULAR ACCESS: CRYPTREES 🔐🌳 • Public keys playing double duty: IDs and secure key exchange! • Encrypt the encryption with more encryption • Each layer (file or dir) is encrypted with a key • Dirs contain keys for each sub dir / file • Recurse!

DISTRIBUTED READ CONTROL MORE GRANULAR ACCESS: CRYPTREES 🔐🌳 • Public keys playing double duty: IDs and secure key exchange! • Encrypt the encryption with more encryption • Each layer (file or dir) is encrypted with a key • Dirs contain keys for each sub dir / file • Recurse! root

DISTRIBUTED READ CONTROL MORE GRANULAR ACCESS: CRYPTREES 🔐🌳 • Public keys playing double duty: IDs and secure key exchange! • Encrypt the encryption with more encryption root • Each layer (file or dir) is encrypted with a key • Dirs contain keys for each sub dir / file • Recurse! 🔑 🔑

DISTRIBUTED READ CONTROL MORE GRANULAR ACCESS: CRYPTREES 🔐🌳 • Public keys playing double duty: IDs and secure key exchange! • Encrypt the encryption with more encryption root • Each layer (file or dir) is encrypted with a key • Dirs contain keys for each sub dir / file • Recurse! • Access granted to a directory and below • i.e. Same UX Dropbox/Google Drive • Full user controlled 🔑 🔑

DISTRIBUTED READ CONTROL MORE GRANULAR ACCESS: CRYPTREES 🔐🌳 • Public keys playing double duty: IDs and secure key exchange! • Encrypt the encryption with more encryption root • Each layer (file or dir) is encrypted with a key • Dirs contain keys for each sub dir / file • Recurse! • Access granted to a directory and below • i.e. Same UX Dropbox/Google Drive • Full user controlled • Revocation = key rotation & DH exchange 🔑 🔑

STEP THREE D E L E G AT E D W R I T E A C C E S S

D E L E G AT E D W R I T E A C C E S S S I D E - BY-S I D E

D E L E G AT E D W R I T E A C C E S S S I D E - BY-S I D E Now can also be: • Another device (same human) • A user’s peer (different human) • Some service

D E L E G AT E D W R I T E A C C E S S U C A N : U S E R C O N T R O L L E D A U T H O R I Z AT I O N N E T W O R K 🦜 Delegate 3 Delegate 2 Delegate 1 Root Proof • Solves for user-centrism • Decentralized delegation • Attenuation • Shrink size with CIDs • Assumes PKI

D E L E G AT E D W R I T E A C C E S S E A C H L AY E R F O L L O W S T H I S F O R M { “alg”: “RS256”, “typ”: “JWT“, “cty”: “JWT“ } { “iss”:“did:key:z1MdJPaWBebKxtE33AszRWYTF67wCLeFdcsqc3R87hyLKzBK…”, “aud”:“did:key:zBR4m3DNZHT1G8Nb2RHzgKK7TrWxEmJjZskgvFdncTthzUH…”, “scp”:“/public/photos/covid2020/”, “pty”:”APPEND_ONLY”, “prf”:<JWT PROOF>, “exp”:1589423547 } <SIGNATURE>

D E L E G AT E D W R I T E A C C E S S E A C H L AY E R F O L L O W S T H I S F O R M { “alg”: “RS256”, “typ”: “JWT“, “cty”: “JWT“ } { “iss”:“did:key:z1MdJPaWBebKxtE33AszRWYTF67wCLeFdcsqc3R87hyLKzBK…”, “aud”:“did:key:zBR4m3DNZHT1G8Nb2RHzgKK7TrWxEmJjZskgvFdncTthzUH…”, “scp”:“/public/photos/covid2020/”, “pty”:”APPEND_ONLY”, “prf”:<JWT PROOF>, Recursive “exp”:1589423547 } <SIGNATURE> Problem: gets pretty big

D E L E G AT E D W R I T E A C C E S S HASHING IT DOWN ⬛◼◾▪ { “alg”: “RS256”, “typ”: “JWT“, “cty”: “JWT“ } { “iss”:“did:key:z1MdJPaWBebKxtE33AszRWYTF67wCLeFdcsqc3R87hyLKzBK…”, “aud”:“did:key:zBR4m3DNZHT1G8Nb2RHzgKK7TrWxEmJjZskgvFdncTthzUH…”, “scp”:“/public/photos/covid2020/”, “pty”:”APPEND_ONLY”, “prf”:”QmaEmBULputJ5sAJX4bRQYwwWV2DUPnwNSz2R2eTvHV4DT”, “exp”:1589423547 } <SIGNATURE>

P O R TA B L E C O M P U T E

P O R TA B L E C O M P U T E ⚡ A D D M O R E P O W E R TO J S & WAS M A N D ST I R 🤖

P O R TA B L E C O M P U T E D Y N A M I C FA A S

P O R TA B L E C O M P U T E D Y N A M I C FA A S • Run everything locally by default • Good for devs with powerful machines • Slow for students with Chromebooks

P O R TA B L E C O M P U T E D Y N A M I C FA A S • Run everything locally by default • Good for devs with powerful machines • Slow for students with Chromebooks • Farm out longer running computation to service providers • …dynamically at runtime

P O R TA B L E C O M P U T E D Y N A M I C FA A S • Run everything locally by default • Good for devs with powerful machines • Slow for students with Chromebooks • Farm out longer running computation to service providers • …dynamically at runtime • Heavy compute, parallel workloads, &c

P O R TA B L E C O M P U T E APPROACH & TRADE-OFFS

P O R TA B L E C O M P U T E APPROACH & TRADE-OFFS • Code-as-data • Memoization • Compiler techniques at web scale (“world computer”) • Network latency (normally zero, now x) • Restricted subset (e.g. total) • Event-based w/ two-phase commit • Trusted (incl. AWS Lambda 🤷)

P O R TA B L E C O M P U T E T O TA L I T Y

P O R TA B L E C O M P U T E T O TA L I T Y Side Effects Pure Functions 👩💻

P O R TA B L E C O M P U T E E V E N T B AS E D ( A B ST R ACT U S E R ST R E A M, C R DTS )

P O R TA B L E C O M P U T E E V E N T B AS E D ( A B ST R ACT U S E R ST R E A M, C R DTS ) Off-Platform Side Effect Stream Platform Effect Stream Pure Function Stream Base Event Stream

A U N I V E R S A L H O S T L E S S S U B S T R AT E RECAP

A U N I V E R S A L H O S T L E S S S U B S T R AT E RECAP • Build and use fully locally • No such thing as “deployment” • Zero config • Default: only serve the app, not data • Efficient bandwidth

A U N I V E R S A L H O S T L E S S S U B S T R AT E RECAP • One identity for all services • Build and use fully locally • Flexible client-side auth • No such thing as “deployment” • Military-grade security • Zero config • User owned data • Default: only serve the app, not data • Share nothing with site/app by default • Efficient bandwidth • Flexible FaaS without pre-deployment • Offline-first and local-network aware

https://fission.codes https://talk .fission.codes h t t p s : / /d i s c o r d . g g / z A Q B D E q 🇩🇪 T H A N K Y O U , B E R L I N F P 🎉 brooklyn@fission.codes g i t h u b . c o m /e x p e d e @expede

Full Stack Web Apps Without a Backend, and More!

Slide 1

Slide 2

Slide 3

Slide 4

Slide 5

Slide 6

Slide 7

Slide 8

Slide 9

Slide 10

Slide 11

Slide 12

Slide 13

Slide 14

Slide 15

Slide 16

Slide 17

Slide 18

Slide 19

Slide 20

Slide 21

Slide 22

Slide 23

Slide 24

Slide 25

Slide 26

Slide 27

Slide 28

Slide 29

Slide 30

Slide 31

Slide 32

Slide 33

Slide 34

Slide 35

Slide 36

Slide 37

Slide 38

Slide 39

Slide 40

Slide 41

Slide 42

Slide 43

Slide 44

Slide 45

Slide 46

Slide 47

Slide 48

Slide 49

Slide 50

Slide 51

Slide 52

Slide 53

Slide 54

Slide 55

Slide 56

Slide 57

Slide 58

Slide 59

Slide 60

Slide 61

Slide 62

Slide 63

Slide 64

Slide 65

Slide 66

Slide 67

Slide 68

Slide 69

Slide 70

Slide 71

Slide 72

Slide 73

Slide 74

Slide 75