Ember 入門

Ember 簡介

Ember 是一個元件-服務框架，專注於整體的 Web 應用程式開發體驗，最大限度地減少應用程式之間瑣碎的差異——同時作為原生 JavaScript 之上現代且輕量的一層。Ember 還具有巨大的向後和向前相容性，幫助企業及時更新到最新版本的 Ember 和最新的社群驅動的約定。

成為一個元件-服務框架意味著什麼？元件是行為、樣式和標記的獨立捆綁，類似於其他前端框架（如 React、Vue 和 Angular）提供的內容。服務側提供長壽命的共享狀態、行為以及與其他庫或系統整合的介面。例如，路由器（本教程稍後會提到）就是一個服務。元件和服務構成了大多數 EmberJS 應用程式。

用例

通常，EmberJS 適用於構建具有以下一個或兩個特性的應用程式：

• 單頁應用程式，包括類原生 Web 應用程式和漸進式 Web 應用程式 (PWA)

  • 當 Ember 構成應用程式的整個前端時，它的表現最佳。

• 提高多個團隊技術棧的凝聚力

  • 社群支援的“最佳實踐”可加快長期的開發速度。
  • Ember 具有明確的約定，有助於強制執行一致性並幫助團隊成員快速上手。

Ember 與外掛

EmberJS 具有外掛架構，這意味著可以安裝外掛並在無需太多配置的情況下提供額外的功能。

示例包括

• PREmber：用於部落格或營銷內容的靜態網站渲染。
• empress-blog：使用 markdown 編寫部落格文章，並透過 PREmber 最佳化 SEO。
• ember-service-worker：配置 PWA，使應用程式可以像裝置各自的應用商店中的應用程式一樣安裝在移動裝置上。

理念

EmberJS 是現有的最具有“主見”（opinionated）的前端框架之一。但是，有主見意味著什麼呢？在 Ember 中，主見是一系列約定，透過學習這些約定，可以提高開發人員的效率。隨著約定的定義和共享，支援這些主見的約定有助於減少應用程式之間的瑣碎差異——這是所有有主見的框架（無論何種語言和生態系統）的共同目標。開發人員可以更容易地在專案和應用程式之間切換，而無需完全重新學習架構、模式、約定等。

在完成本系列教程時，您會注意到 Ember 的“主見”——例如元件檔案的嚴格命名約定。

Ember 與原生 JavaScript 的關係

Ember 基於 JavaScript 技術構建，是傳統面向物件程式設計之上的薄層，同時仍允許開發人員利用函數語言程式設計技術。

Ember 主要使用兩種語法

• JavaScript（或可選地，TypeScript）
• Ember 自己的模板語言，它大致基於Handlebars。

模板語言用於進行構建和執行時最佳化，否則這些最佳化是不可能實現的。最重要的是，它是 HTML 的超集——這意味著任何瞭解 HTML 的人都可以對任何 Ember 專案做出有意義的貢獻，而無需擔心破壞程式碼。設計師和其他非開發人員可以在不瞭解 JavaScript 的情況下為頁面模板做出貢獻，並且可以稍後新增互動性。

這種語言還允許更輕的資產負載，因為模板被*編譯*成“位元組碼”，可以比 JavaScript 解析得更快。**Glimmer VM** 實現了極快的 DOM 更改跟蹤，而無需管理和比較快取的虛擬表示（這是減輕 DOM 更改緩慢 I/O 的常用方法）。

有關 Glimmer VM 技術方面的更多資訊，GitHub 儲存庫有一些文件——特別是，參考和驗證器可能會引起您的興趣。

Ember 中的其他一切都*只是* JavaScript。特別是 JavaScript 類。這是大多數“框架”部分發揮作用的地方，因為有超類，其中每種*事物*在您的專案中都有不同的目的和不同的預期位置。

這裡有一個演示 Ember 對典型專案中 JavaScript 的影響：Gavin 演示了不到 20% 的 JavaScript 程式碼是 Ember 特有的。

入門

您在此處找到的其餘 Ember 材料包含一個多部分教程，其中我們將製作經典 TodoMVC 示例應用程式的一個版本，在此過程中教您如何使用 Ember 框架的基本要素。TodoMVC 是一個用許多不同技術實現的簡單待辦事項跟蹤應用程式。

這是已完成的 Ember 版本，供參考。

關於 TodoMVC 和可訪問性的注意事項

TodoMVC 專案在遵守可訪問/預設 Web 實踐方面存在一些問題。在 TodoMVC 系列專案中，有一些關於此的 GitHub 問題是開放的：

• 為演示新增鍵盤訪問
• 重新啟用可聚焦元素的輪廓

Ember 堅定致力於預設情況下是可訪問的，並且在Ember 指南中有一個關於可訪問性的完整部分，闡述了它對網站/應用程式設計意味著什麼。

也就是說，由於本教程側重於製作小型 Web 應用程式的 JavaScript 方面，TodoMVC 的價值在於提供預製的 CSS 和推薦的 HTML 結構，這消除了實現之間的小差異，從而更容易進行比較。在教程的後面，我們將重點為我們的應用程式新增程式碼以修復 TodoMVC 的一些最大缺陷。

安裝 Ember 工具

Ember 使用命令列介面 (CLI) 工具來構建和腳手架應用程式的各個部分。

1. 在安裝 ember-cli 之前，您需要安裝 node 和 npm。如果還沒有安裝，請點選此處瞭解如何安裝 node 和 npm。

2. 現在在您的終端中輸入以下內容以安裝 ember-cli

   bash

   npm install -g ember-cli
   

   這個工具在你的終端中提供了 `ember` 程式，它用於建立、構建、開發、測試和腳手架你的應用程式（執行 `ember --help` 可以檢視完整的命令列表及其選項）。

3. 要建立一個全新的應用程式，請在您的終端中輸入以下內容。這將在您當前所在的目錄中建立一個名為 todomvc 的新目錄，其中包含新 Ember 應用程式的腳手架。請確保在執行它之前導航到終端中適當的位置。（好的建議是您的“桌面”或“文件”目錄，這樣很容易找到）

   bash

   ember new todomvc
   

   或者，在 Windows 上

   bash

   npx ember-cli new todomvc
   

這會生成一個生產就緒的應用程式開發環境，預設包含以下功能：

• 帶有即時過載的開發伺服器。
• 外掛架構，允許第三方包豐富您的應用程式。
• 透過 Babel 和 webpack 整合支援最新的 JavaScript。
• 自動化測試環境，在瀏覽器中執行您的測試，讓您*像使用者一樣測試*。
• 針對生產構建，對 CSS 和 JavaScript 進行轉譯和壓縮。
• 用於最大程度減少應用程式之間差異的約定（允許更容易地進行心智上下文切換）。

準備構建我們的 Ember 專案

在繼續與您的全新專案互動之前，您需要一個程式碼編輯器。如果您還沒有配置好，The Ember Atlas 提供了一些關於如何設定各種編輯器的指南。

安裝 TodoMVC 專案的共享資產

安裝共享資產，正如我們接下來將要做的，通常不是新專案所需的步驟，但它允許我們使用現有的共享 CSS，因此我們無需猜測建立 TodoMVC 樣式所需的 CSS。

1. 首先，在終端中進入您的 `todomvc` 目錄，例如在 macOS/Linux 中使用 `cd todomvc`。

2. 現在執行以下命令，將公共的 todomvc CSS 放入您的應用程式中

   bash

   npm install --save-dev todomvc-app-css todomvc-common
   

3. 接下來，在 todomvc 目錄中找到 ember-cli-build.js 檔案（它就在根目錄下），並用您選擇的程式碼編輯器開啟它。ember-cli-build.js 負責配置專案構建的詳細資訊——包括將所有檔案捆綁在一起、資產最小化和建立源對映——並帶有合理的預設值，因此您通常無需擔心此檔案。

   但是，我們將在 `ember-cli-build.js` 檔案中新增行來匯入我們的共享 CSS 檔案，以便它們成為我們構建的一部分，而無需顯式地將它們`@import`到 `app.css` 檔案中（這需要在構建時進行 URL 重寫，因此效率較低且設定更復雜）。

4. 在 `ember-cli-build.js` 中，找到以下程式碼

   js

   let app = new EmberApp(defaults, {
     // Add options here
   });
   

5. 在其下方新增以下行，然後儲存檔案

   js

   app.import("node_modules/todomvc-common/base.css");
   app.import("node_modules/todomvc-app-css/index.css");
   

   有關 `ember-cli-build.js` 作用以及其他自定義構建/管道方式的更多資訊，Ember Guides 中有一頁關於外掛和依賴項。

6. 最後，找到位於 `app/styles/app.css` 的 `app.css`，並貼上以下內容

   css

   :focus,
   .view label:focus,
   .todo-list li .toggle:focus + label,
   .toggle-all:focus + label {
     /* !important needed because todomvc styles deliberately disable the outline */
     outline: #d86f95 solid !important;
   }
   

此 CSS 覆蓋了 `todomvc-app-css` npm 包提供的一些樣式，從而使鍵盤焦點可見。這在一定程度上修復了預設 TodoMVC 應用的主要可訪問性缺點之一。

啟動開發伺服器

在 `todomvc` 目錄下，您可以在終端中輸入以下命令以*開發*模式啟動應用程式：

ember server

這應該會給您一個類似於以下內容的輸出

Build successful (190ms) – Serving on https://:4200/

Slowest Nodes (totalTime >= 5%)          | Total (avg)
-----------------------------------------+-----------
BroccoliMergeTrees (17)                  | 35ms (2 ms)
Package /assets/vendor.js (1)            | 13ms
Concat: Vendor Styles/assets/vend... (1) | 12ms

開發伺服器在 `https://:4200` 啟動，您可以在瀏覽器中訪問它，檢視您目前的工作成果。

如果一切正常，您應該會看到如下頁面

總結

目前為止都很好。我們已經到了可以開始在 Ember 中構建我們的 TodoMVC 示例應用程式的程度。在下一篇文章中，我們將著手構建應用程式的標記結構，將其組織成一組邏輯元件。

• 概述：JavaScript 框架和庫
• 下一頁