Back

Ember.js 入门指南

OpenReplay Team OpenReplay Team

Jan 13, 2026 · 2 min read

Ember.js 入门指南

如果你使用 React、Vue 或 Angular 构建过应用程序,你就会理解基于组件的架构和现代 JavaScript 工具链。但你可能会想:Ember.js 在 2026 年能提供什么?为什么像 LinkedIn 和 Apple Music 这样的公司仍然依赖它?

Ember.js 是一个成熟的、有主见的框架,它优先考虑稳定性、强约定和大规模应用程序的开发者生产力。本文介绍了现代 Ember 框架如今的工作方式,以及当前生态系统中新项目的样子。

核心要点

  • Ember.js 是一个组件-服务框架,强调约定优于配置,使团队之间能够保持一致的项目结构。
  • 现代 Ember 使用 Embroider 构建系统,并支持 Vite 作为现代构建选项,提供快速的开发构建、tree-shaking 和优化的生产输出。
  • Glimmer 组件配合 tracked 状态提供轻量级、响应式的 UI 开发,遵循”数据向下,操作向上”的模式。
  • 使用 .gjs 和 .gts 格式的单文件组件可以将模板和后端类组合在一起,减少样板代码,并在现代项目中越来越多地被采用。
  • Ember 最适合需要团队一致性和可预测架构的雄心勃勃的长期应用程序。

Ember 的独特之处

Ember 是一个组件-服务框架。组件处理 UI——标记、行为和样式的集合,类似于你从其他框架中了解的内容。服务提供长期存在的共享状态,并与外部系统集成。例如,路由器就是一个服务。

关键区别在于约定优于配置。每个 Ember 项目都遵循相同的结构。路由放在可预测的位置。组件位于你期望的地方。这种一致性意味着开发者可以在 Ember 代码库之间切换,而无需重新学习项目架构。

对于构建复杂、长期应用程序的团队来说,这种可预测性显著减少了入职时间和维护开销。

现代 Ember 工具链:Vite 和 Embroider 构建系统

新的 Ember 项目使用带有现代默认配置的 Ember CLI。Ember V2 应用格式(由新应用蓝图使用)代表当前标准,旨在与更广泛的 JavaScript 生态系统更好地兼容。

Embroider 构建系统现在是标准的构建管道。Embroider 支持适当的 tree-shaking、代码拆分以及与标准打包工具的集成。对于新项目,Vite 是一个受支持且越来越常见的构建选项,提供快速的开发构建和优化的生产输出。

创建新项目:

npm install -g ember-cli
ember new my-app --typescript

这会生成一个配置了 Embroider 的启用 TypeScript 的项目。--typescript 标志表明 TypeScript 得到官方支持,并在现代 Ember 开发中被广泛使用。

核心概念概览

Glimmer 组件

现代 Ember 专门使用 Glimmer 组件。这些组件轻量级,遵循”数据向下,操作向上”的模式,并使用 tracked 状态实现响应性。

import Component from '@glimmer/component';
import { tracked } from '@glimmer/tracking';
import { action } from '@ember/object';

export default class Counter extends Component {
  @tracked count = 0;

  @action
  increment() {
    this.count++;
  }
}

@tracked 装饰器标记在更改时应触发重新渲染的属性——类似于 Solid 中的 signals 或 Vue Composition API 中的响应式状态。

模板和 GJS/GTS

Ember 模板使用基于 Handlebars 的语法,通过 Glimmer VM 编译为优化的字节码。该框架正在向严格模式模板和使用 .gjs(JavaScript)和 .gts(TypeScript)格式的单文件组件发展。

这些单文件组件将模板和后端类组合在一个文件中,减少样板代码并实现更好的 tree-shaking。

路由

Ember 的路由器是内置的,处理嵌套路由、动态段和查询参数。路由可以定义 model 钩子在渲染之前加载数据:

import Route from '@ember/routing/route';
import { service } from '@ember/service';

export default class PostsRoute extends Route {
  @service store;

  model() {
    return this.store.findAll('post');
  }
}

数据层

EmberData (@ember-data) 为管理 API 数据、缓存和关系提供约定。它是可选的,但默认包含。对于 REST 或 JSON:API 后端,它显著减少了样板代码。

项目结构

典型的现代 Ember 项目以可预测的方式组织代码:

  • app/components/ — UI 组件
  • app/routes/ — 路由处理器
  • app/templates/ — 路由模板
  • app/services/ — 共享状态和逻辑
  • app/models/ — 数据模型(如果使用 Ember Data)

这种结构在项目之间保持一致,这是核心价值主张。

何时考虑使用 Ember

Ember 最适合需要团队一致性的雄心勃勃的长期应用程序。如果你正在构建仪表板、管理界面或具有多个开发者的复杂单页应用程序,这些约定会随着时间的推移带来回报。

对于营销网站或轻量级项目,像 Astro 这样的轻量级框架更有意义。

结论

官方 Ember 教程演示了如何构建完整的应用程序。Ember 指南深入介绍了每个概念。对于社区支持,Ember Discord 非常活跃且乐于助人。

现代 Ember 不是你多年前可能记得的那个框架。凭借 Vite、Embroider、TypeScript 支持和单文件组件,它在保持稳定性的同时不断演进,这使其对生产应用程序具有价值。

常见问题

Ember 优先考虑约定优于配置,这意味着关于项目结构的决策更少。React 和 Vue 提供更多灵活性,但需要团队建立自己的模式。对于从事长期应用程序的大型团队,Ember 的一致性减少了入职时间和维护成本。

不,Ember Data 是可选的。虽然它默认包含并且与 REST 或 JSON:API 后端配合良好,但你可以使用 fetch、axios 或任何其他数据获取方法。许多团队在使用 GraphQL 或非标准 API 时选择替代方案。

React 开发者会发现 Glimmer 组件很熟悉,因为两者都使用基于组件的架构。主要的调整涉及学习 Ember 的约定、路由系统和 Handlebars 模板语法。大多数有经验的 JavaScript 开发者在几周内就能提高生产力。

可以,TypeScript 在现代 Ember 中得到官方支持。新项目可以使用 --typescript 标志生成,框架为核心 API 提供类型定义。.gts 文件格式支持在单文件组件中使用 TypeScript。

Gain Debugging Superpowers

Unleash the power of session replay to reproduce bugs, track slowdowns and uncover frustrations in your app. Get complete visibility into your frontend with OpenReplay — the most advanced open-source session replay tool for developers. Check our GitHub repo and join the thousands of developers in our community.

OpenReplay

More articles from OpenReplay Blog