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

22. 3 big advantages:

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

30. Operational Transform

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

51. github.com/ottypes/json0

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

69. josephg.com
github.com/josephg
ShareJS.org