前端框架(framework)是什麼？
框架，會在框架的程式底層，去優化、封裝處理網頁開發上常碰到的的一些底層問題。也在這基礎上，提出一系列建構網頁的程式撰寫規範與方法，同時讓在使用框架的程式方法時，兼顧擴展性與維護性。
你可能會想說，那這跟套件 package 有什麼差別？沒錯！其實他們都是用原生的 JS 所構建起來，但是框架要解決的「問題格局」比套件大得多，它是一個更系統性、統包地解決前端程式問題上的一個概念。這就是框架最大的貢獻之處！
身為前端，如果有稍微看過各大框架的 Getting Started 文件（例：最新的 React 文件 Beta 版釋出），一定會看到框架會針對許多前端開發上的困難點，提出一套它們各自規定的撰寫規則。
只要照著這些規則撰寫頁面組件，前端開發者們便可以避開各種底層的支援度、或是效能問題，開發時間也能縮短許多（如下圖圖 1 所示）。
反之，如果你到 lodash 套件的官網上，你不會看到「如何寫出一個好網頁架構」的文件。因爲它的層級不到框架，只會關注在資料處理的局部面向上給予方法。
- 單看前端三大框架 React、Vue、Angular 的演進脈絡，他們都是建立在開源的社群中不斷被推廣與優化。這體現了開源精神，更是網際網路「分享」概念的延伸，也因為分享而讓前端技術不斷強大。
- 框架可能會引用其他套件進入他的生態圈。只要框架的生態完整、活躍，各界開發者也會因此願意為他們所開發的套件，提供對應的框架支援。而前端開發者們也會因為框架而受惠，能達成的技術需求更無可限量，產生一個在開發框架化與開發者間的正向循環。
- 前端框架也因為主流框架的帶動，讓更多新穎的框架被創造出來（如：Svelte）。框架因而百花齊放，框架與框架之間也會針對彼此的優點，進行繼承或優化
使用前端框架的好處
框架提升開發品質和拓展性
前端工程師使用了框架，會感受到框架提升所了開發品質。這個提升感，可從以下幾件開發體感來探討：
- 許多普遍的前端底層程式問題，其實開發中不希望遇到。框架的出現，讓我們不再煩惱。能減少犯錯機率，提升程式碼可靠性；也能在前端程式的撰寫，更關注與聚焦在更重要的、如建立商業邏輯上。
- 框架通常會有組件化的概念。這讓 UI 與程式的商業邏輯可以拆分、簡化，甚至被共用。因此，網頁的擴展性也能提升。
- 畫面組件的概念，通常伴隨著組件的生命週期（Lifecycle）。這些生命週期提醒我們，在介面控制上，需要理解其其中的階段，並在適當的階段對組件做適當的操作（如下圖 2 所示）。就像你需要在適當的人生階段做對的事情一樣，你不會在你一歲的時候出去賺錢養家，而是好好長大。
框架是規範：有共同語彙，就好維護
- 以前我們是先有資料，才會實作畫面。而框架則是透過組件的概念，將資料與介面抽離開來，我們可以在組件中同時定義組件的 Template (HTML) 與處理資料的變化，更容易控制介面的顯示。
- 前端框架像是工程師「撰寫程式」上公認的「語彙」或「方法」，就像是一個規範。當工程師都照著這樣的規範來寫程式，便能夠在規範上做更高層次的程式優化。因為大家的語彙相同，就能避免在過去工程師需要重新理解客製化框架的困擾，因而提升維護性。
- 框架讓更大的平台服務架構（SPA）能輕易地實現。通常框架會有完整的路由管理機制，讓各種頁面可以更輕易地被帶動、溝通。
學習路徑：從熟悉 JS 語言到建立框架
以現在職場需求、與市場許多以平台為基礎的架構來說，不管是 Junior、Mid，還是 Senior 前端工程師，都需要對框架有一定的掌握度。
網路上，有許多的框架教學；而主流的三大框架，更有詳細的官方資源與社群，讓學習者能自學。
如果你是處於使用原生 JS 或是 jQuery 來開發單一頁面活動頁的前端開發者，或許可以先考慮對程式架構進行更深入的琢磨，多去了解 JavaScript 撰寫上的一些 Design Patterns。畢竟框架本身也是原生 JavaScript 建立起來的，了解它的運作原理與架構，就能夠輕易地在框架中撰寫程式。
當經驗慢慢充足後，你可能會開始學習各種框架。而不同的框架都會有「共同的技術點」，只要能掌握，就能夠「更有框架地學習框架」。同時，你也更能對不同框架進行優缺點評判，並能針對專案規模來選用不同框架。
以下提供幾個框架的技術節點做為範例：
- 路由機制（Router）
- 如何建立組件（Component）
- 組件的生命週期（Lifecycle）
- 組件狀態的建立（State）
- 事件綁定的方法（Event Binding）
- 跨組件的狀態溝通（Emit, Redux, RxJS, MobX 等）
- 直接操作 DOM 的方法（Refs）
學習建議：深耕一個框架
框架的選用有很多種，但不外乎 Angular, React, Vue 三大框架。它們歷經了一段時間的考驗，並且有一定的社群討論度，並且有完整的官方文件資源供你挖掘。
然而，不管選擇哪一種框架都好！重點是要深耕。這並不是因應職場的需求建議，而是深耕能讓你夠體會前端開發上的各種匠心磨練，每個介面的狀態控制、生命週期、資料流，都是需要慢慢內化的。
往後，再遇到任何需求時，都能快速想到在框架上要如何架構與實踐，即表示你對該框架有一定的掌握程度囉！
