Productive web applications that run only on the frontend
0 likes144 views
The document discusses the evolution of web applications from traditional server-based systems to modern frontend-centric architectures using APIs and cloud services. It introduces decentralized technologies like IPFS and OrbitDB that aim to eliminate reliance on centralized servers, enhancing trust and accessibility. It emphasizes the potential of such decentralized systems to maintain available and secure content without single points of failure.
Productive web applications that run only on the frontend
- 1. Productive web applications that run only on the frontend
- 2. Stefan Adolf Developer Ambassador - Turbine Kreuzberg @stadolf
- 3. Back in the days.
- 4. 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
- 7. Webserver / Proxy Client Application domain.com whois? DNS www. api. www.domain.com Back in the days.
- 8. Webserver / Proxy Client Application domain.com whois? DNS www. api. www.domain.com Back in the days.
- 9. Webserver / Proxy Client Application domain.com whois? DNS www. api. www.domain.com Back in the days.
- 10. Webserver / Proxy Client Application Client domain.com whois? DNS www. api. www.domain.com api.domain.com Back in the days.
- 11. Webserver / Proxy Client Application Client domain.com whois? DNS www. api. www.domain.com api.domain.com Back in the days.
- 12. Why are servers necessary?
- 13. Servers are needed to add trust to applications When I talk to www.bank.co, I know, it’s my bank.
- 14. Servers are needed to keep secrets from users www.bank.co has API keys for a Google API
- 15. Servers are needed to stay online if you go offline
- 16. Servers are needed to agree on access points for apps
- 17. Servers are needed to safely store and distribute data
- 18. 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?fields=name”) Database: I’ll keep track of the data Authorization: I’m keeping your users’ passwords safe.
- 25. PaaS / BaaS to the rescue. (aka “the cloud”)
- 26. 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.
- 27. Can Google be unavailable?
- 28. Can AWS keep secrets?
- 29. Has Firebase got a backup?
- 30. Can Heroku dynos be shutdown?
- 31. Does DNS tell the truth?
- 32. The web as we know it, is broken. Restart breaking servers Trust black boxed cloud monoliths
- 33. web3 T o t h e r e s c u e
- 34. Decentralize all the things! Decentralized things can’t break.
- 35. Decentralized (P2P) file 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
- 36. 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 filesystem: ● 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)
- 38. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add I have QmRJYzy24...
- 39. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add Do you know QmRJYzy24...?
- 40. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add Do you know QmRJYzy24...?
- 41. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add I have QmRJYzy24... Do you know QmRJYzy24...?
- 42. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add I have QmRJYzy24... Do you know QmRJYzy24...?
- 43. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add I have QmRJYzy24... Do you know QmRJYzy24...?
- 44. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add I have QmRJYzy24... Do you know QmRJYzy24...?
- 45. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add I have QmRJYzy24... I have QmRJYzy24...
- 46. Content Resolution QmRJYzy24v53ndShLdNy tfKr59tKnFQaLs1Sso8pAdikc W Ipfs add I have QmRJYzy24... I have QmRJYzy24... Do you know QmRJYzy24...?
- 47. 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/
- 48. 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/
- 49. Demo Adding / getting content IPFS webui peering
- 50. Host a static website on your local machine
- 51. 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)
- 52. 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
- 53. 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>
- 54. 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/
- 55. Demo Hosting a local website Fleek
- 56. And what about the database?
- 57. 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
- 58. Run a jsIPFS node inside your website & add a common “meeting point” to share content between browsers.
- 59. Launch an OrbitDB instance on your node
- 60. Interact with an OrbitDB database
- 61. 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 final state depending on which updates it hears. As long as any node in the world has the content, other peers can sync it.
- 63. Still hard? There are tools built on top of it!
- 64. Stefan Adolf Developer Ambassador - Turbine Kreuzberg @stadolf https://ledger-academy.on.fleek.co/#/