![Operational Transform
Insert “hi there” at position 100 in the document
[{pos:100, ins:“hi there”}]](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-31-320.jpg)
![Initial doc
[1,2,3,4,5,6,7,8,9,10]
Anne Beth
Insert ‘C’, pos 1
Insert ‘a’, pos 2
Insert ‘t’, pos 3
Insert ‘D’, pos 11
Insert ‘o’, pos 12
Insert ‘g’, pos 13
[‘C’,’a’,’t’,1,2,3,4,5,6,7,8,9,10, ‘D’, ‘o’, ‘g’]](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-39-320.jpg)
![Initial doc
[‘C’,’a’,’t’,…, ‘D’, ‘o’, ‘g’]
Anne Beth
Move item 1 to last position
Replace item 1 with “e”
[’a’,’t’,…, ‘D’, ‘o’, ‘g’, ‘e’]](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-40-320.jpg)
![{
location: ‘inbox’,
messages: {
inbox: […]
spam: []
}
}
DOM
client
state
client
state
Events
Render
Client
Database
Server](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-43-320.jpg)
![{
location: ‘spam’,
messages: {
inbox: […]
spam: []
}
}
DOM
client
state
client
state
Go to spam folder
Render
Client
Database
Server](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-44-320.jpg)
![{
location: ‘spam’,
messages: {
inbox: […]
spam: []
}
}
DOM
client
state
client
state
Go to spam folder
Render
Client
Database
Server
Populate the spam messages](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-45-320.jpg)
![{
location: ‘spam’,
messages: {
inbox: […]
spam: […!!! STUFF]
}
}
DOM
client
state
client
state
Go to spam folder
Render
Client
Database
Server
All the messages!](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-46-320.jpg)
![Polymer needs OT bindings for object observers
https://github.com/Polymer/observe-js
doc.submitOp([{p:[‘users’, users.length],li:“Sam”}]);
users.push(“sam”);](https://image.slidesharecdn.com/jssummit-141120150057-conversion-gate01/85/Make-everything-realtime-collaborative-JS-Summit-2014-60-320.jpg)
Make everything realtime & collaborative - JS Summit 2014
- 1. The future will be realtime & collaborative Joseph Gentle
- 3. I am not here to talk about ShareJS
- 4. This is about doing what ShareJS does: Use Operational Transform to make better apps
- 5. A quick history lesson
- 6. Static Pages HTML, CSS 1990
- 7. Static Pages HTML, CSS 1990 Browser Web Server Filesystem
- 8. Static Pages 1990 Forms, CGI-BIN HTML, CSS PHP, Perl 1997
- 9. Static Pages 1990 Forms, CGI-BIN HTML, CSS PHP, Perl 1997 Web Server Filesystem Browser CGI Database POST Render
- 10. Static Pages HTML, CSS PHP, Perl Rails, Python 1990 REST endpoints Forms, CGI-BIN 2000 1997
- 11. REST endpoints HTML & JS Filesystem Browser REST Database XHR App rendering DOM updates Model data
- 12. Static Pages HTML, CSS PHP, Perl Rails, Python 1990 Forms, CGI-BIN 1997 REST endpoints 2000 Realtime full page apps Meteor, Firebase 2005
- 13. DOM HTML & JS Filesystem Model view Stream Live data view Database Events Render Render REST endpoints Realtime full page apps
- 14. Realtime full page apps
- 15. Realtime full page apps
- 16. Realtime full page apps
- 17. Realtime full page apps
- 18. Realtime full page apps
- 19. DOM HTML & JS Filesystem Model view Stream Live data view Database Events Render Render REST endpoints Realtime full page apps
- 20. DOM HTML & JS Filesystem Model view Stream Live data view Database Events Render Render REST endpoints Realtime full page apps
- 21. This talk: • What is operational transform? • How you can use it today • The things nobody’s built yet
- 23. 1. Your model data gets updated in realtime
- 24. 1. Your model data gets updated in realtime 2. Seamless online / offline
- 25. 1. Your model data gets updated in realtime 2. Seamless online / offline 3. Never accidentally overwrite data (F/LWW)
- 26. Part 1: OT
- 31. Operational Transform Insert “hi there” at position 100 in the document [{pos:100, ins:“hi there”}]
- 32. Initial doc xxxxxxxxxx Anne Beth Insert ‘C’, pos 1 Insert ‘a’, pos 2 Insert ‘t’, pos 3 Insert ‘D’, pos 11 Insert ‘o’, pos 12 Insert ‘g’, pos 13 CatxxxxxxxxxxDog
- 33. Initial doc xxxxxxxxxx Insert ‘C’, pos 1 Insert ‘D’, pos 11 Insert ‘a’, pos 2 Insert ‘o’, pos 12 Insert ‘t’, pos 3 Insert ‘g’, pos 13 CatxxxxxxxxxgoDx
- 34. Initial doc xxxxxxxxxx Insert ‘C’, pos 1 Transform these } Insert ‘D’, pos 12 Insert ‘a’, pos 2 Insert ‘o’, pos 14 Insert ‘t’, pos 3 Insert ‘g’, pos 16 CatxxxxxxxxxxDog
- 35. Initial doc xxxxxxxxxx Transform these } Insert ‘C’, pos 1 Insert ‘a’, pos 2 Insert ‘t’, pos 3 Insert ‘D’, pos 14 Insert ‘o’, pos 15 Insert ‘g’, pos 16 CatxxxxxxxxxxDog
- 36. Initial doc xxxxxxxxxx Insert ‘D’, pos 11 Insert ‘o’, pos 12 Insert ‘g’, pos 13 Insert ‘C’, pos 1 Insert ‘a’, pos 2 Insert ‘t’, pos 3 Transform these } CatxxxxxxxxxxDog
- 37. <Demo text>
- 38. But why only text editing?
- 39. Initial doc [1,2,3,4,5,6,7,8,9,10] Anne Beth Insert ‘C’, pos 1 Insert ‘a’, pos 2 Insert ‘t’, pos 3 Insert ‘D’, pos 11 Insert ‘o’, pos 12 Insert ‘g’, pos 13 [‘C’,’a’,’t’,1,2,3,4,5,6,7,8,9,10, ‘D’, ‘o’, ‘g’]
- 40. Initial doc [‘C’,’a’,’t’,…, ‘D’, ‘o’, ‘g’] Anne Beth Move item 1 to last position Replace item 1 with “e” [’a’,’t’,…, ‘D’, ‘o’, ‘g’, ‘e’]
- 41. <Demo app state>
- 42. DOM HTML & JS Filesystem state Stream state Events Render
- 43. { location: ‘inbox’, messages: { inbox: […] spam: [] } } DOM client state client state Events Render Client Database Server
- 44. { location: ‘spam’, messages: { inbox: […] spam: [] } } DOM client state client state Go to spam folder Render Client Database Server
- 45. { location: ‘spam’, messages: { inbox: […] spam: [] } } DOM client state client state Go to spam folder Render Client Database Server Populate the spam messages
- 46. { location: ‘spam’, messages: { inbox: […] spam: […!!! STUFF] } } DOM client state client state Go to spam folder Render Client Database Server All the messages!
- 47. Part 2: How you can use it today
- 50. You are here
- 52. OT Types JSON Text Rich text
- 53. ShareJS Client server protocol on top of OT types
- 54. ReactJS demo
- 55. DOM HTML & JS Filesystem Model Ops ShareJS Database Events Render
- 56. Derby & Racer Web framework & ORM on top of ShareJS
- 57. Part 3: Going where no code has gone before
- 58. We are still in the dark ages, figuring it out. Help by making stuff and documenting what you make.
- 59. Bother your framework authors! Tell them to get on board.
- 60. Polymer needs OT bindings for object observers https://github.com/Polymer/observe-js doc.submitOp([{p:[‘users’, users.length],li:“Sam”}]); users.push(“sam”);
- 61. Help make data bindings & examples
- 62. Help port ot types to your fav language
- 63. Full offline support? Mobile first?
- 64. We need a database which provides this API out of the box. If you write databases for a living, lets have coffee.
- 65. Make cool stuff and show people. Especially me. I love cool stuff.
- 66. IDE!!!
- 67. Editor libllvm libllvm Source files Compiler Binaries Output Debugger libllvm Parse Parse X-Code Today
- 68. X-Code In the world of Tomorrow! Editor libllvm Syntax & autocomplete Annotated Source code Compiler Binaries Output Filesystem saver Errors Test runner