前言

究竟 library(函式庫) 與 framework(框架)之間的差異是什麼？

我們常見的

jQuery
Bootstrap
React
Vue
Angular

哪些是 library？哪些是 framework？

今天的主題，我也是到今天才開始認真感到好奇(搔頭)，因為一直以來，我都學習怎麼「使用」工具，但沒有認真思考過

這個工具有什麼樣的限制？
這個工具可以跟其他類似的工具搭配嗎？

今天丟出來的是比較大範圍的問題，來討論常常聽到的 library 與 framework 之間的差別。

先想一下

• Library 與 Framework 的差別在哪？
• Library 與 Framework 各自的優缺點是什麼？
• Library 與 Framework 各自適合什麼情境？

Library 與 Framework 的差別在哪？

兩句話理解它們：

You call library. Framework calls you.

當你呼叫 library 中的方法時，你是控制者，你控制著整個程式的流程，只是某幾個環節你需要 library 來幫忙而已。

但使用 framework 的時候情況是反過來的，framework 控制流程，是 framework 在呼叫你起來做事。

以 Day 2 討論過的 jQuery 來說，定位是 library，顯然是一個「隨開即用」的工具，只要哪裡有操作 DOM 的需求，我都可以把 jQuery 抓進來使用。

而另一方面，Bootstrap 的定位就是 framework，需要在 Bootstrap 規定的框架下，把你的 code 填進去，只要有按照規則走，你的 code 裡面不需要有什麼特別的 css 或 js，網頁打開卻可以非常漂亮，正是因為 framework 幫忙處理掉很多細節。

如果要買一台 PC ...

我個人的理解是，以「買一台 PC」來說：

Framework 比較像是直接買一台「套裝電腦」，錢花下去，主機直接抱回家，線插上去，開機直接用！雖然方便，但裡面零件的品牌如果你不喜歡，要換掉就不是容易的事情了，因為可能跟其他零件有較多相依性。

Library 則比較像是買零件來「組裝電腦」，如果手上只有一顆 CPU，電腦是沒辦法運作的，需要結合許多零件，才能組裝出可以運作的電腦。雖然看起來很累，但如果做足功課，你可以讓這台電腦完全發揮最佳效能且適合你。

Library 與 Framework 各自的優缺點是什麼？

這邊單純比較「要做到同一件事情」(比如建立一個 SPA 網站)的優缺點：

優點

• Library 的優點是彈性，可以混搭不同的 library，依照自己喜好來量身打造，不會受限於一定要用哪一個，對於開發者的自由度相當高。
• Framework 的優點是方便，一開始就什麼都有了，工具之間的相容性高，而且經驗容易移植(比如 A 與 B 公司都用 Angular 同一個版本，那跳過去比較無痛，但如果是 React 差異就可能很大)

缺點

• Library 的缺點是不夠便利，需要花很多精力決策要用哪些 library，且在決策之後可能還要處理各自的版本問題
• Framework 的缺點是低彈性，如果開發者不喜歡某一項工具，也只能硬著頭皮用，且正是因為一開始就什麼都有了，初始的學習曲線較高

Library 與 Framework 各自適合什麼情境？

Library 傾向用來解決特定的問題，例如需要表單管理，就引用 react-hook-form 來解決。

Framework 更傾向一個通用性的大架構，例如需要一個基本的 SPA 網頁，直接使用 Angular 來做為基底架構。

沒有哪一個更好，要看當下遇到的情況而定。

某種層面上來說，framework 其實就是解決了「需要多個 library 來解決」的問題。

結語

心智圖放大版

困惑很久的問題是，到底為什麼大家都說 React 是 framework，但 React 官網卻說自己是 library 呢？

我自己的答案是，如果單指 react 與 react-dom 這兩個 npm 套件來說，的確 React 是一個專門用來處理 view 的 library

但如果考量到 React 龐大的生態系：

需要 routing 所以用 react-router
需要 form 所以用 react-hook-form
需要管理 state 所以用 react-redux
需要發 api 所以用 axios

將這些單獨的 library 全部裝進一個 starter kit，其實你要把它當 framework 好像也沒什麼問題了，畢竟一個 SPA 該有的 MVC 架構，這包全部都提供，不再只有 View 了。(差不多就是 create-react-app 在做的事情)

參考資料

framework-vs-library