为 AEM 开发 SPA

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

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

AEM的SPA开发原则

在 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，并且只需通过访问JSON模型即可 this.props.cqModel.

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

   前端开发人员实施 render() 方法，因为它们认为适合，并且可以使用 cqModel 属性。 此方法输出插入到页面中的DOM和HTML片段。 此方法也是在React中构建应用程序的标准方法。

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

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

   此图用作前端和后端之间的“粘合剂”，以便编辑器知道react组件对应于哪些组件。

   此 Page 和 ResponsiveGrid 是扩展基类的良好示例 Container.

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

   此参数是告诉编辑器如何在尚未渲染或没有要渲染的内容时命名组件所必需的。

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

   页面和段落系统应该扩展此类，以便委派到内部组件的操作可以按预期进行。

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

   当 ModelRouter 已启用，调用 pushState 和 replaceState 函数会触发对 PageModelManager 以获取模型的缺失片段。

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

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

与AEM无关

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

• JavaScript组件中的所有内容都与AEM无关。
• 但是，特定于AEM的是，必须使用MapTo帮助程序将JS组件映射到AEM组件。

此 MapTo helper是使后端和前端组件匹配在一起的“粘合剂”：

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

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

• 利用 React 在 AEM 中开始使用 SPA
• 利用 Angular 在 AEM 中开始使用 SPA

AEM架构和SPA

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

• 构建环境

  在此环境中，将签出SPA应用程序和组件源的源。

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

• 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应用程序工件、客户端库和组件)以供公众使用。

• Dispatcher / CDN

  Dispatcher用作网站访客的AEM缓存层。

  • 处理请求的方式与它们在AEM创作中的方式类似。 但是，不会请求页面信息，因为只有编辑器需要它。
  • 缓存JavaScript、CSS、JSON和HTML，优化页面以实现快速交付。

后续步骤

• 使用 React 在 AEM 中开始使用 SPA 说明了如何使用 React 构建基本 SPA 以与 AEM 中的 SPA 编辑器结合使用.
• 使用 Angular 在 AEM 中开始使用 SPA 说明了如何使用 Angular 构建基本 SPA 以与 AEM 中的 SPA 编辑器结合使用.
• SPA 编辑器概述更深入地介绍了 AEM 和 SPA 之间的通信模型。
• WKND SPA项目 是一个分步教程，用于在AEM中实施简单的SPA项目。
• SPA的动态模型到组件映射 说明动态模型到组件的映射以及它在AEM中的SPA中的工作方式。
• SPA Blueprint 让您深入了解SPA SDK for AEM的工作原理，以防您希望在AEM中为React或Angular以外的框架实施SPA。 或者，你只是想更深入地了解一下。