2022/07/31 –, TR211
言語: 漢語
在這個議程中會介紹 Headless UI ,並且跟現有的元件開發方式比較。接著以清楚明瞭的範例,以及 react-table 這套著名的 open source 來看如何實踐 Headless UI。
Headless UI 是一種開發 UI 元件的機制。不像 Material UI、Ant Design 等有完整的排版系統和一致的樣式風格;headless UI 是透過依賴反轉的方式將自訂的樣式注入元件,並且只專注實作在元件的行為邏輯。
Headless UI 的主要好處是可以讓使用者自行決定外觀,不用再辛苦地覆寫樣式。開發者也能將集中火力在更進階的功能支援上。
react-table 是一套基於 Headless UI 實作的著名元件,在 GitHub 擁有1萬6千多的星星數。它讓使用 react 的開發者可以渲染各種使用情境的表格,而不用從頭開發背後的複雜邏輯,甚至可以讓其他人自行開發 plugin,打造 react-table 的開發生態圈。因此希望透過閱讀它的原始碼,一探 Headless UI 的起手式。
Beginner
Target Audience –有 react 經驗者、前端工程師
在前端技術開始蓬勃發展的 2015 年,踏上歷經 6 年的 F2E 旅程。目前正要邁入下
一個6年。
現任 Migo 資深前端工程師,同時擔任 ALPHA Camp 前端課程助教。工作之餘時常
思考自己的可能性,並且化作行動嘗試各種挑戰。希望透過文章、書籍等產出
,為從事相關領域或是有興趣的人帶來幫助。