In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features and how you can create editable SPAs using AEM’s SPA Editor framework, as well as integrate external SPAs, enabling editing capabilities as required.
At this point, you should have completed the entire AEM Headless Developer Journey and understand the basics of headless delivery in AEM including an understanding of:
So you have now either gone live with your first AEM Headless project or have all of the knowledge that is needed to do so. Congratulations!
So why are you reading this additional, optional continuation of the journey? Likely you recall that in the Getting Started we discussed briefly how AEM not only supports headless delivery and traditional full-stack models, but also can support hybrid models that combine the advantages of both. Although not the traditional headless model, such hybrid models can offer unprecedented flexibility to certain projects.
This article builds on your knowledge of AEM Headless by exploring in-depth how you can create your own single-page applications (SPAs) that are actually editable in AEM. In this way you can create content and delivery it headlessly to a SPA, but that SPA remains editable in AEM.
This document helps you understand how Single Page Applications are developed using the AEM SPA Editor framework. After reading this document you should:
There are a number of requirements before you begin working with SPAs in AEM.
This reduces the need for page refreshes and presents an experience to the user that is seamless, fast, and feels more like a native app experience.
The AEM SPA Editor allows front-end developers to create SPAs that can be integrated into an AEM site, allowing the content authors to edit the SPA content as easily as any other AEM content.
By being faster, fluid, and more like a native application, a SPA becomes a very attractive experience not only for the visitor of the webpage, but also for marketers and developers due to the nature of how SPAs work.
For a full description of SPAs and why you would use them, see the additional resources section for links to more in-dept documentation.
Developing single page applications on AEM assumes that the front-end developer observes standard best practices when creating an SPA. If as a front end developer you follow these general best practices as well as few AEM-specific principles, your SPA will be functional with AEM and its content-authoring capabilities.
For a full description of how AEM handles SPAs, see the additional resources section for links to more in-dept documentation.
Sites built using common SPA frameworks such as React and Angular load their content via dynamic JSON and do not provide the HTML structure that is necessary for the AEM Page Editor to be able to place edit controls.
To enable the editing of SPAs within AEM, a mapping between the JSON output of the SPA and the content model in the AEM repository is needed to save changes to the content.
SPA support in AEM introduces a thin JS layer that interacts with the SPA JS code when loaded in the Page Editor with which events can be sent and the location for the edit controls can be activated to allow in-context editing. This feature builds upon the Content Services API Endpoint concept since the content from the SPA needs to be loaded via Content Services.
For a full description of the AEM SPA Editor, see the additional resources section for links to more in-dept documentation.
If you have an existing SPA, AEM supports embedding it into AEM so it is visible to your content authors in the AEM editor. This can be very useful to view the content they are creating via Content Fragments in context of the end application where it will be consumed.
Additionally, with only small changes, you can enable certain editing ability to the external SPA within the AEM editor.
The RemotePage component allows rendering of an external SPA in AEM.
For a full description of how to make an external SPA editable in AEM, see the additional resources section for links to more in-dept documentation.
To gets started developing your own SPAs for AEM, review the following documents:
If you need to adapt an existing SPA to use it in AEM, review the following documents:
See below for additional resources that can take you deeper into SPA topics in AEM.
The following are some additional resources that do a deeper dive on some concepts mentioned in this document.