iT邦幫忙

第 12 屆 iThome 鐵人賽

DAY 6
1
Modern Web

從比入門再往前一點開始,一直到深入React.js系列 第 6

【Day.06】為什麼需要框架 - 從元件的切割與設計,到框架的誕生

就如同我們前五天的過程,遠古時代(?)前端工程師發現為了要讓程式碼的重複利用程度最大化,自己的元件不斷地被往下劃分,加了各式各樣的功能,開始眼花撩亂。

網頁元件化與Atomic Design

自然界萬物的組成,是由原子組成分子、分子組成組織、組織形成器官、器官形成生物。

2013年前端工程師Brad Frost提出了網頁元件化的Atomic Design概念,目前也被廣泛應用於Design System中。這個概念簡而言之是把程式碼架構分成這樣:

  • Atoms 原子:最基礎的元素,以我們的範例是menuItem
  • Molecules 分子:由原子構成的簡易架構,以我們的範例是menu
  • Organisms 組織:由原子及分子所組成的元件。
  • Templates 模板
  • Pages 頁面

要注意的是Atomic Design僅是一個「概念」。並沒有強制規定說什麼要是Atoms、Molecules、Organisms...也沒有規定說一定要切成這些架構。

詳情可以參考作者的網站:
https://bradfrost.com/about/

聽起來很抽象,我該怎麼劃分架構呢?

我自己是先觀摩一些知名的元件庫網站的做法,例如Bootstrap
https://getbootstrap.com/docs/4.5/components/alerts/

還有semantic-ui
https://semantic-ui.com/elements/button.html

雖然這些是css框架,但也可以從他們設定class的方式去觀察哪些架構應該被劃分在一起

混亂、不斷重寫的程式碼卻也產生了

雖然架構被劃分的很明確,但是卻也誕生了兩個問題:

1. 因為分了很多檔,HTML檔案裡面出現了一大堆的script標籤和link標籤

為了解決這個問題,工程師製造出了「打包工具」,我們會在後面的文章提到。

2. 很多常見的程式架構在專案一開始的時候還是要從頭寫(EX: 前面實作的觀察者模式架構)

喜歡模組化的工程師心想,那我乾脆就把這些幾乎都會用到的架構也包成「通用模組」,把這些模組包成一個Library,每次就用這個Library來寫專案就好了啊?

於是各家軟體公司開始打造自己Library,有的Library因為很好用,開始在前端業界流行,這些公司也很阿莎力的免費授權給所有開發者使用。後來,這些Library也轉為openSource專案,人們逐漸稱這些Library為「前端框架」。

其中,又以Google開發的Angular、Facebook開發的React、中國人(尤雨溪)開發的Vue最為盛行。

世人俗稱前端三大框架前端御三家前端吵架話題

而這三個框架的學習成本比較如下:

  • Anuglar: 綁定Typscript(把Javascript改成需要定義型態的新語言)
  • Vue: 一般被認為學習成本最低,但遇到大量資料時可能有效能問題
  • React: 綁定JSX(讓HTML標籤可以在Javascript中使用、運算的語法),程式結構複雜時對開發者比較直覺,但目前流行的React語法需要注意效能問題。

可以考量看看,很多人會推薦從Vue上手,不過React在去年更動後架構有變比較好理解,Angular我沒用過就不評論了。

前端框架不是template(模板),而是幫你做了前端程式通用的部份

有些新手會產生前端框架是template的誤解,希望這幾天的文章可以幫助讀者理解前端框架的形成是怎麼來的。

接下來,我們會開始介紹React.js。


上一篇
【Day.05】為什麼需要框架 - 分離架構、自製Menu、MenuItem
下一篇
【Day.07】React入門 - 簡介React、從class到Hook的發展歷史
系列文
從比入門再往前一點開始,一直到深入React.js30

尚未有邦友留言

立即登入留言