當你透過頁面的手指點擊滑鼠，進到這篇文章的這一瞬間，其實你已經完成了幾十年來網頁開發整個歷史洪流精鍊下，始終不變的終極目標 -「資訊傳播」。從每個滾動、點擊、拖曳的動作，到視覺上生動的圖表陳列、炫砲的動畫特效、優雅的 RWD 適性版型等，都是前端工程師所專注的程式美學。
是的，其實不太喜歡將前端工程師定調得太工程，畢竟網頁前端工程師的責任，就是要同時掌握頁面程式效能與頁面美感實現，甚至有時還隱含著理解使用者體驗的成分在其中。
從外部看來，前端工程師要能夠理解並優化客戶端在頁面操作上的使用體驗，並且要能掌握對畫面與資料流之間的拆解與聚合能力；而從內部看來，網頁前端工程師除了需要對頁面的流程、動態、資料狀態進行掌握外，更需要盡其所能地精通自由又奔放（你懂的）、任性又強大的 JavaScript，讓資料與畫面能夠美美地呈現在你那閃耀雙眸！
沒錯！這篇文章會點出過去到現在，前端 JavaScript 開發上的一些進程脈絡，並帶領各位理解現今網頁開發中很常聽到的「框架」概念；以及我們該如何看待各式前端框架的蓬勃發展？框架真有如聖經般那麼重要嗎？
有無框架，有什麼差？
我們可以用生活化的方式，來簡單瞭解框架的概念。
- 高速公路這個框架，讓你省去理解各種大街小巷的舟車勞頓，而從台北順利地開車到高雄；
- 汽車這個框架，讓你可以讓你不懂機械原理，卻能透過你熟悉的操作方法，載著你安全地快速移動！
- 街上紅綠燈這個框架，讓妳可以減少交通上你不讓我、我不讓你的困擾，安安全全地從甲地到乙地。
在「生活中的框架」的輔助之下，我們可以不需要煩惱、處理生活上的各種麻煩，並且夠過理解使用上述這些框架的方法與守則，達成生活上的目標。
傳統前端的麻煩點
我們可以將上述這些「麻煩點」，投射到傳統的前端開發上。
若我們需要在頁面上透過原生的 JavaScript 來繪製一個簡單的清單到畫面上時，程式碼可能會是如下：
<p>CODE:https://gist.github.com/wjyflh/7cc9c6d7e2e6a1612c1b18e89bd499cf.js</p>
從上述的程式碼可以看到，我們會先撰寫一定的程式架構(Design Pattern)，並且做許多節點的宣告與定義。同時，還需要自行在清單的 forEach 邏輯中去綁定事件（addEventListener），也需要將資料與畫面的渲染做綁定，最終繪製出清單。
上述的程式碼，可以看成是一個簡易的傳統框架寫法。這樣的框架概念是不嚴謹、強烈客製化的。所以，可能會因為工程師或公司團隊的不同，而撰寫出不同的框架架構。又因為是原生的 JavaScript 撰寫，也可能會有許多效能、瀏覽器支援度等等的問題發生……
框架的出現
如果我們將上述的需求改用框架來實現，以 React 框架為例，程式碼可能會是如下：
<p>CODE:https://gist.github.com/wjyflh/00634b8d724233d5a841f051597a9a8e.js</p>
你是否已經清楚地看到框架的簡潔魅力？！從程式碼中你可以很清楚的看到資料的初始化，到後續的清單渲染脈絡。
其中「資料」與「畫面」可以透過框架的寫法清楚地被切割開來，並且透過框架的生命週期來自動帶動畫面的更新渲染。我們只需要在適當的時機點去對資料進行操作（useEffect），就能獲得對應的清單結果畫面！
因為框架有一定的撰寫手法，所以易讀性與維護性就能獲得保障！
正是因為框架有這樣的優勢，前端世界的強者們紛紛提出許多具有制度化的「框架」來加速開發，並針對許多開發上的困難點進行整合。很多大型公司也紛紛將這些框架開源出來，讓廣大的前端鄉民們共同維護與使用；而好的框架就會被慢慢推崇、傳播，成了現今大家常聽到的 React、Vue、Angular 等前端框架的崛起。
框架是什麼？
上面提到的這些「麻煩」，其實就是框架這個概念所關注的事情：
框架，會在框架的程式底層，去優化、封裝處理網頁開發上常碰到的的一些底層問題。也在這基礎上，提出一系列建構網頁的程式撰寫規範與方法，同時讓在使用框架的程式方法時，兼顧擴展性與維護性。
你可能會想說，那這跟套件有什麼差別？沒錯！其實他們都是用原生的 JS 所構建起來，但是框架要解決的「問題格局」比套件大得多，它是一個更系統性、統包地解決前端程式問題上的一個概念。這就是框架最大的貢獻之處！
身為前端，如果有稍微看過各大框架的 Getting Started 文件（例：最新的 React 文件 Beta 版釋出），一定會看到框架會針對許多前端開發上的困難點，提出一套它們各自規定的撰寫規則。
只要照著這些規則撰寫頁面組件，前端開發者們便可以避開各種底層的支援度、或是效能問題，開發時間也能縮短許多（如下圖圖 1 所示）。
反之，如果你到 lodash 套件的官網上，你不會看到「如何寫出一個好網頁架構」的文件。因爲它的層級不到框架，只會關注在資料處理的局部面向上給予方法。
使用框架的好處
框架提升開發品質和拓展性
前端工程師使用了框架，會感受到框架提升所了開發品質。這個提升感，可從以下幾件開發體感來探討：
- 許多普遍的前端底層程式問題，其實開發中不希望遇到。框架的出現，讓我們不再煩惱。能減少犯錯機率，提升程式碼可靠性；也能在前端程式的撰寫，更關注與聚焦在更重要的、如建立商業邏輯上。
- 框架通常會有組件化的概念。這讓 UI 與程式的商業邏輯可以拆分、簡化，甚至被共用。因此，網頁的擴展性也能提升。
- 畫面組件的概念，通常伴隨著組件的生命週期（Lifecycle）。這些生命週期提醒我們，在介面控制上，需要理解其其中的階段，並在適當的階段對組件做適當的操作（如下圖 2 所示）。就像你需要在適當的人生階段做對的事情一樣，你不會在你一歲的時候出去賺錢養家，而是好好長大。
框架是規範：有共同語彙，就好維護
- 以前我們是先有資料，才會實作畫面。而框架則是透過組件的概念，將資料與介面抽離開來，我們可以在組件中同時定義組件的 Template (HTML) 與處理資料的變化，更容易控制介面的顯示。
- 前端框架像是工程師「撰寫程式」上公認的「語彙」或「方法」，就像是一個規範。當工程師都照著這樣的規範來寫程式，便能夠在規範上做更高層次的程式優化。因為大家的語彙相同，就能避免在過去工程師需要重新理解客製化框架的困擾，因而提升維護性。
- 框架讓更大的平台服務架構（SPA）能輕易地實現。通常框架會有完整的路由管理機制，讓各種頁面可以更輕易地被帶動、溝通。
開源世界中，框架演進與開發者分享的正向循環
而站在一個網際網路的角度上，其實框架的出現也提醒了我們一些外在現象的變化：
- 科技始終來自於人性，有了需求才會促使科技進步。現今人們對網路平台服務的依賴性更高，框架的概念才能因此會被推崇、被看重。
- 單看前端三大框架 React、Vue、Angular 的演進脈絡，他們都是建立在開源的社群中不斷被推廣與優化。這體現了開源精神，更是網際網路「分享」概念的延伸，也因為分享而讓前端技術不斷強大。
- 框架可能會引用其他套件進入他的生態圈。只要框架的生態完整、活躍，各界開發者也會因此願意為他們所開發的套件，提供對應的框架支援。而前端開發者們也會因為框架而受惠，能達成的技術需求更無可限量，產生一個在開發框架化與開發者間的正向循環。
- 前端框架也因為主流框架的帶動，讓更多新穎的框架被創造出來（如：Svelte）。框架因而百花齊放，框架與框架之間也會針對彼此的優點，進行繼承或優化；或針對痛點，賦予創新的開發思維。前端在框架的選擇上更多元而不受限，並能因應不同的需求情境、開發環境、開發規模，來選擇適當的框架，解決前端開發上的困擾。
怎麼學習框架？為什麼選 React？
學習路徑：從熟悉 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 三大框架。它們歷經了一段時間的考驗，並且有一定的社群討論度，並且有完整的官方文件資源供你挖掘。
然而，不管選擇哪一種框架都好！重點是要深耕。這並不是因應職場的需求建議，而是深耕能讓你夠體會前端開發上的各種匠心磨練，每個介面的狀態控制、生命週期、資料流，都是需要慢慢內化的。
往後，再遇到任何需求時，都能快速想到在框架上要如何架構與實踐，即表示你對該框架有一定的掌握程度囉！
我為什麼選擇 React？
我選擇框架的考量點，多偏向框架程式撰寫上的直覺度與體驗度。以下就以我個人深耕的 React 框架，列出 10 個優點：
- 每個組件都是以 Function 為基礎來建立，跟 JavaScript 的語彙相近，有親切感：
<p>CODE:https://gist.github.com/wjyflh/9ae1ff7513b46987e573bd3466550418.js</p>
- 如果你不喜歡 Functional 的概念，沒關係！你可以改回使用 Class component 來開發，有一定的撰寫自由度。
- React Hooks 的出現，讓組建的狀態控制、Lifecycle 的控制更新更純粹、更簡單 。 整體開發的感覺沒有太多的花式規則，開發體驗上是一種自由又不失專注、乾淨利落的感覺。
<p>CODE:https://gist.github.com/wjyflh/f684c298b1ca6b2a569d508e261220fb.js</p>
- 除了官方提供的幾個 Hooks 功能外，React 還可以讓你開發客製化的 Custom Hooks，可以將組件中較為複雜的、重複性的邏輯做 Custom Hooks 的封裝。而當需要使用到的組件，就可以直接引入使用。因此，在組件的生命週期管理上會更有系統性，對商業邏輯管理的可控性更高！
- styled-components 可以快速在 React 中引用，讓不同的 HTML 層級可以被命名與復用。這能使 CSS 的優先級問題獲得解決， HTML 結構也更為乾淨！而且，styled-components 的標籤也可以與組件中的變數邏輯做綁定，進而讓樣式可以被連動與切換唷！
<p>CODE:https://gist.github.com/wjyflh/ca4baca65bd250cd521de59b69b3b5b2.js</p>
- 相較其他框架，React 在組件中的 HTML/JS/CSS 的區塊切割感相對不強烈，所有的東西都可以被歸納為 JS 的 變數或是函式。所以在閱讀 React 組件的程式時，很像在閱讀原生的 JS 程式，由上而下地，脈絡很清楚。當然囉！這也比較偏向個人的感官問題，提供給各位參考。
- 站在 SEO 角度，有衍生框架 Next.js 來支撐，降低過去要 SPA 才能實現的後端選染頁面（SSR）的複雜度；並且，也框架化，更能與原本前端渲染頁面（CSR）的機制有好的資料串連能力。
- React 相關的套件資源非常大，各種前端疑難雜症基本上都有神人寫出套件讓 React 開發者使用。例如 Redux 對於 React 有很完整的支援，是 React 在跨組件溝通上一個很好的實現工具。當然，React 還有很多狀態管理工具可以選用，任君挑選。
- 近期 React 文件也做了 Beta 版的更新，對於 React 框架社群的推廣或是開發者的使用體驗上，打了一個很強的 We do care 強心針 。
- React 持續維護與更新，並且每次更新都有一定的向下支援度，讓舊專案的維護不會有太大的隱憂。
結語
「框架」其實不是什麼新語彙，早在程式語言出來的時候就有這樣的概念。
現今平台服務的需求，越來越龐大、邏輯複雜、與需要架構模組化。套件已不足以支撐開發需求，而且也需要更高層次的概念，來整合程式碼與各種套件。同時，也提出撰寫規範的需求，使得前端開發在「框架的使用」上，變成一個既定的技能基礎與技能貼標。
身為前端的我們，也需要跳脫過往的一頁 JS 寫到底的線性思維，躍升到多維的框架概念上來解決世間更多（險）元（惡）的前端需求。
科技始終來自於人性，沒有需求背景的改變，就不會有現今框架存在的意義。而我們，也需要透過框架，來站上巨人的肩膀，去簡化問題、討論、解決更深一層的問題！
