单页应用程序 (SPA) 可以为网站用户提供引人入胜的良好体验。开发人员希望能够使用 SPA 框架构建站点,而作者则希望能够在 AEM 中顺畅地为使用此类框架构建的站点编辑内容。
本文介绍了在让前端开发人员开发SPA for AEM时需要考虑的重要问题,并概述了有关在AEM上部署SPA的AEM的架构。
在 AEM 上开发单页应用程序时,假定前端开发人员在创建 SPA 时遵循标准最佳实践。如果您作为前端开发人员,遵循这些常规最佳实践和一些AEM特定原则,则您的SPA可以 AEM及其内容创作功能.
如果您在开发SPA时牢记这些原则,那么在启用所有受支持的AEM创作功能时,将尽可能地灵活且经得起未来考验。
如果您不需要支持AEM创作功能,请考虑其他 SPA设计模型.
与开发任何组件时一样,组件的设计应最大限度地提高可移植性。 应避免任何影响组件可移植性或可重用性的模式,以确保将来的兼容性、灵活性和可维护性。
生成的SPA应使用高度可移植和可重用的组件构建。
前端开发人员必须自视为负责创建用于构建应用程序的SPA组件库。 前端开发人员对组件的内部结构具有完全控制权。 但是,AEM始终拥有站点的结构.
此控制意味着前端开发人员可以在组件的入口点之前或之后添加客户内容,并且还可以在组件内进行第三方调用。 但是,前端开发人员无法完全控制组件的嵌套方式。
SPA应仅依赖于内容的动态渲染。 此预期是AEM获取并渲染内容结构的所有子项的默认设置。
任何指向特定内容的显式渲染都被视为静态渲染,尽管受支持,但与AEM内容创作功能兼容。 这也违反了 可移植性.
与渲染一样,所有路由也应是动态的。 在AEM中, SPA应始终拥有路由 并且AEM会侦听该视频并根据它获取内容。
任何静态路由都对 可移植性原理 和通过与AEM的内容创作功能不兼容来限制作者。 例如,对于静态路由,如果内容作者想要更改路由或更改页面,他们必须要求前端开发人员执行此操作。
任何 AEM 项目都应使用 AEM 项目原型,它支持使用 React 或 Angular 的 SPA 项目并利用 SPA SDK。
如果 在AEM中开发SPA的原则 之后,您的SPA即可使用所有受支持的AEM内容创作功能。
但是,在某些情况下,此功能并非完全必要。 下表概述了各种设计模型、其优点和缺点。
设计模型 |
优点 | 缺点 |
---|---|---|
AEM用作Headless CMS,而不使用 SPA编辑器SDK框架。 | 前端开发人员对应用程序拥有完全控制权。 | 内容作者无法使用AEM内容创作体验。 如果代码包含静态引用或路由,则该代码不可移植或重用。 不允许使用模板编辑器,因此前端开发人员必须通过JCR维护可编辑模板。 |
前端开发人员使用SPA Editor SDK框架,但只向内容作者打开某些区域。 | 开发人员通过仅启用在应用程序的受限制区域中创作,保持对应用程序的控制。 | 内容作者仅限于一组有限的AEM内容创作体验。 如果代码包含静态引用或路由,则代码存在不可移植或不可重用的风险。 不允许使用模板编辑器,因此前端开发人员必须通过JCR维护可编辑模板。 |
项目完全使用SPA编辑器SDK,前端组件开发为一个库,并且应用程序的内容结构委派给AEM。 | 该应用程序可重用和移植。 内容作者可以使用AEM内容创作体验编辑应用程序。 SPA与模板编辑器兼容。 |
开发人员无法控制应用程序的结构和委派给AEM的内容部分。 开发人员仍然可以为不应使用AEM创作的内容保留应用程序的区域。 |
虽然AEM支持所有模型,但仅通过实施第三种(并遵循建议的 SPA开发原则)是能够在AEM中与SPA内容交互并进行编辑的内容作者。
一般情况下,如果您的SPA遵循 AEM的SPA开发原则,则您的SPA将在AEM中工作,并且可以使用AEM SPA编辑器进行编辑。
请按照以下步骤操作,以使您现有的SPA准备好使用AEM。
让前端开发人员为AEM创建SPA的主要任务是就组件及其JSON模型达成一致。
以下概述了前端开发人员在开发SPA for AEM时必须执行的步骤。
就组件及其JSON模型达成一致
前端开发人员和后端AEM开发人员必须就所需的组件和模型达成一致,以便从SPA组件到后端组件进行一对一的匹配。
AEM组件仍然主要用于提供“编辑”对话框和导出组件模型。
在React组件中,通过以下方式访问模型this.props.cqModel
在同意组件且JSON模型到位后,前端开发人员可以自由开发SPA,并且只需通过访问JSON模型即可 this.props.cqModel
.
实施组件的 render()
方法
前端开发人员实施 render()
方法,因为它们认为适合,并且可以使用 cqModel
属性。 此方法输出插入到页面中的DOM和HTML片段。 此方法也是在React中构建应用程序的标准方法。
通过以下方式将组件映射到AEM资源类型MapTo()
映射存储组件类,并由提供的内部使用 Container
组件,用于根据给定的资源类型检索并动态实例化组件。
此图用作前端和后端之间的“粘合剂”,以便编辑器知道react组件对应于哪些组件。
此 Page
和 ResponsiveGrid
是扩展基类的良好示例 Container
.
定义组件的 EditConfig
作为参数MapTo()
此参数是告诉编辑器如何在尚未渲染或没有要渲染的内容时命名组件所必需的。
扩展提供的 Container
页面和容器的类
页面和段落系统应该扩展此类,以便委派到内部组件的操作可以按预期进行。
实施使用HTML的路由解决方案5 History
API。
当 ModelRouter
已启用,调用 pushState
和 replaceState
函数会触发对 PageModelManager
以获取模型的缺失片段。
当前版本的 ModelRouter
仅支持使用指向Sling模型入口点的实际资源路径的URL。 它不支持使用虚URL或别名。
此 ModelRouter
可以禁用或配置为忽略正则表达式的列表。
这些代码块说明了您的React和Angular组件如何不需要特定于Adobe或AEM的内容。
此 MapTo
helper是使后端和前端组件匹配在一起的“粘合剂”:
有关使用的更多信息 MapTo
以及构建SPA for AEM的一般信息,请参阅所选框架的《快速入门》指南。
AEM的常规架构(包括开发、创作和发布环境)在使用SPA时不会发生更改。 但是,了解SPA开发如何适应此架构很有帮助。
构建环境
在此环境中,将签出SPA应用程序和组件源的源。
AEM Author
在AEM创作实例上创建内容,包括创作SPA。
在创作环境中使用SPA编辑器编辑SPA时:
cq-data
属性。cq-data
属性允许编辑器加载其他页面信息,以便了解哪些编辑配置可用于组件。AEM 发布
在此处发布创作内容和编译的库(包括SPA应用程序工件、客户端库和组件)以供公众使用。
Dispatcher / CDN
Dispatcher用作网站访客的AEM缓存层。
在AEM内部,无需执行JavaScript构建机制或执行JavaScript本身。 AEM仅托管来自SPA应用程序的编译工件。