EtherCalc: Multiplayer Spreadsheet

12,351 views

Published on

English rendering of EtherCalc talk, OSDC.tw 2012.

Published in: Technology, Education
0 Comments
5 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
12,351
On SlideShare
0
From Embeds
0
Number of Embeds
75
Actions
Shares
0
Downloads
24
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide

EtherCalc: Multiplayer Spreadsheet

  1. EtherCalcMultiplayerSpreadsheet ethercalc.tw
  2. Personal Opinions
  3. Personal Opinions(With Infotisements)
  4. Time Limited Just Stories No Coding
  5. Time Limited Just Stories Ideas No Coding
  6. ethercalc.org‣ npm install -g ethercalc‣ ethercalc Please connect to: http://0:8000/ nodejs.org/#download
  7. A.O.S.A., 2011aosabook.org aosa.tw
  8. History
  9. VisiCalc, 1979Dan Bricklin
  10. Harvard, 1977
  11. Harvard, 1977
  12. Harvard, 1977
  13. Harvard, 1977
  14. Harvard, 1977
  15. Original Vision
  16. Original Vision Alto Workstation
  17. Original Vision AltoCalculator- Workstation Mouse
  18. Original Vision AltoCalculator- Workstation Head-mounted Mouse Display
  19. Original Vision AltoCalculator- Workstation Head-mounted Mouse Display
  20. =SUM( ) 0
  21. 10 =SUM( ) 10 0
  22. 10 20 =SUM( ) 30 10 0
  23. 10 20 30 =SUM( ) 60 30 10 0
  24. 10 20 30 =SUM( ) 60 30 10 0
  25. 1977 → 1978
  26. 1977 → 1978
  27. 1977 → 1978 + Integer BASIC
  28. 1978 → 1979
  29. 1978 → 1979 10 20 30 =SUM( ) 60
  30. 1978 → 1979 A B C D1 10 20 302 =SUM( ) 60
  31. 1978 → 1979 A B C D1 10 20 302 =SUM(A1,B1,C1) 60
  32. 1978 → 1979 A B C D1 10 20 302 =SUM(A1,B1,C1) 60 Bob & Dan
  33. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60‣ Dan prototypes in BASIC Bob & Dan
  34. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60‣ Dan prototypes in BASIC‣ Bob codes in 6502 ASM Bob & Dan
  35. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60‣ Dan prototypes in BASIC‣ Bob codes in 6502 ASM‣ 700,000 copies in 6 years Bob & Dan
  36. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60‣ Dan prototypes in BASIC‣ Bob codes in 6502 ASM‣ 700,000 copies in 6 years‣ The !rst “Killer App” Bob & Dan
  37. 1981
  38. 20 years passed
  39. 20 years passed
  40. 20 years passed
  41. 20 years passed
  42. 20 years passedNothing changed
  43. “Can’t open”
  44. “Can’t open”“Garbled”
  45. “Can’t open”“Garbled”“Virus!”
  46. Wikipedia, 2001
  47. Wikipedia, 2001
  48. Wikipedia, 2001
  49. wikiCalc, 2005
  50. wikiCalc, 2005✓ Plain text, HTML & Wiki syntax
  51. wikiCalc, 2005✓ Plain text, HTML & Wiki syntax✓ References cells on other servers
  52. wikiCalc, 2005✓ Plain text, HTML & Wiki syntax✓ References cells on other servers✓ Keeps all operations for auditing
  53. wikiCalc, 2005✓ Plain text, HTML & Wiki syntax✓ References cells on other servers✓ Keeps all operations for auditing✓ Revert to any revision
  54. wikiCalc, 2005✓ Plain text, HTML & Wiki syntax✓ References cells on other servers✓ Keeps all operations for auditing✓ Revert to any revision✓ Open Source! (GPLv2)
  55. wikiCalc.pl
  56. wikiCalc.pl 網站 Sites./wkcdata/sites/Foo ./wkcdata/sites/Bar ./wkcdata/sites/Baz
  57. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ
  58. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格
  59. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格 A1: 100
  60. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格 A1: 100 A2: =A1*2
  61. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2
  62. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2
  63. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2 B2: =YYY!D2
  64. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2 B2: =YYY!D2
  65. wikiCalc.pl 網站 Sites 頁面 Pages./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ Cells 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2 B2: =YYY!D2 Cross-page Reference
  66. wikiCalc Edit Flow
  67. wikiCalc Edit Flow A1: 100 A2: =A1*2
  68. wikiCalc Edit Flow A1: 100 A2: =A1*2
  69. wikiCalc Edit Flow A1: 100 A2: =A1*2 POST / ajaxsetcell=host:page:A1:300 wikicalc.pl
  70. wikiCalc Edit Flow A1: 100 A2: =A1*2 POST / ajaxsetcell=host:page:A1:300 wikicalc.pl 200 OK <?xml version="1.0"?> <root><![CDATA[ A1:v:300:300:right:1:1:: A2:f:600:A1*2:right:1:1:: ]]></root>
  71. “Loading…”
  72. “Loading…”
  73. “Loading…”“C100k” Problem
  74. “Loading…”“C100k” Problem
  75. Undo
  76. UndoRedo
  77. SocialCalc, 2006Dan Bricklin Ross Mayfield
  78. Design Goals
  79. Design Goals‣ Rewrite calc engine in JS
  80. Design Goals‣ Rewrite calc engine in JS‣ Real-time responsive editor
  81. Design Goals‣ Rewrite calc engine in JS‣ Real-time responsive editor‣ Supports 100,000+ cells
  82. Design Goals‣ Rewrite calc engine in JS‣ Real-time responsive editor‣ Supports 100,000+ cells‣ Works on all browsers (IE6+)
  83. Design Goals‣ Rewrite calc engine in JS‣ Real-time responsive editor‣ Supports 100,000+ cells‣ Works on all browsers (IE6+)‣ Client-side log & undo/redo
  84. Architecture
  85. ArchitectureSocialCalc.jsHTTP Server
  86. Architecture SocialCalc.jsGET HTTP Server
  87. Architecture SocialCalc.jsGET HTTP Server
  88. Architecture SocialCalc.jsGET GET HTTP Server
  89. Architecture SocialCalc.jsGET GET ($) HTTP Server
  90. Architecture SocialCalc.js PUTGET GET ($) HTTP Server
  91. Architecture SocialCalc.js PUTGET GET ($) HTTP Server
  92. Command Pattern
  93. Command Patternset A1 value n 42
  94. Command Patternset A1 value n 42set A2 formula A1*2
  95. Command Patternset A1 value n 42set A2 formula A1*2merge A1:B2cut A3paste A4sort A1:B9 A up B downset sheet defaultcolor blue...
  96. Command Pattern set A1 value n 42 set A2 formula A1*2‣ Async recalc loop
  97. Command Pattern set A1 value n 42 set A2 formula A1*2‣ Async recalc loop‣ Visible-only redraw
  98. Command Pattern set A1 value n 42 set A2 formula A1*2‣ Async recalc loop‣ Visible-only redraw‣ Unlimited undo/redo
  99. Command Pattern set A1 value n 42 set A2 formula A1*2‣ Async recalc loop‣ Visible-only redraw‣ Unlimited undo/redo‣ UI stays responsive
  100. Command Pattern set A1 value n 42 set A2 formula A1*2‣ Async recalc loop‣ Visible-only redraw‣ Unlimited undo/redo‣ UI stays responsive
  101. “Social”Calc
  102. “Social”Calc
  103. “Social”Calc Comment, Like, Tag, Share, Embed...
  104. Objects Relations
  105. Objects Relations
  106. Objects Relations
  107. Good !rstPro!ts later
  108. Common PublicAttribution License
  109. Common Public Attribution License ⓐBSD, MIT
  110. Common Public Attribution License © ⓐBSD, MIT LGPL, MPL
  111. Common Public Attribution License © ++© ⓐBSD, MIT LGPL, MPL GPL
  112. Common Public Attribution License © ++© ⓐBSD, MIT LGPL, MPL GPL “ASP
  113.  loophole”
  114. Common Public Attribution License © ++© ⓐBSD, MIT LGPL, MPL GPL “ASP
  115.  loophole” Affero GPL
  116. Common Public Attribution License © ++© ⓐBSD, MIT LGPL, MPL GPL “ASP
  117.  loophole” CPAL Affero GPL
  118. Common Public Attribution License © ++© ⓐBSD, MIT LGPL, MPL GPL “ASP
  119.  loophole” CPAL Affero GPL
  120. Common Public Attribution License © ++© ⓐBSD, MIT LGPL, MPL GPL “ASP
  121.  loophole” CPAL Affero GPL
  122. Common Public Attribution License © ++© ⓐBSD, MIT LGPL, MPL GPL “ASP
  123.  loophole” CPAL Affero GPL
  124. Sheetnode, 2008Karim Ratib
  125. Sheetnode, 2008 Views + Fields + CCKKarim Ratib
  126. Sheetnode, 2008 Views + Fields + CCK SocialCalc.jsKarim Ratib
  127. Sheetnode, 2008 Views + Fields + CCK SocialCalc.jsKarim Ratib
  128. Sheetnode, 2008 Views + Fields + CCK SocialCalc.jsKarim Ratib
  129. Sheetnode, 2008 Views + Fields + CCK SocialCalc.jsKarim Ratib
  130. OLPC, 2008
  131. OLPC, 2008Luke Closs Dan
  132. MeshP2P
  133. Manusheel GuptaVijit Singh
  134. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js XoCom.pyManusheel GuptaVijit Singh
  135. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.pyManusheel GuptaVijit Singh
  136. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + TelepathyManusheel GuptaVijit Singh
  137. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + Telepathy OLPC MeshManusheel Gupta Broadcast 網絡廣播Vijit Singh
  138. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + Telepathy OLPC MeshManusheel Gupta Broadcast 網絡廣播 D-Bus + Telepathy Gecko/XPCOM SocialCalc.js XoCom.js XoCom.pyVijit Singh SocialCalcActivity.py
  139. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + Telepathy OLPC MeshManusheel Gupta Broadcast 網絡廣播 D-Bus + Telepathy Gecko/XPCOM set A1 value n 42 SocialCalc.js XoCom.js XoCom.pyVijit Singh SocialCalcActivity.py
  140. Great, but...
  141. Great, but...‣ Must log on same time
  142. Great, but...‣ Must log on same time‣ Can’t replay missed logs
  143. Great, but...‣ Must log on same time‣ Can’t replay missed logs‣ Race condition on cells
  144. Great, but...‣ Must log on same time‣ Can’t replay missed logs‣ Race condition on cells‣ OLPC-specific code!
  145. YAPC::Tiny, 2009 跳格 Multiplayer SocialCalc 二零零九 唐鳳 字 中英雙宇有字版
  146. EV/AnyEvent
  147. Tatsumaki EV/AnyEvent @miyagawa
  148. Tatsumaki EV/AnyEvent Web::Hippie @miyagawa @clkao
  149. Tatsumaki EV/AnyEvent Web::Hippie Feersum @miyagawa @clkao @stash
  150. WebSocket Channels multiserver.pl Web::Hippie Plack Feersum EV/libev
  151. WebSocket Channels SpreadsheetControl multiserver.pl Web::HippieScheduleScheetCommand set A1 value n 2046 Plack RenderSheet Feersum EV/libev
  152. WebSocket Channels SpreadsheetControl multiserver.pl Web::HippieScheduleScheetCommand set A1 value n 2046 Plack RenderSheet Send Feersum EV/libev
  153. WebSocket Channels SpreadsheetControl multiserver.plScheduleScheetCommand Web::Hippie Relay set A1 value n 2046 Plack RenderSheet Send Feersum EV/libev
  154. WebSocket Channels SpreadsheetControl multiserver.plScheduleScheetCommand Web::Hippie Relay set A1 value n 2046 Plack ScheduleScheetCommand RenderSheet Send Feersum set A1 value n 2046 (isRemote = true) EV/libev RenderSheet
  155. New Features
  156. New Features✓ Fetch logs on join
  157. New Features✓ Fetch logs on join✓ Reconnection recovery
  158. New Features✓ Fetch logs on join✓ Reconnection recovery✓ Show peer cursors
  159. New Features✓ Fetch logs on join✓ Reconnection recovery✓ Show peer cursors✓ Cross-browser support!
  160. New Features✓ Fetch logs on join✓ Reconnection recovery✓ Show peer cursors✓ Cross-browser support!
  161. Much better, but...
  162. Much better, but...‣ Which peer’s log to take?
  163. Much better, but...‣ Which peer’s log to take?‣ What if everyone leaves?
  164. Much better, but...‣ Which peer’s log to take?‣ What if everyone leaves?‣ Who would keep the logs?
  165. Much better, but...‣ Which peer’s log to take?‣ What if everyone leaves?‣ Who would keep the logs?‣ Replay 1,000+ commands?
  166. Much better, but...‣ Which peer’s log to take?‣ What if everyone leaves?‣ Who would keep the logs?‣ Replay 1,000+ commands?
  167. Undo
  168. UndoRedo?
  169. YAPC::NA, 2006
  170. YAPC::NA, 2006“I think, but I cannot prove, that bythe next year JavaScript 2.0 willbootstrap itself, complete selfhosting, compile back to JavaScript,and replace Ruby as the Next BigThing in all environments. ”
  171. YAPC::NA, 2006
  172. YAPC::NA, 2006“JavaScript will become the commonbackend for all dynamic languages,and so you can write Perl to run in thebrowser, on the server, and insidedatabases, all with the same set ofdevelopment tools. ”
  173. YAPC::NA, 2006
  174. YAPC::NA, 2006“Because, as we all know,worse is better, so the worstscripting language is doomedto become the best.”
  175. YAPC::NA, 2006“Because, as we all know,worse is better, so the worstscripting language is doomedto become the best.” 劣=夯
  176. JavaScript: Good Part Only
  177. CoeeScript: HalfPart Noise JavaScript: Good the Only cs = (js) = js/2 JeremyAshkenas
  178. CoeeScript: HalfPart Noise JavaScript: Good the Only cs = (js) = js/2 JeremyAshkenas
  179. CoeeScript: HalfPart Noise JavaScript: Good the Only cs = (js) = js/2 “Original JavaScript: 22k LOC.  Ported to CoffeeScript: 5k LOC.  {async, jsdom, zappa, optimist etc}++” JeremyAshkenas
  180. {x,y} = @offset
  181. {x,y} = @offsetvar _ref = this.offset;
  182. {x,y} = @offsetvar _ref = this.offset;var x = _ref.x;
  183. {x,y} = @offsetvar _ref = this.offset;var x = _ref.x;var y = _ref.y;
  184. {x,y} = @offsetvar _ref = this.offset;var x = _ref.x;var y = _ref.y; js2coffee.org
  185. Function::ᵒ = (fun) -
  186. Function::ᵒ = (fun) - (arg) = @ fun arg
  187. Function::ᵒ = (fun) - (arg) = @ fun argf = (x) = x * 2
  188. Function::ᵒ = (fun) - (arg) = @ fun argf = (x) = x * 2g = (x) = x * 3
  189. Function::ᵒ = (fun) - (arg) = @ fun argf = (x) = x * 2g = (x) = x * 3h = f .ᵒ g
  190. Function::ᵒ = (fun) - (arg) = @ fun argf = (x) = x * 2g = (x) = x * 3h = f .ᵒ gh 100 # 600
  191. Function::ᵒ = (fun) - (arg) = @ fun argf = (x) = x * 2g = (x) = x * 3h = f .ᵒ gh 100 # 600
  192. Zappa: Lazy Node.js zappajs.org
  193. Zappa: Lazy Node.jsMauriceMachado zappajs.org
  194. Zappa: Lazy Node.js “If you can describe it in 495 characters, why on earth shouldMaurice it take 879?”Machado zappajs.org
  195. require(zappa) - @view layout: - html = body = @body @get /: - @render index @view index: - for name, value of { wiki: Wiki to HTML html: HTML to Wiki } form method: post, = p = textarea {name} p = input {type: submit, value}
  196. require(zappa) - @view layout: - html = body = @body @get /: - @render index @view index: - for name, value of { wiki: Wiki to HTML html: HTML to Wiki } form method: post, = p = textarea {name} p = input {type: submit, value}
  197. require(zappa) -@post /: - - @view layout: if @data.wiki? @body html = body = @send w2h @data.wiki @get /: - @render index else if @data.html? @send h2w @data.html @view index: - for name, value of { else redirect / wiki: Wiki to HTML html: HTML to Wiki } form method: post, = p = textarea {name} p = input {type: submit, value}
  198. COSCUP, 2011
  199. COSCUP, 2011
  200. COSCUP, 2011hack
  201.  hack
  202.  hack
  203.  ...
  204. COSCUP, 2011hack
  205.  hack
  206.  hack
  207.  ...
  208. EtherCalc Edit Flow
  209. EtherCalc Edit Flow main.coffee sc.coffee Socket.ioSocialCalc.js Express Node.js db.coffee EV/libuv redis.js Zappa
  210. EtherCalc Edit Flow main.coffee sc.coffee Socket.ioSocialCalc.js Express Node.js db.coffee EV/libuv redis.js Zappa Redis(optional)
  211. EtherCalc Edit Flow main.coffee sc.coffee Socket.ioSocialCalc.js Express Node.js db.coffee EV/libuv player.coffee redis.js Zappa SocialCalc.js Redis(optional)
  212. EtherCalc Edit Flow main.coffee MULTI sc.coffee GET snapshot Socket.io LRANGE logSocialCalc.js EXEC Express Node.js db.coffee EV/libuv player.coffee redis.js Zappa SocialCalc.js Redis(optional)
  213. EtherCalc Edit Flow main.coffee MULTI sc.coffee GET snapshot Socket.io LRANGE logSocialCalc.js EXEC Express Node.js db.coffee EV/libuv player.coffee redis.js Zappa SocialCalc.js RPUSH log cmd Redis(optional)
  214. EtherCalc Edit Flow main.coffee MULTI sc.coffee GET snapshot Socket.io LRANGE logSocialCalc.js EXEC Express Node.js db.coffee EV/libuv player.coffee redis.js Zappa SocialCalc.js RPUSH log cmd Redis(optional)
  215. EtherCalc Edit Flow main.coffee MULTI sc.coffee GET snapshot Socket.io LRANGE logSocialCalc.js EXEC Express Node.js db.coffee EV/libuv player.coffee redis.js Zappa SocialCalc.js RPUSH log cmd Redis(optional)
  216. EtherCalc Edit Flow main.coffee MULTI sc.coffee GET snapshot Socket.io LRANGE logSocialCalc.js EXEC Express Node.js db.coffee EV/libuv player.coffee redis.js Zappa SocialCalc.js MULTI RPUSH log cmd Redis DEL log(optional) SET snapshot snapshot EXEC
  217. Recalc Subscription
  218. Recalc Subscription
  219. Recalc Subscription
  220. Recalc Subscription ask.log: Foo
  221. Recalc Subscription ask.log: Foo log: Foo,snapshot,log
  222. Recalc Subscription ask.log: Foo log: Foo,snapshot,log execute: set A1 formula Bar!B2
  223. Recalc Subscription ask.log: Foo log: Foo,snapshot,log execute: set A1 formula Bar!B2 ask.recalc: Bar
  224. Recalc Subscription ask.log: Foo log: Foo,snapshot,log execute: set A1 formula Bar!B2 ask.recalc: Bar recalc: Bar,snapshot
  225. Recalc Subscription ask.log: Foo log: Foo,snapshot,log execute: set A1 formula Bar!B2 ask.recalc: Bar recalc: Bar,snapshot recalc: Bar,snapshot
  226. PaaS Deployment
  227. PaaS Deployment stackato.yml app.js
  228. PaaS Deployment stackato.yml app.js dotcloud.yml server.js
  229. PaaS Deployment stackato.yml app.js dotcloud.yml server.js server.js
  230. REST Interface
  231. REST InterfaceGET /_/pagePUT /_/page
  232. REST InterfaceGET /_/page POST /_/pagePUT /_/page {command:[…]}
  233. REST InterfaceGET /_/page POST /_/pagePUT /_/page {command:[…]} GET /_/page/cells/A1 PUT /_/page/cells/A1 GET /_/page/names/range
  234. TODO, 2012
  235. TODO, 2012‣ Chat EtherPad Lite
  236. TODO, 2012‣ Chat EtherPad Lite‣ Export/Import, Charts
  237. TODO, 2012‣ Chat EtherPad Lite‣ Export/Import, Charts‣ Drupal Integration
  238. TODO, 2012‣ Chat EtherPad Lite‣ Export/Import, Charts‣ Drupal Integration‣ Socialtext Integration
  239. TODO, 2012‣ Chat EtherPad Lite‣ Export/Import, Charts‣ Drupal Integration‣ Socialtext Integration‣ Forks welcome!
  240. Thank you! EtherCalc Multiplayer Spreadsheet
  241. EtherCalcThe person who associated a workwith this document has dedicatedthe work to the Commons bywaiving all of his or her rights to thework worldwide under copyright lawand all related or neighboring legalrights he or she had in the work, tothe extent allowable by law.Works under CC0 do not requireattribution. ethercalc.tw

×