Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Let's make own Editor like Google Docs
Search
Fred Chien
October 23, 2016
Technology
8
1.6k
Let's make own Editor like Google Docs
Explain how to make a document editor like Google Docs which has collaboration and various features
Fred Chien
October 23, 2016
Tweet
Share
More Decks by Fred Chien
See All by Fred Chien
Qtjs
cfsghost
0
190
我用 Node.js 開發自己的 Web 瀏覽器
cfsghost
1
1.2k
Other Decks in Technology
See All in Technology
テストケースの自動生成に生成AIの導入を試みた話と生成AIによる今後の期待
shift_evolve
0
190
20240725 LLMによるDXのビジョンと、今何からやるべきか @Azure OpenAI Service Dev Day
nrryuya
3
1.2k
頼られるのが大好きな 皆さんへ - 支援相手との期待の合わせ方、突き放し方 -/For_people_who_like_to_be_relied_on
naitosatoshi
1
290
コミュニティサービスに「あなたへ」フィードを リリースするまでの試行錯誤
takapy
1
150
大規模ドラレコデータ収集・機械学習基盤を支える AWS CDK 〜導入・運用事例紹介〜
pemugi
0
110
Classmethod流のPlatform Engineering / classmethod-platform-engineering-devio2024
tomoki10
0
480
Azure OpenAI Service Dev Day / LLMでできる!使える!生成AIエージェント
masahiro_nishimi
3
810
開発生産性をむしろ向上させる セキュリティパートナーの作り方 / Dev Productivity Con 2024
flatt_security
0
390
「我々はどこに向かっているのか」を問い続けるための仕組みづくり / Establishing a System for Continuous Inquiry about where we are
daitasu
0
170
技術負債による事業の失敗はなぜ起こるのか / Why do business failures due to technical debt occur?
i35_267
0
190
簡単に始めるSnowflakeの機械学習
nayuts
1
190
MySQLのロックの種類とその競合
yoku0825
6
1.6k
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
93
13k
Debugging Ruby Performance
tmm1
71
11k
Embracing the Ebb and Flow
colly
81
4.3k
Ruby is Unlike a Banana
tanoku
96
10k
Designing with Data
zakiwarfel
96
5k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
245
1.2M
Why You Should Never Use an ORM
jnunemaker
PRO
51
8.9k
Web Components: a chance to create the future
zenorocha
307
41k
Large-scale JavaScript Application Architecture
addyosmani
506
110k
Designing on Purpose - Digital PM Summit 2013
jponch
113
6.6k
Code Reviewing Like a Champion
maltzj
517
39k
Making the Leap to Tech Lead
cromwellryan
127
8.7k
Transcript
讓我們土炮 Google Docs 吧! Let's Make Own Editor Like Google
Docs! 親愛的
錢逢祥 Fred Chien 碼子狗
時間匆匆 很多人都不給我用這張照片了
None
錢逢祥 Fred Chien 碼子狗
None
短短四十分鐘 40 minutes is short
太短了 Too short
我可能講不完所有細節 Not easy to explain all details
可能前戲都不夠 ...
只能盡量講吧! Talk about everything as much as I can!
None
首先 談點悲傷的歷史
文書編輯器台灣從不缺席 你知道台灣早期的文書編輯器產業很強悍嗎?
漢書 書中仙、HE
這其實是 PE2
None
至今還活著 而且對很多人來說難以被取代
None
做一個自己的編輯器 Make own editor
很難嗎? Difficult to make it?
其實不難 Not difficult Actually
對有經驗的人來說 If you have experence
生容易,養很難 Easy to make but damn hard to bring up
對沒經驗的人來說 If you didn't experence
走錯路,什麼不會發生 Wrong way, nothing's happend
重點是 The point is
我們都很菜 We are so young
試想一下,你會怎麼做? Think about what will you do for that?
ContentEditable 第一時間肯定是 Hey! Ha! Yeah! <div contenteditable="true" />
Content Difference Comparison 然後你一定是這樣想的 +Hi -Hey! -Yeah!
Version Control 你一定是個死宅攻城獅
None
這就是典型的走錯路 Wrong way and wrong direction
你會得到什麼結果? You will get ?
很多功能做不到 Much functionality is unable to implement
很多功能做不到或有問題 • 分頁(Page break) • 表格選取(Table selection) • 游標移動(cursor movement)
• 多元的項目符號(Item list) • 復原、重做的實現(Undo/Redo) • .. more
Content Difference Comparison 的問題 • 你以為瀏覽器會產生你預期的 HTML 嗎? • 不同瀏覽器之間對
HTML 的處理不一樣 • 以「行」為單位的比對不足以達成需求 (HTML 根本沒在管換行符號)
至於 Verson Control • 太多的內容改動、不預期的改動 (你還記得你 merge code 的痛苦嗎?) •
你怎麼能期望一切能自動化呢?
None
怎麼辦? How to do?
忘了一切 Forget everything you know
你眼前直覺都是假的! Everything is unreal
不能依靠 ContentEditable Don't use it
從 FLUX 得到啟發 You should be inspired by it
Data Structure UI Action Render Trigger Modify
你不是真的在操作 HTML Not modify HTML directly
而是把資料結構畫成 HTML Convert Data Structure to HTML
你操作的是資料結構 Only way with data structure operation
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' } ] } ] }
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>
沒有 ContentEditable ? No ContentEditable?
自幹 Make it yourself
自幹 ContentEditable • Rendering (畫面渲染) • Selection & Range (反白、游標和焦點)
• Line Break(斷行) • Behaviors of Input (各種輸入或按鍵行為) • Input method (輸入法) • Components(各種不同的元件:Image、Table、Item List ...etc) • More...
很煩是吧? God damn way
但 Google 就是這樣做的 Google done it already
技術細節? Technical details
Selection & Range • Data Structure Management • Cursor placement
• Selection mechanism (ex, Multi-selection) • Getting node of Data Structure by using (X,Y)
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
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
Components • Block • Inline • Inline Block • Cursor?
協作機制 Collaborative mechanism
其實你學了 FLUX 但沒有吸收進去吧? 其實我也沒有吸收進去
Data Structure UI Action Render Trigger Modify
Data Structure UI Action Server Action
另外一個問題也解決了 It solved anthor problem at the same time
復原/重做 Redo/Undo
Action Action Action Action Action Action Action Action Queue is
Operation History
Message Queue 訊息佇列
None
Real-time 即時
用什麼語言? What language you will choice?
你有第二種選擇嗎? You have no choice
不選 Node.js ,你敢來這個場? How dare you come here if you
don't use Node.js JavaScript !
None
聽完這場
你可以大聲說
如果你是 18 個月 跟一次前端風潮的苦手 你可以大聲說:「我不是盲目跟風好嗎?」
我學的所有新東西 都是有其目的!
早就在我預料之內!
此外 前陣子有人在社群說台灣的前端技術很差
你也可以跟他說
出來單挑啊!
None
最後 After this talk
我好像應該附上專案連結 I have to provide project link
今天講的都有 Open Source Everything in this talk is open source
鄭重介紹 Introduce to you
None
詩經。文件編輯引擎 SHIJING - Document Editing Engine
Shijing at Github cfsghost.github.io/Shijing
再一次最後 The Last Thing
很多人應該看過這張圖 This Picture
None
對,我們徵地城守護者 We Want You
等你來當魔王 ;-) Be a Boss
精心設計的投履歷 API goo.gl/Ox0J1b 這是喔( O )不是「零(zero)」 Dca 哥
Thanks