Productive web applications that run only on the frontend

Productive web applications
that run only on the frontend

Stefan Adolf
Developer Ambassador - Turbine Kreuzberg
@stadolf

Back in the days.
2005
● PHP on your Apache webserver
You upload backend code & templates
(“Wordpress”)
● On request the webserver delegates to PHP
● PHP queries the database, renders the template,
yields to Apache, yields HTML to th browser
● Apache delivers static assets, “enhancing” your
frontend.
2015
● Node on your Nginx Webserver
● You write an API service (express)
● The webserver delivers the static SPA frontend and its
assets
● The webserver proxies API requests to your express app
● Your express app queries a content management API to
fetch content
● The frontend rerenders after interacting with the API

Client
domain.com
whois?
DNS
www.domain.com
Back in the days.

Webserver /
Proxy
Client
domain.com
whois?
DNS
www.
api.
www.domain.com
Back in the days.

Webserver /
Proxy
Client
Application
domain.com
whois?
DNS
www.
api.
www.domain.com
Back in the days.

Webserver /
Proxy
Client
Application
Client
domain.com
whois?
DNS
www.
api.
www.domain.com
api.domain.com
Back in the days.

Servers are needed
to add trust to applications
When I talk to www.bank.co, I know, it’s my bank.

Servers are needed
to keep secrets from users
www.bank.co has API keys for a Google API

Servers are needed
to stay online if you go oﬄine

Servers are needed
to agree on access points for apps

Servers are needed
to safely store and distribute data

What servers practically do, today.
DNS: www.code-school.com -> CNAME virtual.host.hoster.com -> A 199.277.388.15
Web: I’m here, and I proxy HTTP requests to Application
Application: I’m here to execute logic upon behind your request (“/api/users/17?ﬁelds=name”)
Database: I’ll keep track of the data
Authorization: I’m keeping your users’ passwords safe.

Webserver /
Proxy
Client
Application
Client
www.
api.

PaaS / BaaS to the rescue.
(aka “the cloud”)

PaaS / BaaS
Heroku: you write code, I run it. Magically.
Firebase: you write API services, I run them + a magically fast database.
Netlify: you build a static site, I deliver it, fast (on CDN)
Contentful: I replace your CMS API with an API driven CMS service that your users can use.
AWS Lambda: you write a function, I run it without an environment and care about the routing.

The web as we know it, is broken.
Restart breaking servers Trust black boxed cloud monoliths

Decentralize all the things!
Decentralized things can’t break.

Decentralized (P2P) ﬁle systems
Everyone (you!) creates a local repository and runs an ipfs daemon on top of that
● Also works within a browser window (js-ipfs)
● Each daemon gets a unique identity on startup
All daemons connect to each other by using a P2P network (libp2p)
● Discovery is based on the peer identities
● Peers must be able to dial each other
● All peers are routable through this dynamic network
● All peers forward requests to their neighbors

Content on IPFS
Content is addressed by a Content ID (CID) that’s a hash of a Merkle tree of its contents
Content is addressed globally by that CID. The CID represents the binary content.
IPFS’ API feels as if it was a ﬁlesystem:
● ipfs add some_file.txt / ipfs add -r directory
● ipfs cat Qm.../file.txt
● ipfs get Qm.../image.jpg
● ipfs ls Qm.../folder
QmRJYzy24v53ndShLdNytfKr59tKnFQaLs1Sso8pAdikcW
(bafybeibmbfyzctddrxfeu4dc5swvso5tc3mcbhxopycvm7xdvmewqjv3t4)

Content Resolution
QmRJYzy24v53ndShLdNy
tfKr59tKnFQaLs1Sso8pAdikc
W
Ipfs add

Content Resolution
W
Ipfs add
I have QmRJYzy24...

Content Resolution
W
Ipfs add
Do you know QmRJYzy24...?

Content Resolution
W
Ipfs add
I have QmRJYzy24...

Content Resolution
W
Ipfs add
I have QmRJYzy24...
I have QmRJYzy24...

The main issue: connectivity
ipfs swarm peers
ipfs swarm connect /ip4/167.71.52.88/udp/4001/
quic/p2p/QmXAghnP7DqmAEE7Zx4SxMo3UcUVSn8f1xDCT6x1ysYM
Sj
Use the Browser Plugin to redirect all ipfs content to your local
gateway
http://bafybeiczz7umdkjzd6wbjfx6mfc3l3sddjsckf7hc4vyphvhg6rx
adnp5a.ipfs.localhost:8080/

IPFS & HTTP: Web gateways
Each node comes with a builtin web gateway (8080)
Use web gateways to retrieve IPFS data via HTTP (here are some public ones)
Once browsers support ipfs:// natively they might become obsolete
Subdomain based gateways are great to deliver decentralized SPAs
http://bafybeibtpm4gimnctdimxpjoeybuzlnkmuo25xgi54frqhhso4jd6hxtzm.ipfs.localhost:8080/

Demo
Adding / getting content
IPFS webui
peering

Host a static website
on your local machine

Host your own website
1. Create a website.
2. ipfs add -r website/build
3. Share the CID with your friends
4. They can get your website by ipfs get CID
5. Don’t shut down your PC
6. If you change one character, tell them the new CID
Caveat: works only with subdomain based gateways (because of relative asset urls)

Keeping content online, permanently
Aka “pinning” or “permastores”
IPFS nodes can be advised to keep content. Ipfs pin add <cid>
You can ask (or pay) others if they pin content for you
Or you use a trustless storage protocol

IPNS: link to changing content
ipfs add -r your_home_page
ipfs name publish <CID>
● Creates a unique name related to your node’s public key and links it to the given content
Access the content from public web gateways:
https://dweb.link/ipns/QmZu4NDRMnoEthm2W5Zi2CuGpYdCarg3jQkK6YwnFJQJzy/
To update the content (the name hash stays the same):
● ipfs name publish <new CID>

Fleek
= Netlify on IPFS
Builds your site from your git repo, also builds PR previews!
Publishes & pins the build on IPFS
Manages a dynamic .on.fleek.co domain to it (and adds SSL)
https://white-sunset-5541.on.fleek.co/
You can access that website from any gateway (also your own)
= http://white-sunset-5541.on.fleek.co.ipns.localhost:8080/
= http://bafybeifz46hk7s6w4orjtu34sfn4quobapxo5oigbcjdgirx7jj75e5d4i.ipfs.dweb.link/

Demo
Hosting a local website
Fleek

OrbitDB
Based on an jsIPFS node running inside your browser
Structures content in a way that it can be consumed like a database
- Append only logs
- Key value stores
- Document databases
- Simple counters
Database content is replicated as CRDTs (“timestamped document diffs”) over
the network
- utilizes libp2p Pubsub messaging (builtin to any IPFS node)
- Also contains access control layers and encryption features

Run a jsIPFS node inside your website
& add a common “meeting point” to share content between browsers.

Launch an OrbitDB instance on your node

Interact with an OrbitDB database

How does that work?
Upon cold start the app creates and reads a unique OrbitDB inside your browser tab
- The name orbit.users.birthday leads to an unique hash
- /orbitdb/zdpuAqiiDjGSPXwz9HdYaVFQPCe2VdwqG2tiqdbWTFegj3DYe/orbit.users.birthday
db is empty when you create it
db announces to the world that it’s up and others should listen and tell about updates (pubsub)
All updates are internally ordered by timestamps and are applied in that order
=> each client ends up with a ﬁnal state depending on which updates it hears.
As long as any node in the world has the content, other peers can sync it.

Demo
OrbitDB
https://github.com/elmariachi111/wcs-decentralized
https://wcs.on.ﬂeek.co/
https://bafybeiacpvdvqnqf43eoru33dkdzqx2c7ckaqtw4372f5pwpivf5fr4ba4.ipfs.dweb.link/

Still hard? There are tools built on
top of it!

Stefan Adolf
Developer Ambassador - Turbine Kreuzberg
@stadolf
https://ledger-academy.on.ﬂeek.co/#/

Productive web applications that run only on the frontend

Recommended

More Related Content

What's hot (20)

Similar to Productive web applications that run only on the frontend (20)

More from Stefan Adolf (20)

Recently uploaded (20)

Productive web applications that run only on the frontend