Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google

1,932 views

Published on

Using IPFS, Y.js and CRDT.

Published in: Engineering

Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google

  1. 1. MozfestDecentralised David Dias & Pedro Teixeira Using IPFS, Y.js a Browser and some JavaScript Decentralised collaborative documents a.k.a. Building Google Docs without the “Google”
  2. 2. MozfestDecentralised Warning This is going to envolve some coding. Probably pairing up!
  3. 3. MozfestDecentralised Agenda • Grouping • Motivation for Decentralising Web Apps • Goal • Setup • Code! (30 mins) • Discussion: Decentralised Web Apps • Quick Announcement
  4. 4. MozfestDecentralised Motivation Cloud-based software has taken the web a long way, but lead us into centralisation.
  5. 5. DNS a.com 30.30.30.30 b.com 40.40.40.40 c.com 50.50.50.50
  6. 6. cvs/svn
  7. 7. cvs/svn
  8. 8. cvs/svn
  9. 9. MozfestDecentralised Goal Create a decentralised collaborative web-based real-time Flipchart application
  10. 10. MozfestDecentralised Materials • Modern Browser • JavaScript • IPFS (js-ipfs) • CRDT • Code Editor • Command line
  11. 11. MozfestDecentralised Setup:
 Install Node.js
  12. 12. MozfestDecentralised Setup:
 Download code • Through git: • or download zip file from http://bit.ly/2xsCJfP
  13. 13. MozfestDecentralised Setup:
 Install dependencies
  14. 14. MozfestDecentralised Setup:
 Build and watch
  15. 15. MozfestDecentralised Setup:
 Start HTTP server
  16. 16. MozfestDecentralised Setup:
 Test flipchart app
  17. 17. MozfestDecentralised
  18. 18. MozfestDecentralised The source code Open a code editor and take a peek at src/index.js
  19. 19. MozfestDecentralised Add 1 IPFS Let’s create an IPFS node inside the browser app.
  20. 20. MozfestDecentralised Wait for IPFS to start …by handling the IPFS “start” event.
  21. 21. MozfestDecentralised Print IPFS status and IPFS Peer ID
  22. 22. MozfestDecentralised • Content-addressable storage • DAG formed by cryptographically secure links • Pub-sub network • Naming (IPNS) • Multi-transport • Multi-discovery • Multi-* • Community-driven open-source • Go, JS and more! • Future-proof
  23. 23. MozfestDecentralised Offline-first, real-time, shared editing for data structures
  24. 24. MozfestDecentralised
  25. 25. MozfestDecentralised Add 1 CRDT Let’s replace direct manipulation of the line array with an array of lines. Each line is (still) an array of points.
  26. 26. MozfestDecentralised Y.js step 1 Import Y.js dependencies
  27. 27. MozfestDecentralised Y.js step 2 Initialise Y.js
  28. 28. MozfestDecentralised Y.js step 3 Routine to draw a line from a Y.js array
  29. 29. MozfestDecentralised Y.js step 4 Listen for changes in drawing and act.
  30. 30. MozfestDecentralised Y.js step 5 Draw pre-existing lines
  31. 31. MozfestDecentralised Y.js step 6 Create new line on drag
  32. 32. MozfestDecentralised Y.js step 7 When user drags, add points to current line
  33. 33. MozfestDecentralised Y.js step 8 When user clears, remove all lines from CRDT
  34. 34. MozfestDecentralised
  35. 35. MozfestDecentralised Under the hood
  36. 36. MozfestDecentralised Homework Challenge • Allow user to take a snapshot • Save the snapshot to IPFS
  37. 37. MozfestDecentralised CRDTs CRDTs will be the building block of decentralised collaborative applications. This type of data structures allows building conflict-free offline-first reliable decentralised apps.
  38. 38. MozfestDecentralised Discussion CRDTs allow you to build a decentralised collaborative store. What other building blocks will be necessary to build DApps? • Identity • Authentication • Access Control • Privacy • Files • non-local Key/Object store • Messaging • … ?
  39. 39. MozfestDecentralised PeerPad PeerPad is a real-time collaborative editing tool, powered by IPFS and CRDTs. https://peerpad.net
  40. 40. MozfestDecentralised

×