今天，就當閒話家常，待我娓娓道來

UI Framework & Design Spec

Ant Design, Material Design, Human Interface Guidelines, 這幾個名詞或許你都聽過，作為開發者，可能想說這跟設計師比較有關，就忽略了。當然我們不需真的去研讀這些東西的具體內容，但一知半解可能就有機會對開發造成重創，舉例：以實踐 Material Design（ 簡稱 MD，下同 ） 的 UI 框架去實作一個非 MD 風格的（ 甚至大相徑庭 ）UI . . .

我想開工沒多久後，你可能輕則摔得頭破血流，重則天人永隔，若你有這種想法，或做過類似的事，代表你其實並不懂這些 Design Spec 存在意義，至少你沒有 sense。這些 Design Spec 橫空出世幾個最大重點之一為：在抽象層次上定義了可復用、擴充的語言

光這一點，就對設計與開發團隊提供無比巨大的貢獻＊：設計與開發討論上有了共通語言（ 不論在 Wireframe 還是 Mockup ），而此語言不只能夠被討論，還能被 "實作"，例如 Google 就打造了 Material Theme Editor，從開發者的角度來看，它對設計師而言，就如 Vuetify 對我們一樣（ 為便於理解，你直接把它當成設計界的 UI 框架也行 ）

既然它是種共通的語言，那為何又有其它 Design Spec 的類別呢？就因它是語言，就像「 你好 」實際用中文、日文、英文 . . . 來撰寫，表面格式都不盡相同，但要表達的意思大家都懂：跟某人打招呼；Design Spec 亦存在這種概念，所以說，當你能用這種角度去分析以上的荒謬行為，就知道那就有點像是想辦法用德文拼出中文一樣，這就是為何沒等你開發完，救護車已在外頭等待的原因

此處只是從開發者角度探討這個議題，有時上網補充一些設計知識確實有幫助，但請別走火入魔去鑽研一些對開發者沒太大必要的東西（e.g. 嚴格區分 Spec 和 Guideline 的差異，哪種 Design Spec 比較強 . . . ）

＊當然這東西不是真理，也不是所有團隊都能善用這個東西，拿著倚天屠龍劍切菜也不少

Functional Component Composition

以前有經驗的（ 並非每個人都這樣 ）的前端開發者，拿到 UI 圖，在實際上機刻板前，會先在紙上（ 我還看過有人用微軟的 Word 策劃 ）構思：「 這東西用 <button>，那邊最外層用 <div>，然後給個 container class，內層用 <main>，這兩個元件看來是得用 Float 才能達到 . . . 」。不懂的人還以為這是在通靈，實際上透過這個方式，效果還真好，尤其筆者好幾年前試過以這種方式跟同事討論後，兩人搞個前端排版 pair programming，開發速度令人驚艷

（ 我不清楚上述所說的流程是否有被定義過、有個專有名詞可稱呼 ）等到前端漸漸流行組件化後，尤其被現代前端框架的推進，你開始寫起了 Component。依需求，它本身可能包含或沒囊括 html＊，依類型，或許可拆成 Container Component 和 Decoration Component＊＊，以下為了簡化，你可暫時把 Decoration Component 等同 Vuetify 的 UI Component（ 請點開此連結 ）。

現在，想像你拿到了張 UI 圖，這時在紙上構思的方式變成以 UI Component 的語言作定義：「 這是個 v-calendar，滑鼠移至這個圖案上會出現 v-tooltip，按下這個 v-btn 後，會跳出 v-dialog . . . 」，Ok, you got my idea，但這還不是我所謂的 Functional Component Composition，但有了這個基礎之後，在實作 Cinema Application 這個 UI 時，我才比較好解釋它的意義，你才能真正了解它是什麼，並享受它帶來的好處

＊＊ 或許你聽過諸如 Decoration Component、Dumb Component、Pure Component . . . 它們不盡相同，但核心概念一致，深入比較已超過本文探討範疇，筆者會於 Blog 另行撰文

＊例如 Vue 的 rendless component，在這個檔案裡，你可以不需要寫出任何的標籤，但這有點進階了，非本教學重點