理解 JavaScript 前端框架

JavaScript 框架在前端開發佔有重要的地位：它能讓前端工程師透過千錘百鍊的工具，建立擴展性高、互動性強的網路程式。多數公司也視 JavaScript 框架為重要的前端工具。因此多數前端工程師，會需要擁有前端框架的技能。

身為一位富有抱負的前端工程師，學習前端框架時，可能很難確定要從哪裡開始：五花八門的框架可供選擇、隨時還有新的框架出現。儘管大多數框架用途類似，但實作方法千變萬化。而在使用框架時，也需要考慮無數情形。

在這裡，我們旨在理解前端框架方面，提供舒適的學習曲線：我們不會詳細說明 React/ReactDOM 或 Vue 亦或其他特定框架的資訊。框架開發團隊早就針對這方面，寫出了詳細的文件。相反地，我們想先著重回答更基本的問題：

• 為什麼要用框架？它能解決什麼問題？
• 選用框架時要考慮哪些問題？或甚至，我需要框架嗎？
• 框架擁有什麼功能？一般來說他們怎麼作動，或實作方面有哪些不同？
• 這些框架與「Vanilla JavaScript」（譯註：Vanilla JavaScript 是指原生 JavaScript）或 HTML 有什麼關係？

之後，我們將針對坊間主要框架提供教學，以便提供足夠鑽研下去的背景資訊。我們希望以務實且不忘基本實做（如無障礙）的方法，來理解框架這回事。

從「前端框架簡介」開始吧。

先決條件

在理解前端框架前，你需要對 web 核心技術：HTML、CSS、以及最重要的JavaScript，擁有基本程度的理解。

如果理解構建框架的 Web 技術，你的程式會更豐富（richer）且更專業，同時也能更有信心地除錯。

概觀性教學

1. 前端框架介紹

我們從整體概述來探討框架、提供 JavaScript 與框架的簡要歷史、框架存在的理由、他們提供什麼東西、如何決定選擇哪個框架、以及前端框架的的替代方案。

2. 框架的主要功能

大多數主要的 JavaScript 前端框架在更動 DOM、處理瀏覽器事件、還有提供良好的開發體驗方面，使出了不同的方法。這篇文章將探討「四大框架」的主要功能、看看他們如完成高層次工作、以及這四個框架的相異之處。

React 教學

1. 開始學 React

在這裡我們將開始與 React 打招呼。我們將探索其背景和用途的一些細節、在自己的電腦建立 React 全家桶、還有建立與把玩簡單的程式，以理解 React 是怎麼跑的。

2. 建立我們的 React todo list

我們的任務是驗證 React 的概念（proof-of-concept）：我們將建立一個能讓使用者添加、編輯、刪除需要的工作，同時在不刪除工作的情況下，將它們標記為完成。本文將完成 App 組件的基本架構與樣式，以便為下個文章將探討的組件定義與響應性做準備。

3. 把 React app 組件化

現在，我們的 app 整個黏在一起了。在做其他事情前，最好把這個程式切成一個個能管理，描述性也好的組件（component）。React 本身對組件的定義不多：那是取決於你的考量！我們將展示如何以聰明的方法，把程式切成一個個組件。

4. 響應性 React：事件與狀態

在組件化以後，現在開始把原本靜態的 UI，能開始與我們實際互動，並修改資料吧。在這裡除了做這件事以外，我們還會深入探討事件和狀態。

5. 響應性 React：編輯、過濾、條件式過濾

在初學 React 之路即將結束前（至少從現在來說），我們將在 Todo list app 裡面，添加畫龍點睛的主要功能：包括編輯已存在的工作、透過給定條件過濾全部、已完成、或未完成的工作。我們將不斷探討條件式 UI 渲染。

6. React 無障礙

在教學最後，我們將削除最後的障礙：像是能增進可用性，同時降低鍵盤與螢幕報讀用戶困惑的 focus 管理。

7. React 的資源

最後的最後，我們將提供鑽研 React 所需的資源。

Ember 教學

1. 開始學 Ember

首先我們將探討 Ember 的原理與用途，還有如何安裝 Ember 全家桶，建立簡單的 app，最後還有完成開發環境。

2. Ember app 架構與組件

In this article we'll get right on with planning out the structure of our TodoMVC Ember app, adding in the HTML for it, and then breaking that HTML structure into components.

3. 響應性 Ember：事件、類別、狀態

此時，我們將開始給 app 添加一些響應性，從而能夠添加和顯示新的待辦事項。在此過程中，我們將研究如何在 Ember 中使用事件，創建組件類以包含用於控制交互功能的 JavaScript 程式，以及設置服務來跟踪應用程序的資料狀態。

4. 響應性 Ember：Footer 功能、條件式渲染

現在是時候開始處理我們應用程序中的 Footer 功能了。在這裡，我們將更新待辦事項計數器，以顯示仍需完成的正確待辦事項數量，並將樣式正確應用於已完成待辦事項（即已選中復選框的位置）。我們還將連接「清除完成」按鈕。在此過程中，我們將學習在模板中使用條件式渲染的知識。

5. Ember 的路由

在本文中，我們學習了路由，有時也稱為基於 URL 的過濾。我們將使用它為三個Todo視圖（「全部」、「活動」、「已完成」）中的每個視圖提供唯一的 URL。

6. Ember 的資源與除錯

最後的最後，我們將提供鑽研 Ember 所需的資源，以及好用的相關資訊。

Vue 教學

1. 開始學 Vue

我們首先來介紹 Vue 吧。首先我們將聊聊 Vue 的背景、理解如何安裝新的專案、研究專案的整體架構與單一組件、如何讓專案在自己的電腦執行、並準備好建立一個新範例。

2. 建立第一個 Vue 組件

現在來開始鑽研 Vue 並建立第一個組件吧：我們將給 todo list 的各個單元建立獨立的組件。在此同時，我們將學習一些重要概念：比如說在組件內使用組件、透過 prop 傳送資料、還有儲存資料的狀態。

3. 渲染 Vue 組件的列表

現在我們已經有了一個能動的組件；現在將要給我們的 App 添加 ToDoItem 這個組件了。在這裡，我們將專精於如何給 App.vue 組件，添加一組 todo 的資料，接著使用 v-for 指令（directive）讓 ToDoItem 透過迴圈顯示出來。

4. 寫一個 todo 表單：Vue 的事件、方法、model

我們已經放了一些資料，同時也透過迴圈把 ToDoItem 渲染出來了。接下來，我們將讓使用者輸入 todo 項目、同時需要文字 <input>、submit 之後的事件觸發、還有能控制資料的 model。這些就是我們會探討的重點。

5. 透過 CSS 樣式化 Vue 組件

我們的程式看起來終於要漂亮一點了。我們將探討如何透過 CSS 樣式化 Vue 組件。

6. 使用 Vue 的計算屬性

在這裡我們將使用 Vue 的計算（computed）屬性，加上一個 counter 已便顯示完成工作的數量。計算屬性的功能與 methods 類似，但它只會在資料更新時變動資料。

7. Vue 的條件式渲染：編輯已存在的待辦

現在來添加一個還沒探討到的重要功能吧：那就是編輯已經存在的項目。要完成這件事，我們將借用 Vue 在條件式渲染的長才——也就是 v-if 與 v-else——在現有 todo 項目視圖間切換，同時編輯能更新的視圖。我們還會探討如何添加刪除待辦的功能。

8. 重點管理 Vue ref

我們快講完 Vue 了。最後要看的功能是 focus 管理，或者換句話說，如何消除鍵盤用戶的障礙。我們會看看怎麼透過 Vue ref 完成這件事：這是一項能透過虛擬 DOM、或組件的內部 DOM 結構，直接訪問 DOM 節點的進階功能。

9. Vue 的資源

最後的最後，我們將提供鑽研 Vue 所需的資源，以及有用的資訊。

該選什麼框架？

我們在最初發布的文章集，主要介紹了 React/ReactDOM、Ember、Vue。之所以選中這三個框架是因為：

• 它們在一段時間內，依舊是最受歡迎的選擇：如同多數軟體工具一般，選擇持續開發中、不太可能下星期就棄掉、還有可能藉由這份技能來找工作的軟體，才是明智的選擇。
• 它們都擁有活躍的社群與良好的文件。在剛開始理解複雜的概念時，這方面至關重要。
• 我們不可能把所有的框架都寫進來。因為你沒辦法在前端日新月異的情況下即時更新。
• 初學者在選擇需要理解的概念方面，會是個蠻麻煩的問題。因此，盡可能精簡會對初學者的幫助很大。

先講一下：我們選什麼框架並不是因為他們最棒，而是因為我們認同他們：這些框架在較吻合以上的考量要點。

我們以本來希望在一開始包含更多框架，但最後決定先發布，之後再追加其它教學，而非延後。如果屬意的框架沒放進去、而你也想幫忙的話，來和我們聊聊吧！透過 Matrix、Discourse、或 mdn-admins list 與我們聯繫。