Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
MozfestDecentralised
David Dias & Pedro Teixeira
Using IPFS, Y.js a Browser and some JavaScript
Decentralised collaborativ...
MozfestDecentralised
Warning
This is going to envolve some coding.
Probably pairing up!
MozfestDecentralised
Agenda
• Grouping
• Motivation for Decentralising Web Apps
• Goal
• Setup
• Code! (30 mins)
• Discuss...
MozfestDecentralised
Motivation
Cloud-based software has taken the web a long way,
but lead us into centralisation.
DNS
a.com 30.30.30.30
b.com 40.40.40.40
c.com 50.50.50.50
cvs/svn
cvs/svn
cvs/svn
MozfestDecentralised
Goal
Create a
decentralised collaborative web-based real-time
Flipchart application
MozfestDecentralised
Materials
• Modern Browser
• JavaScript
• IPFS (js-ipfs)
• CRDT
• Code Editor
• Command line
MozfestDecentralised
Setup:

Install Node.js
MozfestDecentralised
Setup:

Download code
• Through git:
• or download zip file from
http://bit.ly/2xsCJfP
MozfestDecentralised
Setup:

Install dependencies
MozfestDecentralised
Setup:

Build and watch
MozfestDecentralised
Setup:

Start HTTP server
MozfestDecentralised
Setup:

Test flipchart app
MozfestDecentralised
MozfestDecentralised
The source
code
Open a code editor and take a peek
at
src/index.js
MozfestDecentralised
Add 1 IPFS
Let’s create an IPFS node
inside the browser app.
MozfestDecentralised
Wait for
IPFS to start
…by handling the IPFS
“start” event.
MozfestDecentralised
Print IPFS status
and IPFS Peer ID
MozfestDecentralised
• Content-addressable storage
• DAG formed by cryptographically
secure links
• Pub-sub network
• Nami...
MozfestDecentralised
Offline-first, real-time,
shared editing for data
structures
MozfestDecentralised
MozfestDecentralised
Add 1 CRDT
Let’s replace direct manipulation of
the line array with an array of lines.
Each line is (...
MozfestDecentralised
Y.js
step 1
Import Y.js dependencies
MozfestDecentralised
Y.js
step 2
Initialise Y.js
MozfestDecentralised
Y.js
step 3
Routine to draw a line
from a Y.js array
MozfestDecentralised
Y.js
step 4
Listen for changes in
drawing and act.
MozfestDecentralised
Y.js
step 5
Draw pre-existing lines
MozfestDecentralised
Y.js
step 6
Create new line on drag
MozfestDecentralised
Y.js
step 7
When user drags,
add points to
current line
MozfestDecentralised
Y.js
step 8
When user clears,
remove all lines
from CRDT
MozfestDecentralised
MozfestDecentralised
Under
the
hood
MozfestDecentralised
Homework
Challenge
• Allow user to take a snapshot
• Save the snapshot to IPFS
MozfestDecentralised
CRDTs
CRDTs will be the building block of
decentralised collaborative
applications.
This type of data...
MozfestDecentralised
Discussion
CRDTs allow you to build a
decentralised collaborative store.
What other building blocks w...
MozfestDecentralised
PeerPad
PeerPad is a real-time collaborative
editing tool, powered by IPFS and
CRDTs.
https://peerpad...
MozfestDecentralised
Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google
Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google
Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google
Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google
Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google
Nächste SlideShare
Wird geladen in …5
×

Building Decentralised Realtime Collaborative Applications - Building Google Docs without Google

2.235 Aufrufe

Veröffentlicht am

Using IPFS, Y.js and CRDT.

Veröffentlicht in: Ingenieurwesen

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

×