Slide 1

Slide 1 text

The beauty of Operational Transformation and a realtime database Jorge Silva · @thejsj · Developer Evangelist @ RethinkDB

Slide 2

Slide 2 text

Overview What is Operational Transformation? ShareJS: A Node.js library for OT RethinkDB: A database for realtime apps livedb-rethinkdb: RethinkDB + ShareJS

Slide 3

Slide 3 text

What is Operational Transformation?

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

A class of algorithms that do multi-site realtime concurrency. Gives you eventual consistency - between multiple users - without retries - without errors - without any data being overwritten http://sharejs.org/

Slide 6

Slide 6 text

Possible applications Collaborative text and code editors Pair programming applications Realtime wikis Any type of concurent editing

Slide 7

Slide 7 text

OT is an important tool for building realtime applications

Slide 8

Slide 8 text

How can I use this in my own projects?

Slide 9

Slide 9 text

Enter ShareJS “ShareJS is an Operational Transform library for NodeJS & browsers. It lets you easily do live concurrent editing in your app.”

Slide 10

Slide 10 text

// WebSocket Connection var ws = new WebSocket(‘ws://localhost:8005’); var shareJS = new window.sharejs.Connection(ws); // Textarea var textareaDoc = shareJS.get(‘documents’, ‘helloworld’); textareaDoc.subscribe(); // Wait for document to be ready textareaDoc.whenReady(function () { setTimeout(function () { if (!textareaDoc.type) { textareaDoc.create(‘text’); } if (textareaDoc.type && textareaDoc.type.name === ‘text’) { var elem = document.getElementById(‘helloworld’); textareaDoc.attachTextarea(elem); } }); }); ShareJS on the client https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/client/index.html#L102-L124

Slide 11

Slide 11 text

// WebSocket Connection var ws = new WebSocket(‘ws://localhost:8005’); var shareJS = new window.sharejs.Connection(ws); // Textarea var textareaDoc = shareJS.get(‘documents’, ‘helloworld’); textareaDoc.subscribe(); // Wait for document to be ready textareaDoc.whenReady(function () { setTimeout(function () { if (!textareaDoc.type) { textareaDoc.create(‘text’); } if (textareaDoc.type && textareaDoc.type.name === ‘text’) { var elem = document.getElementById(‘helloworld’); textareaDoc.attachTextarea(elem); } }); }); ShareJS on the client https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/client/index.html#L102-L124

Slide 12

Slide 12 text

var sharejs = require(‘share’); var livedb = require(‘livedb’); // Connect to the database var db = require(‘livedb-rethinkdb’)({ host: ‘localhost’, port: 28015, db: ‘sharejs’ }); var backend = livedb.client(db); // Attach livedb instances to ShareJS var share = sharejs.server.createClient({ backend: backend }); ShareJS on the server: database https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/livedb-client.js

Slide 13

Slide 13 text

var sharejs = require(‘share’); var livedb = require(‘livedb’); // Connect to the database var db = require(‘livedb-rethinkdb’)({ host: ‘localhost’, port: 28015, db: ‘sharejs’ }); var backend = livedb.client(db); // Attach livedb instances to ShareJS var share = sharejs.server.createClient({ backend: backend }); ShareJS on the server: database https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/livedb-client.js

Slide 14

Slide 14 text

var wss = new WebSocketServer(); var Duplex = require(‘stream’).Duplex; var share = sharejs.server.createClient({ backend: backend }); // On socket connection wss.on(‘connection’, function () { var stream = new Duplex({ objectMode: true }); stream._write = function (chunk, encoding, callback) { client.send(JSON.stringify(chunk)); return callback(); }; client.on(‘message’, function (data) { return stream.push(JSON.parse(data)); }); return share.listen(stream); }); ShareJS on the server https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/socket-handler.js#L8-L49

Slide 15

Slide 15 text

var wss = new WebSocketServer(); var Duplex = require(‘stream’).Duplex; var share = sharejs.server.createClient({ backend: backend }); // On socket connection wss.on(‘connection’, function () { var stream = new Duplex({ objectMode: true }); stream._write = function (chunk, encoding, callback) { client.send(JSON.stringify(chunk)); return callback(); }; client.on(‘message’, function (data) { return stream.push(JSON.parse(data)); }); return share.listen(stream); }); ShareJS on the server https://github.com/thejsj/sharejs-rethinkdb-example/blob/master/server/socket-handler.js#L8-L49

Slide 16

Slide 16 text

Open source database for building realtime applications NoSQL database that stores schemaless JSON documents Distributed database that is easy to scale What is RethinkDB?

Slide 17

Slide 17 text

Subscribe to change notifications from database queries No more polling – the database pushes changes to your app Reduce the amount of plumbing needed to stream live updates Built for realtime

Slide 18

Slide 18 text

var r = require(‘rethinkdb’); r .db(‘share_js’) .table(‘documents’) .filter({ name: ‘helloworld’ }) .run(conn) .then(function (cursor) { // Go through every row returned by the query cursor.each(function (row) { console.log(row); }); }); Changefeeds

Slide 19

Slide 19 text

var r = require(‘rethinkdb’); r .db(‘share_js’) .table(‘documents’) .filter({ name: ‘helloworld’ }) .run(conn) .then(function (cursor) { // Go through every row returned by the query cursor.each(function (row) { console.log(row); }); }); Changefeeds

Slide 20

Slide 20 text

var r = require(‘rethinkdb’); r .db(‘share_js’) .table(‘documents’) .filter({ name: ‘helloworld’ }) .changes() .run(conn) .then(function (cursor) { // Gets fired every time a row changes cursor.each(function (row) { console.log(row); }); }); Changefeeds

Slide 21

Slide 21 text

ShareJS & RethinkDB npm install sharejs livedb livedb-rethinkdb --save

Slide 22

Slide 22 text

Demo http://livedb-rethinkdb.thejsj.com/

Slide 23

Slide 23 text

Access documents

Slide 24

Slide 24 text

Access every single operation

Slide 25

Slide 25 text

Listen for new operations

Slide 26

Slide 26 text

Try it! https://github.com/thejsj/sharejs-rethinkdb-example

Slide 27

Slide 27 text

ShareJS http://sharejs.org/ | https://github.com/share/ShareJS RethinkDB http://rethinkdb.com/ | @rethinkdb livedb-rethinkdb https://github.com/thejsj/livedb-rethinkdb Questions?