iT邦幫忙

2021 iThome 鐵人賽

DAY 1
0
Modern Web

深入 slate.js x 一起打造專屬的富文字編輯器吧!系列 第 1

Day 1. Pre-Start × 微前言

https://ithelp.ithome.com.tw/upload/images/20210916/20139359Pl2etuzSqo.png

行前導讀


第一次參加鐵人賽的你,先禮貌性來個自我介紹吧?!


嗨大家好! This is Ian , 24 歲身心理男。

Position : RD —— web frontend engineer 。同時也是一名街舞舞者

高中開始了自己的街舞生涯,大學就算讀資工系也是不負眾望地把大一二讀成熱舞系資工社,大三因緣際會接觸了網頁工程後才挖掘出了我對於寫程式的興趣。

當時與身邊街舞圈以及系上的朋友籌組了前端讀書會,也在系上學長的介紹下加入了他們的新創公司,正式掛上了網頁工程師的 RD 頭銜。

目前在職場上闖蕩剛滿一年多,即便菜味濃郁,仍很慶幸自己依舊能保有對生活的熱情,上午盯著螢幕上 dark mode 的 vscode 燒腦,晚上仍有餘裕將我始終如一的興趣(Dance~)當作副業培養&訓練自己。

現階段的技能樹點在前端居多,框架以 React 為主,對 Typescript 又愛又恨,打從心底尊敬能寫出鬼一般的 utility-types 的人,但對一切工程相關的事物都保有興趣,你可以把好奇心視作我的代名詞,活到老學到死是我的信仰。

自介以上,簡潔有力。

引發你寫這一系列文章的契機是什麼?因為疫情在家閒的發慌嗎?


嗯,對。

這一小段與文章的主軸不相關,讀者不感興趣可以直接略過,就當作我在家閒的發慌就好 XD

這就要讓我們把時光回朔到我還在學長的新創公司就職的時候了,公司當時主要是接案公司,專案都以React開發為主,只要是與網頁前端相關的事幾乎是圍繞著 React 運行。

老闆當時希望在接案之餘也能同時經營自家產品,而他構思出的第一個產品(我也不確定是不是第一個XD),就是一個協助網頁前端開發者建立 富文本編輯器 ( Rich Text Editor ),同時提供模組化的樣式與元件的 SaaS 服務,開發初期階段因為要提供給公司使用所以是 based on React 的。

當時是我第一次接觸 WYSIWYG ,好奇心使然去偷看了一下裡面的 source-code 彷彿看見新大陸,與自己平常用 React 拼貼排版樣式的 code 完全不同,滿滿的 dom 操作、監聽器處理、演算法計算,我整個人都驚呆了!然後就用非常徒法煉鋼的方式一行一行搞懂裡面的 code 自己去實作出了一個小份的,雖然功能很陽春但還是成就感滿滿。

後來公司新進了一位大神同事,老闆在面試時跟他描述了產品的構思後他就向大家介紹了 Slate.js 這個 open source library ,並建議產品的底層可以先直接依賴於 Slate 提供的服務,未來有必要時再抽換即可。

https://ithelp.ithome.com.tw/upload/images/20210916/20139359M0zK4zIfAd.png

slate live demo

之後老闆就把產品的建立全權交給他負責了,我也因為在忙其他的專案沒有參與其中,對於 Slate 提供的服務也是一知半解,一直到我進了新公司,公司的產品又出現製作 Rich Text Editor 的需求後我才又回過頭來研究並使用 Slate 。

從官網的 document 開始,上網找了相關的介紹與解析文章卻總覺得不夠詳盡或者東缺西缺,最後到一點一點地翻找 source-code 裡各個功能的實現邏輯。越陷越深的我,最後終於決定為它產出一份完整的源碼解析文章,一方面完整自己的學習過程,另一方面也希望能為同樣漫遊其中的同道中人指出一盞明燈。

那我會從文章中學到些什麼呢?


首先我們會先將目光聚焦在整個網頁 富文本編輯器 ( Rich Text Editor ) 的演進過程,歷代的編輯器分別有哪些特色,它們又各自面臨了哪些問題,而目前市場上的趨勢我們也會一併納入考量。

接著到了 slate.js 的介紹篇章後當然是由淺入深,從完整理解 slate.js 的使用概念,到深入進 source code 裡,挖掘各功能是如何實現程式邏輯的。

同時在這樣的過程中學習作者的開發思維:

  • 整個專案是如何區分架構的,如此設計的原因又為何?
  • 因應什麼樣的情境去使用了哪些工具,選擇這項工具的原因又是什麼?
  • 有什麼先備知識是需要事先了解的,它們又能延伸出什麼樣的概念與議題?

除了理解程式碼本身以外,我們也希望能夠理解程式碼背後的設計原因(畢竟厲害的工程師總是能夠換位思考嘛~

約法三章


在對我本人以及對整個系列文章內容有了大致上的了解後,我們接著來聊聊形式層面:

首先,就像上面一樣,整篇系列文會穿插著問與答。

只要看到 Quote 就代表是提出問題的一方

如果提出的問題正好就是讀者想問的,歡迎留言告訴我!我會 ... 很開心 XD 。

斜體文字 代表是筆者留的小註釋。

粗體文字 代表會在之後的文章詳細做解釋。

如果有哪裡解釋不清楚或有誤的都歡迎留言指正與討論!

最後來附上 30 日的文章分類列表,咱們就明天見拉!

《 Pre-Start 篇》

包含本篇,統整了一切進入 WYSIWYG 世界所應有的先備知識

《 Compare 篇 》

你知道 Web WYSIWYG 有分世代嗎?
市場上形形色色的編輯器套件搞得開發者眼花撩亂,我們該如何快速理解它們並依照自己的需求做選擇呢?
答案就收錄在這個篇章裡

《 slate 篇 》

至此正式開始我們深入 slate 原始碼世界的旅程

本次的鐵人賽僅會專注在 Slate mono-repo 裡的 slate package ,未來有機會我們再開啟其他 packages 的旅程

〈 slate-Interfaces 〉

最最最基本的入門門檻
當然要先從 slate 定義好的 Interfaces 開始介紹起!

〈 slate-Immutable 〉

你應該聽說過 Immutable 吧?沒聽過也沒關係
本章節會從頭探討一次 JS Immutable 的議題,再帶入到 slate 與它所選用的工具( Immer.js )之間的關係

〈 slate-Operation 〉

slate Operation 大解密!
我們會盡可能地深入進 source code 裡探索 slate 究竟是如何實作出 Operation 的

〈 slate-Normalizing 〉

你知道 Normalize (正規化)嗎?你知道 slate 也自備 Normalize 的功能嗎?
本章節一樣盡可能地深入進 source code 裡挖掘 slate Normalizing 的實作內容
筆者也準備了相關的流程圖,讓函式彼此間的關係與整個 slate 編輯器的運作流程更為清楚

〈 slate-Transforms 〉

最後章節以 reference 的形式呈現
為開發 slate 的迷途羔羊們指點迷津

《 Goal 結語 》


下一篇
Day 2. Pre-Start × WYSIWYG
系列文
深入 slate.js x 一起打造專屬的富文字編輯器吧!30

尚未有邦友留言

立即登入留言