Let's make own Editor like Google Docs

42324a396666b26cefbe250aa60e5f26?s=47 Fred Chien
October 23, 2016

Let's make own Editor like Google Docs

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

42324a396666b26cefbe250aa60e5f26?s=128

Fred Chien

October 23, 2016
Tweet

Transcript

  1. 讓我們土炮 Google Docs 吧! Let's Make Own Editor Like Google

    Docs! 親愛的
  2. 錢逢祥 Fred Chien 碼子狗

  3. 時間匆匆 很多人都不給我用這張照片了

  4. None
  5. 錢逢祥 Fred Chien 碼子狗

  6. None
  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!

  12. None
  13. 首先 談點悲傷的歷史

  14. 文書編輯器台灣從不缺席 你知道台灣早期的文書編輯器產業很強悍嗎?

  15. 漢書 書中仙、HE

  16. 這其實是 PE2

  17. None
  18. 至今還活著 而且對很多人來說難以被取代

  19. None
  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 你一定是個死宅攻城獅

  33. None
  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 的痛苦嗎?) •

    你怎麼能期望一切能自動化呢?
  40. None
  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 訊息佇列

  70. None
  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 !
  75. None
  76. 聽完這場

  77. 你可以大聲說

  78. 如果你是 18 個月 跟一次前端風潮的苦手 你可以大聲說:「我不是盲目跟風好嗎?」

  79. 我學的所有新東西 都是有其目的!

  80. 早就在我預料之內!

  81. 此外 前陣子有人在社群說台灣的前端技術很差

  82. 你也可以跟他說

  83. 出來單挑啊!

  84. None
  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

  89. None
  90. 詩經。文件編輯引擎 SHIJING - Document Editing Engine

  91. Shijing at Github cfsghost.github.io/Shijing

  92. 再一次最後 The Last Thing

  93. 很多人應該看過這張圖 This Picture

  94. None
  95. 對,我們徵地城守護者 We Want You

  96. 等你來當魔王 ;-) Be a Boss

  97. 精心設計的投履歷 API goo.gl/Ox0J1b 這是喔( O )不是「零(zero)」 Dca 哥

  98. Thanks