狠狠撸

1. EtherCalc 多人即時協作試算表

2. EtherCalc for Drupal 多人即時協作試算表

3. 仅代表个人立场

4. 只講故事不講程式

5. 概念只講故事不講程式

6. SheetNode.org

7. SheetNode.org

8. SheetNode.org ? npm install -g ethercalc ? ethercalc Please connect to: http://0:8000/

9. ?開源應用架構? EtherCalc.tw aosabook.org

10. 缘起

11. VisiCalc, 1979 Dan Bricklin

12. 哈佛商學院, 1977

13. 哈佛商學院, 1977

14. 哈佛商學院, 1977

15. 哈佛商學院, 1977

16. 哈佛商學院, 1977

17. 最初的愿景

18. 最初的愿景 Alto 工作站

19. 最初的愿景 Alto 工作站滑鼠計算機

20. 最初的愿景 Alto 工作站滑鼠計算機頭戴顯示器

21. 最初的愿景 Alto 工作站滑鼠計算機頭戴顯示器

24. =SUM( ) 0

25. 10 20 30 =SUM( ) 60 30 10 0

26. 10 20 30 =SUM( ) 60 30 10 0

27. 1977 → 1978

28. 1977 → 1978

29. 1977 → 1978 + Integer BASIC

30. 1978 → 1979

31. 1978 → 1979 10 20 30 =SUM( ) 60

32. 1978 → 1979 A B C D 1 10 20 30 2 =SUM( ) 60

33. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60

34. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60 Bob & Dan

35. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60 ? 6 年售出 700,000 套 Bob & Dan

36. 1978 → 1979 A B C D 1 10 20 30 2 =SUM(A1,B1,C1) 60 ? 6 年售出 700,000 套 ? 「殺手級應用」的始祖 Bob & Dan

37. 1981

43. 二十年来

44. 二十年来

45. 二十年来

46. 二十年来

47. 二十年来始終如一

49. “打不开”

50. “打不开” “變亂碼”

51. “打不开” “變亂碼” “有病毒!”

53. 維基百科, 2001

54. 維基百科, 2001

55. 維基百科, 2001

56. wikiCalc, 2005

57. wikiCalc, 2005 ? 跨伺服器引用數值。

58. wikiCalc, 2005 ? 跨伺服器引用數值。 ? 保留每個版本，可隨時回復。

59. wikiCalc, 2005 ? 跨伺服器引用數值。 ? 保留每個版本，可隨時回復。 ? 支援純文字、HTML、Wiki 語法。

60. wikiCalc, 2005 ? 跨伺服器引用數值。 ? 保留每個版本，可隨時回復。 ? 支援純文字、HTML、Wiki 語法。 ? 開放源碼！

61. wikiCalc.pl

62. wikiCalc.pl 網站 ./wkcdata/sites/Foo ./wkcdata/sites/Bar ./wkcdata/sites/Baz

63. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ

64. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格

65. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格 A1: 100

66. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格 A1: 100 A2: =A1*2

67. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2

68. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2

69. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2 B2: =YYY!D2

70. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2 B2: =YYY!D2

71. wikiCalc.pl 網站頁面 ./wkcdata/sites/Foo XXX ./wkcdata/sites/Bar ./wkcdata/sites/Baz YYY ZZZ 儲存格 A1: 100 B1: =XXX!C1 A2: =A1*2 B2: =YYY!D2 跨頁引用

72. wikiCalc 編輯流程

73. wikiCalc 編輯流程 A1: 100 A2: =A1*2

74. wikiCalc 編輯流程 A1: 100 A2: =A1*2

75. wikiCalc 編輯流程 A1: 100 A2: =A1*2 POST / ajaxsetcell=host:page:A1:300 wikicalc.pl

76. wikiCalc 編輯流程 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>

77. “载入中…”

78. “载入中…”

79. “载入中…” “C100k” 問題

80. “载入中…” “C100k” 問題

82. 打掉重练

83. 打掉重练

84. SocialCalc, 2006 Dan Bricklin Ross May?eld

85. 设计目标

86. 设计目标 ? 引擎用 JavaScript 重写。

87. 设计目标 ? 引擎用 JavaScript 重写。 ? 即時編輯及還原/重作。

88. 设计目标 ? 引擎用 JavaScript 重写。 ? 即時編輯及還原/重作。 ? 能處理十萬個儲存格。

89. 系统架构

90. 系统架构 SocialCalc.js HTTP Server

91. 系统架构 SocialCalc.js GET HTTP Server

92. 系统架构 SocialCalc.js GET HTTP Server

93. 系统架构 SocialCalc.js GET GET HTTP Server

94. 系统架构 SocialCalc.js GET GET ($) HTTP Server

95. 系统架构 SocialCalc.js PUT GET GET ($) HTTP Server

96. 指令设计模式

97. 指令设计模式 set A1 value n 42

98. 指令设计模式 set A1 value n 42 set A2 formula A1*2

99. 指令设计模式 set A1 value n 42 set A2 formula A1*2 merge A1:B2 cut A3 paste A4 sort A1:B9 A up B down set sheet defaultcolor blue ...

100. 指令设计模式 set A1 value n 42 set A2 formula A1*2 ? 背景處理計算。

101. 指令设计模式 set A1 value n 42 set A2 formula A1*2 ? 背景處理計算。 ? 無限次還原重做。

102. 指令设计模式 set A1 value n 42 set A2 formula A1*2 ? 背景處理計算。 ? 無限次還原重做。 ? 鍵盤滑鼠隨時可用！

103. “社會化” 試算表

104. “社會化” 試算表

105. “社會化” 試算表評論、按讚、推薦、标记、分享、嵌入...

106. 社会物件人际连结

110. 工

111. CPAL 通用公共授權

112. CPAL 通用公共授權 ? BSD, MIT

113. CPAL 通用公共授權 ? ? BSD, MIT LGPL, MPL

114. CPAL 通用公共授權 ? ++? ? BSD, MIT LGPL, MPL GPL

115. CPAL 通用公共授權 ? ++? ? BSD, MIT LGPL, MPL GPL “ASP

116. ? ”

118. ? ” Affero GPL

120. ? ” CPAL Affero GPL

127. Sheetnode, 2008 Karim Ratib

128. Sheetnode, 2008 Views + Fields + CCK Karim Ratib

129. Sheetnode, 2008 Views + Fields + CCK SocialCalc.js Karim Ratib

133. Sheetnode, 2008

134. Sheetnode, 2008 I was looking for an open source equivalent to Google Docs that would allow tighter integration with a company's data:

135. Sheetnode, 2008 I was looking for an open source equivalent to Google Docs that would allow tighter integration with a company's data: “Real-time reports, created out of Drupal data.”

136. SheetNode.org

137. SheetNode.org

138. SheetNode.org Views

139. OLPC, 2008

140. OLPC, 2008 Luke Closs Dan

143. Mesh 網絡

145. Manusheel Gupta Vijit Singh

146. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js XoCom.py Manusheel Gupta Vijit Singh

147. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py Manusheel Gupta Vijit Singh

148. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + Telepathy Manusheel Gupta Vijit Singh

149. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + Telepathy OLPC Mesh Manusheel Gupta 網絡廣播 Vijit Singh

150. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + Telepathy OLPC Mesh Manusheel Gupta 網絡廣播 D-Bus + Telepathy Gecko/XPCOM SocialCalc.js XoCom.js XoCom.py Vijit Singh SocialCalcActivity.py

151. SocialCalcActivity.py Gecko/XPCOM SocialCalc.js XoCom.js set A1 value n 42 XoCom.py D-Bus + Telepathy OLPC Mesh Manusheel Gupta 網絡廣播 D-Bus + Telepathy Gecko/XPCOM set A1 value n 42 SocialCalc.js XoCom.js XoCom.py Vijit Singh SocialCalcActivity.py

152. 很讚，但是...

153. 很讚，但是... ? 漏接訊息無法復原。

154. 很讚，但是... ? 漏接訊息無法復原。 ? 編輯同一格時會衝突。

155. 很讚，但是... ? 漏接訊息無法復原。 ? 編輯同一格時會衝突。 ? 只能在 OLPC 上使用！

156. YAPC::Tiny, 2009

157. EV: 事件驅動

158. Tatsumaki EV: 事件驅動 @miyagawa

159. Tatsumaki EV: 事件驅動 Web::Hippie @miyagawa @clkao

160. Tatsumaki EV: 事件驅動 Web::Hippie Feersum @miyagawa @clkao @stash

161. WebSocket 同步編輯 multiserver.pl Web::Hippie Plack Feersum EV/libev

162. WebSocket 同步編輯 SpreadsheetControl multiserver.pl Web::Hippie ScheduleScheetCommand set A1 value n 2046 Plack RenderSheet Feersum EV/libev

163. WebSocket 同步編輯 SpreadsheetControl multiserver.pl Web::Hippie ScheduleScheetCommand set A1 value n 2046 Plack RenderSheet 傳送 Feersum EV/libev

164. WebSocket 同步編輯 SpreadsheetControl multiserver.pl ScheduleScheetCommand Web::Hippie 群播 set A1 value n 2046 Plack RenderSheet 傳送 Feersum EV/libev

165. WebSocket 同步編輯 SpreadsheetControl multiserver.pl ScheduleScheetCommand Web::Hippie 群播 set A1 value n 2046 Plack ScheduleScheetCommand RenderSheet 傳送 Feersum set A1 value n 2046 (isRemote = true) EV/libev RenderSheet

166. 新增功能

167. 新增功能 ?斷線重連可以復原。

168. 新增功能 ?斷線重連可以復原。 ?顯示別人的游標位置。

169. 新增功能 ?斷線重連可以復原。 ?顯示別人的游標位置。 ?可以在各平台上運行！

170. 新增功能 ?斷線重連可以復原。 ?顯示別人的游標位置。 ?可以在各平台上運行！

171. 更讚了，但是...

172. 更讚了，但是... ? 要相信誰的目前狀態？

173. 更讚了，但是... ? 要相信誰的目前狀態？ ? 所有人離線：資料消失？

174. 更讚了，但是... ? 要相信誰的目前狀態？ ? 所有人離線：資料消失？ ? 重新连接：回播所有指令？

175. 更讚了，但是... ? 要相信誰的目前狀態？ ? 所有人離線：資料消失？ ? 重新连接：回播所有指令？

177. 打掉重练

178. 打掉重练

179. YAPC::NA, 2006

180. YAPC::NA, 2006 “I think, but I cannot prove, that by the next year JavaScript 2.0 will bootstrap itself, complete self hosting, compile back to JavaScript, and replace Ruby as the Next Big Thing in all environments. ”

181. YAPC::NA, 2006

182. YAPC::NA, 2006 “JavaScript will become the common backend for all dynamic languages, and so you can write Perl to run in the browser, on the server, and inside databases, all with the same set of development tools. ”

183. YAPC::NA, 2006

184. YAPC::NA, 2006 “Because, as we all know, worse is better, so the worst scripting language is doomed to become the best.”

185. YAPC::NA, 2006 “Because, as we all know, worse is better, so the worst scripting language is doomed to become the best.” 劣即是夯

189. JavaScript: 缺點減少

190. JavaScript: 缺點減少 Co?eeScript: 標點減半 cs = (js) - js/2 Jeremy Ashkenas

191. JavaScript: 缺點減少 Co?eeScript: 標點減半 cs = (js) - js/2 Jeremy Ashkenas

192. JavaScript: 缺點減少 Co?eeScript: 標點減半 cs = (js) - js/2 “原 JavaScript 行數: 22k。　重寫過的 Co?eeScript 行數: 5k。　{async, jsdom, zappa, optimist etc}++” Jeremy Ashkenas

194. {x,y} = @offset

195. {x,y} = @offset var offset = this.offset;

196. {x,y} = @offset var offset = this.offset; var x = offset.x;

197. {x,y} = @offset var offset = this.offset; var x = offset.x; var y = offset.y;

198. {x,y} = @offset var offset = this.offset; var x = offset.x; var y = offset.y; js2coffee.org

199. COSCUP, 2011

200. COSCUP, 2011

201. COSCUP, 2011 hack

202. ?hack

203. ?hack

204. ?...

205. COSCUP, 2011 hack

206. ?hack

207. ?hack

208. ?...

209. EtherCalc 系统架构

210. EtherCalc 系统架构 main.co?ee sc.co?ee Socket.io SocialCalc.js SocialCalc.js Express Node.js db.co?ee EV/libuv redis.js Zappa

211. EtherCalc 系统架构 main.co?ee sc.co?ee Socket.io SocialCalc.js SocialCalc.js Express Node.js db.co?ee EV/libuv redis.js Zappa Redis (optional)

212. EtherCalc 系统架构 main.co?ee sc.co?ee Socket.io SocialCalc.js SocialCalc.js Express Node.js db.co?ee EV/libuv player.co?ee redis.js Zappa SocialCalc.js SocialCalc.js Redis (optional)

213. EtherCalc 系统架构 main.co?ee sc.co?ee GET snapshot Socket.io SocialCalc.js SocialCalc.js LRANGE log Express Node.js db.co?ee EV/libuv player.co?ee redis.js Zappa SocialCalc.js SocialCalc.js Redis (optional)

214. EtherCalc 系统架构 main.co?ee sc.co?ee GET snapshot Socket.io SocialCalc.js SocialCalc.js LRANGE log Express Node.js db.co?ee EV/libuv player.co?ee redis.js Zappa SocialCalc.js SocialCalc.js RPUSH log cmd Redis (optional)

217. EtherCalc 系统架构 main.co?ee sc.co?ee GET snapshot Socket.io SocialCalc.js SocialCalc.js LRANGE log Express Node.js db.co?ee EV/libuv player.co?ee redis.js Zappa SocialCalc.js SocialCalc.js Redis DEL log RPUSH log cmd (optional) SET snapshot snapshot

218. 跨页即时更新

219. 跨页即时更新伺服端

220. 跨页即时更新伺客服戶端端

221. 跨页即时更新 ask.log: XXX 伺客服戶端端

222. 跨页即时更新 ask.log: XXX 伺 log: XXX,snapshot,log 客服戶端端

223. 跨页即时更新 ask.log: XXX 伺 log: XXX,snapshot,log 客 execute: set A1 服 formula YYY!B2 戶端端

224. 跨页即时更新 ask.log: XXX 伺 log: XXX,snapshot,log 客 execute: set A1 服 formula YYY!B2 戶 recalc: YYY,snapshot 端端

225. 跨页即时更新 ask.log: XXX 伺 log: XXX,snapshot,log 客 execute: set A1 服 formula YYY!B2 戶 recalc: YYY,snapshot 端 recalc: YYY,snapshot 端

226. 跨页即时更新 ask.log: XXX 伺 log: XXX,snapshot,log 客 execute: set A1 服 formula YYY!B2 戶 recalc: YYY,snapshot 端 recalc: YYY,snapshot 端 recalc: YYY,snapshot

227. REST 資源界面

228. REST 資源界面 GET /_/page PUT /_/page

229. REST 資源界面 GET /_/page POST /_/page PUT /_/page {commands:[…]}

230. REST 資源界面 GET /_/page POST /_/page PUT /_/page {commands:[…]} GET /_/page/cells/A1 PUT /_/page/cells/B2

232. + =

233. + = + = Coco

234. + = + = Coco Coco + =

236. stove.on(heat, function() {

237. stove.on(heat, function() { pot.on(boil, function() {

238. stove.on(heat, function() { pot.on(boil, function() { rice.on(ready, function(dish) {

239. stove.on(heat, function() { pot.on(boil, function() { rice.on(ready, function(dish) { setTimeout(function() {

240. stove.on(heat, function() { pot.on(boil, function() { rice.on(ready, function(dish) { setTimeout(function() { dish.serve(); }, 60000);

241. stove.on(heat, function() { pot.on(boil, function() { rice.on(ready, function(dish) { setTimeout(function() { dish.serve(); }, 60000); }); }); });

245. stove.on heat, -

246. stove.on heat, - pot.on boil, -

247. stove.on heat, - pot.on boil, - rice.on ready, (dish) -

248. stove.on heat, - pot.on boil, - rice.on ready, (dish) - setTimeout(

249. stove.on heat, - pot.on boil, - rice.on ready, (dish) - setTimeout( - dish.serve()

250. stove.on heat, - pot.on boil, - rice.on ready, (dish) - setTimeout( - dish.serve() 60000

251. stove.on heat, - pot.on boil, - rice.on ready, (dish) - setTimeout( - dish.serve() 60000 )

252. stove.on heat, - pot.on boil, - rice.on ready, (dish) - setTimeout( - dish.serve() 60000 )

254. - stove.on heat

255. - stove.on heat - pot.on boil

256. - stove.on heat - pot.on boil dish - rice.on ready

257. - stove.on heat - pot.on boil dish - rice.on ready - (`setTimeout` 60000)

258. - stove.on heat - pot.on boil dish - rice.on ready - (`setTimeout` 60000) dish.serve!

259. - stove.on heat - pot.on boil dish - rice.on ready - (`setTimeout` 60000) dish.serve!

260. OSDC.tw, 2012

261. OSDC.tw, 2012

262. OSDC.tw, 2012

263. OSDC.tw, 2012

264. 哪来的「高风亮节」…

265. 哪来的「高风亮节」… 只是沒寫過 Drupal 模組。

267. 雖然 Isis 架過許多 Drupal 網站我也幫忙改了一些…

271. 可是我對架構完全沒有概念。

272. 可是我對架構完全沒有概念。

274. ?開源之樂?, 2012. 7. 1.

275. ?開源之樂?, 2012. 7. 1.

276. ?開源之樂?, 2012. 7. 1.

277. ?開源之樂?, 2012. 7. 1. “內容過於抽象。”

278. ?開源之樂?, 2012. 7. 1. “內容過於抽象。” “這跟 Drupal 到底有何關係？”

280. 2012. 7. 2.

281. 2012. 7. 2. “你還是把 EtherCalc for Drupal 寫出來，比較有意義。”

285. 2012. 7. 3.

286. 2012. 7. 3. 感謝 Karim 幫忙

287. 2012. 7. 3. 感謝 Karim 幫忙一個早上　就寫完了。

288. /** * * Implements hook_menu(). * * In sheetnode_ethercalc_menu.info: * configure = admin/config/content/sheetnode/ethercalc * */ function sheetnode_ethercalc_menu() { array('admin/config/content/sheetnode/ethercalc' = array( 'title' = 'EtherCalc', 'access arguments' = array('administer site configuration'), 'page callback' = 'drupal_get_form', 'page arguments' = array('_sheetnode_ethercalc_settings'), 'description' = 'Administer settings for EtherCalc.', 'type' = MENU_LOCAL_TASK, )); }

289. /** * * Implements hook_menu(). * * In sheetnode_ethercalc_menu.info: * configure = admin/config/content/sheetnode/ethercalc * */ function sheetnode_ethercalc_menu() { array('admin/config/content/sheetnode/ethercalc' = array( 'title' = 'EtherCalc', 'access arguments' = array('administer site configuration'), 'page callback' = 'drupal_get_form', 'page arguments' = array('_sheetnode_ethercalc_settings'), 'description' = 'Administer settings for EtherCalc.', 'type' = MENU_LOCAL_TASK, )); }

290. /** * Implements hook_sheetnode_plugins(). */ function sheetnode_ethercalc_sheetnode_plugins( $value, $save_element, $context ) { // Only turn on Ethercalc if we're editing the node. if (!empty($save_element)) { $ethercalc_host = variable_get('sheetnode_ethercalc_host', ''); $ethercalc_port = variable_get('sheetnode_ethercalc_port', '8000'); $ethercalc_path = …; drupal_add_js($ethercalc_path . '/socket.io/socket.io.js#'); drupal_add_js($ethercalc_path . '/zappa/zappa.js#'); drupal_add_js($ethercalc_path . '/static/md5.js#'); drupal_add_js($ethercalc_path . '/player/broadcast.js#'); drupal_add_js($ethercalc_path . '/player/main.js#'); } }

291. /** * Implements hook_sheetnode_plugins(). */ function sheetnode_ethercalc_sheetnode_plugins( $value, $save_element, $context ) { // Only turn on Ethercalc if we're editing the node. if (!empty($save_element)) { $ethercalc_host = variable_get('sheetnode_ethercalc_host', ''); $ethercalc_port = variable_get('sheetnode_ethercalc_port', '8000'); $ethercalc_path = …; drupal_add_js($ethercalc_path . '/socket.io/socket.io.js#'); drupal_add_js($ethercalc_path . '/zappa/zappa.js#'); drupal_add_js($ethercalc_path . '/static/md5.js#'); drupal_add_js($ethercalc_path . '/player/broadcast.js#'); drupal_add_js($ethercalc_path . '/player/main.js#'); } }

293. 2012. 7. 4.

294. 2012. 7. 4.

295. 2012. 7. 4. Lith.tw

296. 2012. 7. 4. Lith.tw

297. 2012. 7. 4. Lith.tw

298. 2012. 7. 4. Lith.tw

299. 2012. 7. 4. Lith.tw

300. 2012. 7. 4. Lith.tw

302. 结论是：

303. 结论是：

304. 结论是：寫 Drupal 模組真的很簡單！

305. 感謝收看! EtherCalc for Drupal

306. EtherCalc 以著作結合本文件之人，在法律許可之範圍內，拋棄該著作依著作權法所享有之權利，及其相關或鄰接的法律權利，宣告該著作貢獻至公共領域。採用 CC0 之著作，不要求姓名表彰。 SheetNode.org

狠狠撸

EtherCalc for Drupal

Recommended

More Related Content

Similar to EtherCalc for Drupal (16)

More from Audrey Tang (20)

Recently uploaded (6)

EtherCalc for Drupal