Let's make own Editor like Google Docs

Explain how to make a document editor like Google Docs which has collaboration and various features

Transcript

1. 讓我們土炮 Google Docs 吧！ Let's Make Own Editor Like Google Docs! 親愛的
2. 錢逢祥 Fred Chien 碼子狗
3. 時間匆匆 很多人都不給我用這張照片了
5. 錢逢祥 Fred Chien 碼子狗
7. 短短四十分鐘 40 minutes is short
8. 太短了 Too short
9. 我可能講不完所有細節 Not easy to explain all details
10. 可能前戲都不夠 ...
11. 只能盡量講吧！ Talk about everything as much as I can!
13. 首先 談點悲傷的歷史
14. 文書編輯器台灣從不缺席 你知道台灣早期的文書編輯器產業很強悍嗎？
15. 漢書 書中仙、HE
16. 這其實是 PE2
18. 至今還活著 而且對很多人來說難以被取代
20. 做一個自己的編輯器 Make own editor
21. 很難嗎？ Difficult to make it?
22. 其實不難 Not difficult Actually
23. 對有經驗的人來說 If you have experence
24. 生容易，養很難 Easy to make but damn hard to bring up
25. 對沒經驗的人來說 If you didn't experence
26. 走錯路，什麼不會發生 Wrong way, nothing's happend
27. 重點是 The point is
28. 我們都很菜 We are so young
29. 試想一下，你會怎麼做？ Think about what will you do for that?
30. ContentEditable 第一時間肯定是 Hey! Ha! Yeah! <div contenteditable="true" />
31. Content Difference Comparison 然後你一定是這樣想的 +Hi -Hey! -Yeah!
32. Version Control 你一定是個死宅攻城獅
34. 這就是典型的走錯路 Wrong way and wrong direction
35. 你會得到什麼結果？ You will get ?
36. 很多功能做不到 Much functionality is unable to implement
37. 很多功能做不到或有問題 • 分頁（Page break） • 表格選取（Table selection） • 游標移動（cursor movement） • 多元的項目符號（Item list） • 復原、重做的實現（Undo/Redo） • .. more
38. Content Difference Comparison 的問題 • 你以為瀏覽器會產生你預期的 HTML 嗎？ • 不同瀏覽器之間對 HTML 的處理不一樣 • 以「行」為單位的比對不足以達成需求 （HTML 根本沒在管換行符號）
39. 至於 Verson Control • 太多的內容改動、不預期的改動 （你還記得你 merge code 的痛苦嗎？） • 你怎麼能期望一切能自動化呢？
41. 怎麼辦？ How to do?
42. 忘了一切 Forget everything you know
43. 你眼前直覺都是假的！ Everything is unreal
44. 不能依靠 ContentEditable Don't use it
45. 從 FLUX 得到啟發 You should be inspired by it
46. Data Structure UI Action Render Trigger Modify
47. 你不是真的在操作 HTML Not modify HTML directly
48. 而是把資料結構畫成 HTML Convert Data Structure to HTML
49. 你操作的是資料結構 Only way with data structure operation
50. Data Structure { childrens: [ { type: 'paragraph' , childrens: [ { type: 'inline', style: { color: 'red' }, text: 'Hello' }, { type: 'inline', style: { color: 'blue' }, text: 'Bro' } ] }, { type: 'paragraph' , childrens: [ { type: 'inline', style: { color: 'green' }, text: 'Second paragraph' }, { type: 'inline', style: { color: 'orange' }, text: 'KerKer' } ] } ] }
51. To HTML <p> <span style="color: red;">Hello</span> <span style="color: blue;" >Bro</span> </p> <p> <span style="color: green;">Second paragraph</span> <span style="color: orange;" >KerKer</span> </p>
52. 沒有 ContentEditable ？ No ContentEditable?
53. 自幹 Make it yourself
54. 自幹 ContentEditable • Rendering （畫面渲染） • Selection & Range （反白、游標和焦點） • Line Break（斷行） • Behaviors of Input （各種輸入或按鍵行為） • Input method （輸入法） • Components（各種不同的元件：Image、Table、Item List ...etc） • More...
55. 很煩是吧？ God damn way
56. 但 Google 就是這樣做的 Google done it already
57. 技術細節？ Technical details
58. Selection & Range • Data Structure Management • Cursor placement • Selection mechanism (ex, Multi-selection) • Getting node of Data Structure by using (X,Y)
59. Line Break • Changing size of container effects line break • Line break for Chinese Language • Page Break will be based on this • You have implement "line view" for it ah 科科 kerker。棒棒喔！搞什麼鬼！我真的 很討厭你。 Line View 這是一段文字 This is a text 嘿嘿哈哈 Hola Ye
60. Input • compositionstart, compositionupdate and compositionend events • Make a layer which is over content to receive input events 中文輸入法 Focus on it to receive keyboard events Action
61. Components • Block • Inline • Inline Block • Cursor?
62. 協作機制 Collaborative mechanism
63. 其實你學了 FLUX 但沒有吸收進去吧？ 其實我也沒有吸收進去
64. Data Structure UI Action Render Trigger Modify
65. Data Structure UI Action Server Action
66. 另外一個問題也解決了 It solved anthor problem at the same time
67. 復原/重做 Redo/Undo
68. Action Action Action Action Action Action Action Action Queue is Operation History
69. Message Queue 訊息佇列
71. Real-time 即時
72. 用什麼語言？ What language you will choice?
73. 你有第二種選擇嗎？ You have no choice
74. 不選 Node.js ，你敢來這個場？ How dare you come here if you don't use Node.js JavaScript !
76. 聽完這場
77. 你可以大聲說
78. 如果你是 18 個月 跟一次前端風潮的苦手 你可以大聲說：「我不是盲目跟風好嗎？」
79. 我學的所有新東西 都是有其目的！
80. 早就在我預料之內！
81. 此外 前陣子有人在社群說台灣的前端技術很差
82. 你也可以跟他說
83. 出來單挑啊！
85. 最後 After this talk
86. 我好像應該附上專案連結 I have to provide project link
87. 今天講的都有 Open Source Everything in this talk is open source
88. 鄭重介紹 Introduce to you
90. 詩經。文件編輯引擎 SHIJING - Document Editing Engine
91. Shijing at Github cfsghost.github.io/Shijing
92. 再一次最後 The Last Thing
93. 很多人應該看過這張圖 This Picture
95. 對，我們徵地城守護者 We Want You
96. 等你來當魔王 ;-) Be a Boss
97. 精心設計的投履歷 API goo.gl/Ox0J1b 這是喔（ O ）不是「零（zero）」 Dca 哥
98. Thanks