Let's make own Editor like Google Docs

Slide 1

Slide 1 text

讓我們土炮 Google Docs 吧！ Let's Make Own Editor Like Google Docs! 親愛的

Slide 2

Slide 2 text

錢逢祥 Fred Chien 碼子狗

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

錢逢祥 Fred Chien 碼子狗

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

短短四十分鐘 40 minutes is short

Slide 8

Slide 8 text

太短了 Too short

Slide 9

Slide 9 text

我可能講不完所有細節 Not easy to explain all details

Slide 10

Slide 10 text

可能前戲都不夠 ...

Slide 11

Slide 11 text

只能盡量講吧！ Talk about everything as much as I can!

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

首先談點悲傷的歷史

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

漢書書中仙、HE

Slide 16

Slide 16 text

這其實是 PE2

Slide 17

Slide 17 text

No content

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

No content

Slide 20

Slide 20 text

做一個自己的編輯器 Make own editor

Slide 21

Slide 21 text

很難嗎？ Difficult to make it?

Slide 22

Slide 22 text

其實不難 Not difficult Actually

Slide 23

Slide 23 text

對有經驗的人來說 If you have experence

Slide 24

Slide 24 text

生容易，養很難 Easy to make but damn hard to bring up

Slide 25

Slide 25 text

對沒經驗的人來說 If you didn't experence

Slide 26

Slide 26 text

走錯路，什麼不會發生 Wrong way, nothing's happend

Slide 27

Slide 27 text

重點是 The point is

Slide 28

Slide 28 text

我們都很菜 We are so young

Slide 29

Slide 29 text

試想一下，你會怎麼做？ Think about what will you do for that?

Slide 30

Slide 30 text

ContentEditable 第一時間肯定是 Hey! Ha! Yeah!

Slide 31

Slide 31 text

Content Difference Comparison 然後你一定是這樣想的 +Hi -Hey! -Yeah!

Slide 32

Slide 32 text

Version Control 你一定是個死宅攻城獅

Slide 33

Slide 33 text

No content

Slide 34

Slide 34 text

這就是典型的走錯路 Wrong way and wrong direction

Slide 35

Slide 35 text

你會得到什麼結果？ You will get ?

Slide 36

Slide 36 text

很多功能做不到 Much functionality is unable to implement

Slide 37

Slide 37 text

很多功能做不到或有問題 ● 分頁（Page break） ● 表格選取（Table selection） ● 游標移動（cursor movement） ● 多元的項目符號（Item list） ● 復原、重做的實現（Undo/Redo） ● .. more

Slide 38

Slide 38 text

Content Difference Comparison 的問題 ● 你以為瀏覽器會產生你預期的 HTML 嗎？ ● 不同瀏覽器之間對 HTML 的處理不一樣 ● 以「行」為單位的比對不足以達成需求（HTML 根本沒在管換行符號）

Slide 39

Slide 39 text

至於 Verson Control ● 太多的內容改動、不預期的改動（你還記得你 merge code 的痛苦嗎？） ● 你怎麼能期望一切能自動化呢？

Slide 40

Slide 40 text

No content

Slide 41

Slide 41 text

怎麼辦？ How to do?

Slide 42

Slide 42 text

忘了一切 Forget everything you know

Slide 43

Slide 43 text

你眼前直覺都是假的！ Everything is unreal

Slide 44

Slide 44 text

不能依靠 ContentEditable Don't use it

Slide 45

Slide 45 text

從 FLUX 得到啟發 You should be inspired by it

Slide 46

Slide 46 text

Data Structure UI Action Render Trigger Modify

Slide 47

Slide 47 text

你不是真的在操作 HTML Not modify HTML directly

Slide 48

Slide 48 text

而是把資料結構畫成 HTML Convert Data Structure to HTML

Slide 49

Slide 49 text

你操作的是資料結構 Only way with data structure operation

Slide 50

Slide 50 text

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' } ] } ] }

Slide 51

Slide 51 text

To HTML

Hello Bro

Second paragraph KerKer

Slide 52

Slide 52 text

沒有 ContentEditable ？ No ContentEditable?

Slide 53

Slide 53 text

自幹 Make it yourself

Slide 54

Slide 54 text

自幹 ContentEditable ● Rendering （畫面渲染） ● Selection & Range （反白、游標和焦點） ● Line Break（斷行） ● Behaviors of Input （各種輸入或按鍵行為） ● Input method （輸入法） ● Components（各種不同的元件：Image、Table、Item List ...etc） ● More...

Slide 55

Slide 55 text

很煩是吧？ God damn way

Slide 56

Slide 56 text

但 Google 就是這樣做的 Google done it already

Slide 57

Slide 57 text

技術細節？ Technical details

Slide 58

Slide 58 text

Selection & Range ● Data Structure Management ● Cursor placement ● Selection mechanism (ex, Multi-selection) ● Getting node of Data Structure by using (X,Y)

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

Components ● Block ● Inline ● Inline Block ● Cursor?

Slide 62

Slide 62 text

協作機制 Collaborative mechanism

Slide 63

Slide 63 text

其實你學了 FLUX 但沒有吸收進去吧？其實我也沒有吸收進去

Slide 64

Slide 64 text

Data Structure UI Action Render Trigger Modify

Slide 65

Slide 65 text

Data Structure UI Action Server Action

Slide 66

Slide 66 text

另外一個問題也解決了 It solved anthor problem at the same time

Slide 67

Slide 67 text

復原/重做 Redo/Undo

Slide 68

Slide 68 text

Action Action Action Action Action Action Action Action Queue is Operation History

Slide 69

Slide 69 text

Message Queue 訊息佇列

Slide 70

Slide 70 text

No content

Slide 71

Slide 71 text

Real-time 即時

Slide 72

Slide 72 text

用什麼語言？ What language you will choice?

Slide 73

Slide 73 text

你有第二種選擇嗎？ You have no choice

Slide 74

Slide 74 text

不選 Node.js ，你敢來這個場？ How dare you come here if you don't use Node.js JavaScript !

Slide 75

Slide 75 text

No content

Slide 76

Slide 76 text

聽完這場

Slide 77

Slide 77 text

你可以大聲說

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

我學的所有新東西都是有其目的！

Slide 80

Slide 80 text

早就在我預料之內！

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

你也可以跟他說

Slide 83

Slide 83 text

出來單挑啊！

Slide 84

Slide 84 text

No content

Slide 85

Slide 85 text

最後 After this talk

Slide 86

Slide 86 text

我好像應該附上專案連結 I have to provide project link

Slide 87

Slide 87 text

今天講的都有 Open Source Everything in this talk is open source

Slide 88

Slide 88 text

鄭重介紹 Introduce to you

Slide 89

Slide 89 text

No content

Slide 90

Slide 90 text

詩經。文件編輯引擎 SHIJING - Document Editing Engine

Slide 91

Slide 91 text

Shijing at Github cfsghost.github.io/Shijing

Slide 92

Slide 92 text

再一次最後 The Last Thing

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

No content

Slide 95

Slide 95 text

對，我們徵地城守護者 We Want You

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

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

Slide 98

Slide 98 text

Thanks