JavaScript 框架在前端開發佔有重要的地位:它能讓前端工程師透過千錘百鍊的工具,建立擴展性高、互動性強的網路程式。多數公司也視 JavaScript 框架為重要的前端工具。因此多數前端工程師,會需要擁有前端框架的技能。
身為一位富有抱負的前端工程師,學習前端框架時,可能很難確定要從哪裡開始:五花八門的框架可供選擇、隨時還有新的框架出現。儘管大多數框架用途類似,但實作方法千變萬化。而在使用框架時,也需要考慮無數情形。
在這裡,我們旨在理解前端框架方面,提供舒適的學習曲線:我們不會詳細說明 React/ReactDOM 或 Vue 亦或其他特定框架的資訊。框架開發團隊早就針對這方面,寫出了詳細的文件。相反地,我們想先著重回答更基本的問題:
- 為什麼要用框架?它能解決什麼問題?
- 選用框架時要考慮哪些問題?或甚至,我需要框架嗎?
- 框架擁有什麼功能?一般來說他們怎麼作動,或實作方面有哪些不同?
- 這些框架與「Vanilla JavaScript」(譯註:Vanilla JavaScript 是指原生 JavaScript)或 HTML 有什麼關係?
之後,我們將針對坊間主要框架提供教學,以便提供足夠鑽研下去的背景資訊。我們希望以務實且不忘基本實做(如無障礙)的方法,來理解框架這回事。
先決條件
在理解前端框架前,你需要對 web 核心技術:HTML、CSS、以及最重要的JavaScript,擁有基本程度的理解。
如果理解構建框架的 Web 技術,你的程式會更豐富(richer)且更專業,同時也能更有信心地除錯。
概觀性教學
- 1. 前端框架介紹
- 我們從整體概述來探討框架、提供 JavaScript 與框架的簡要歷史、框架存在的理由、他們提供什麼東西、如何決定選擇哪個框架、以及前端框架的的替代方案。
- 2. 框架的主要功能
- 大多數主要的 JavaScript 前端框架在更動 DOM、處理瀏覽器事件、還有提供良好的開發體驗方面,使出了不同的方法。這篇文章將探討「四大框架」的主要功能、看看他們如完成高層次工作、以及這四個框架的相異之處。
React 教學
注:最近一次測試成功的 React 教學在 2020 年五月。版本為 React/ReactDOM 16.13.1 與 create-react-app 3.4.1。
如果想看看最新的程式,可以從我們的 todo-react repository 或互動性的 https://mdn.github.io/todo-react-build/ 看。
- 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 教學
注:最近一次測試成功的 Ember 教學在 2020 年五月。版本為 Ember/Ember CLI 3.18.0。
如果想看看最新的程式,可以從我們的 ember-todomvc-tutorial repository 或互動性的 https://nullvoxpopuli.github.io/ember-todomvc-tutorial/ 看。注意:部分功能沒有放在教學裡面。
- 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 教學
注:最近一次測試成功的 Vue 教學在 2020 年五月。版本為 Vue 2.6.11。
如果想看看最新的程式,可以從我們的 todo-vue repository 或互動性的 https://mdn.github.io/todo-vue/dist/ 看。
- 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 與我們聯繫。