开发SPA for AEM

单页应用程序 (SPA) 可以为网站用户提供引人入胜的良好体验。开发人员希望能够使用SPA框架构建站点，而作者则希望在AEM中为使用此类框架构建的站点无缝编辑内容。

本文介绍了在让前端开发人员开发SPA for AEM时应考虑的重要问题，并概述了AEM在AEM上部署SPA的架构。

SPA的AEM开发原则

在AEM上开发单页应用程序时，假定前端开发人员在创建SPA时遵循标准的最佳实践。 如果作为前端开发人员，您遵循这些一般最佳实践以及一些特定于AEM的原则，那么您的SPA将能够与AEM及其内容创作功能一起使用。

• 可移植性 - 与任何组件一样，组件应构建为尽可能便携。SPA应使用可移植且可重复使用的组件构建。
• AEM驱动站点结构 — 前端开发人员创建组件并拥有其内部结构，但依赖AEM来定义站点的内容结构。
• 动态渲染 — 所有渲染应为动态。
• 动态路由 - SPA负责路由，AEM会侦听该路由并基于该路由获取。任何路由都应是动态的。

在开发SPA时，如果您牢记这些原则，那么在启用所有受支持的AEM创作功能时，将尽可能灵活地进行未来验证。

如果您不需要支持AEM创作功能，则可能需要考虑其他SPA设计模型。

便携性

与开发任何组件一样，您的组件的设计方式应最大限度地提高其可移植性。 任何与组件的可移植性或可重用性相抵触的模式都应避免，以确保今后的兼容性、灵活性和可维护性。

生成的SPA应使用高度可移植和可重复使用的组件构建。

AEM驱动器站点结构

前端开发人员必须认为自己负责创建用于构建应用程序的SPA组件库。 前端显影器对组件的内部结构具有完全的控制。 但AEM始终拥有网站的结构。

这意味着前端开发人员可以在组件入口点之前或之后添加客户内容，还可以在组件内进行第三方调用。 但是，前端开发人员并不能完全控制组件的嵌套方式，例如。

动态渲染

SPA应仅依赖于内容的动态渲染。 这是AEM获取并呈现内容结构所有子项的默认期望值。

指向特定内容的任何显式渲染均被视为静态渲染，尽管受支持，但将与AEM内容创作功能不兼容。 这也违背了可移植性的原则。

动态路由

与渲染一样，所有路由也应是动态的。 在AEM中， SPA应始终拥有路由,AEM侦听路由并基于路由获取内容。

任何静态路由都与可移植性🔗的原则相抵触，并且由于与AEM的内容创作功能不兼容而限制了作者。 例如，使用静态路由时，如果内容作者想要更改路由或更改页面，则他/她将必须要求前端开发人员执行此操作。

AEM 项目原型

任何AEM项目都应使用AEM项目原型，它支持使用React或Angular的SPA项目并利用SPA SDK。

SPA设计模型

如果遵循在AEM🔗中开发SPA的原则，则您的SPA将能够与所有受支持的AEM内容创作功能一起使用。

但是，在有些情况下，这并非完全必要。 下表概述了各种设计模型、其优点和缺点。

将现有SPA迁移到AEM

通常，如果您的SPA遵循AEM的SPA开发原则，则SPA将在AEM中工作，并且可以使用AEM SPA编辑器进行编辑。

按照以下步骤操作，使现有SPA可以随时使用AEM。

1. 将JS组件设为模块化。

   使其能够按任意顺序、位置和大小呈现。

2. 使用我们的SDK提供的容器将您的组件放在屏幕上。

   AEM提供了一个页面和段落系统组件供您使用。

3. 为每个JS组件创建一个AEM组件。

   AEM组件定义对话框和JSON输出。

面向前端开发人员的说明

让前端开发人员为AEM创建SPA的主要任务是就组件及其JSON模型达成一致。

以下是前端开发人员在开发SPA for AEM时需要遵循的步骤概要。

1. 同意组件及其JSON模型

   前端开发人员和后端AEM开发人员需要就哪些组件是必需的以及模型达成一致，以便从SPA组件到后端组件之间实现一对一的匹配。

   AEM组件在提供编辑对话框和导出组件模型时仍然是必需的。

2. 在React组件中，通过this.props.cqModel

   在同意组件并且JSON模型到位后，前端开发人员可以免费开发SPA，只需通过this.props.cqModel访问JSON模型即可。

3. 实现组件的方 render() 法

   前端开发人员按照其认为合适的方式实施render()方法，并且可以使用cqModel属性的字段。 这会输出将插入页面的DOM和HTML片段。 这是在React中构建应用程序的标准方式。

4. 通过将组件映射到AEM资源类型MapTo()

   该映射存储组件类，并由提供的Container组件在内部使用，以基于给定的资源类型检索和动态实例化组件。

   它用作前端和后端之间的“胶水”，以便编辑器了解反应组件对应的组件。

   Page和ResponsiveGrid是扩展基Container的类的好示例。

5. 将组件的定义为 EditConfig 参数以MapTo()

   此参数对于告知编辑器组件在尚未渲染或没有要渲染的内容时应该如何命名。

6. 为页面和容 Container 器扩展提供的类

   页面和段落系统应扩展此类，以便委派给内部组件可以按预期工作。

7. 实施使用HTML5 API的路由解决 History 方案。

   启用ModelRouter后，调用pushState和replaceState函数将触发对PageModelManager的请求，以获取模型的缺失片段。

   ModelRouter的当前版本仅支持使用指向Sling模型入口点实际资源路径的URL。 它不支持使用虚URL或别名。

   可以禁用或配置ModelRouter以忽略正则表达式列表。

与AEM无关

这些代码块说明了您的React和Angular组件不需要任何特定于Adobe或AEM的内容。

• JavaScript组件内的所有内容都与AEM无关。
• 但是，AEM的特定功能是，JS组件必须通过MapTo帮助程序映射到AEM组件。

MapTo帮助程序是“胶水”，它允许后端组件和前端组件匹配在一起：

• 它可告知JS容器（或JS段落系统），JS组件负责渲染JSON中存在的每个组件。
• 它会向JS组件呈现的HTML中添加HTML数据属性，以便SPA编辑器知道在编辑组件时要向作者显示的对话框。

有关一般使用MapTo并构建SPA for AEM的更多信息，请参阅所选框架的快速入门指南。

• AEM - React中的SPA快速入门
• AEM SPA快速入门 — Angular

AEM架构和SPA

使用SPA时，AEM的常规架构（包括开发、创作和发布环境）不会发生更改。 但是，了解SPA开发如何融入此架构将会有所帮助。

• 构建环境

  这是签出SPA应用程序源和组件源的源位置。

  • NPM clientlib生成器从SPA项目创建客户端库。
  • 该库将由Maven获取，并由Maven Build插件以及组件一起部署到AEM Author。

• AEM Author

  内容是在AEM作者上创建的，包括创作SPA。

  在创作环境中使用SPA编辑器编辑SPA时：

  1. SPA请求外部HTML。
  2. 将加载CSS。
  3. 将加载SPA应用程序的Javascript。
  4. 执行SPA应用程序时，将请求JSON，从而允许应用程序构建页面的DOM，其中包括cq-data属性。
  5. 此cq-data属性允许编辑器加载其他页面信息，以便它知道组件可以使用哪些编辑配置。

• AEM 发布

  这是发布创作内容和编译的库(包括SPA应用程序对象、clientlib和组件)以供公众使用的地方。

• Dispatcher/CDN

  调度程序用作网站访客的AEM缓存层。

  • 处理请求的方式与在AEM作者中类似，但是没有对页面信息提出请求，因为只有编辑者才需要这样做。
  • Javascript、CSS、JSON和HTML已缓存，可优化页面以便快速交付。

后续步骤

有关AEM中简单SPA的结构方式及其工作方式的概述，请参阅React和Angular的快速入门指南。

有关创建您自己的SPA的分步指南，请参阅AEM SPA编辑器入门 — WKND事件教程。

有关动态模型到组件映射以及它如何在AEM的SPA中工作的更多详细信息，请参阅文章Dynamic Model to Component Mapping for SPA。

如果您希望在AEM中为React或Angular以外的框架实施SPA，或者只想深入了解SPA SDK for AEM的工作方式，请参阅SPA Blueprint文章。