How to Create Single Page Applications (SPAs) with AEM
- Applies to:
- Experience Manager as a Cloud Service
CREATED FOR:
- Admin
- Developer
In this optional continuation of the AEM Headless Developer Journey, you learn how AEM can combine headless delivery with traditional full-stack CMS features. You also learn how you can create editable SPAs using AEM鈥檚 SPA Editor framework, and integrate external SPAs, enabling editing capabilities as required.
The Story So Far
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:
- The difference between headless and headful content delivery.
- AEM鈥檚 headless features.
- How to organize and AEM Headless project.
- How to create headless content in AEM.
- How to retrieve and update headless content in AEM.
- How to go live with an AEM Headless project.
Up to now, you have either gone live with your first AEM Headless project or have the knowledge that to do so. Congratulations!
So, why are you reading this additional, optional continuation of the journey? You recall that in the Getting Started, it was discussed how AEM not only supports headless delivery and traditional full-stack models, but supports 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 editable in AEM. In this way, you can create content and deliver it headlessly to a SPA, but that SPA remains editable in AEM.
Objective
This document helps you understand how Single Page Applications are developed using the AEM SPA Editor framework. After reading this document, you should:
- Understand the basic function of the SPA Editor.
- Know the requirements for building a fully editable SPA for AEM.
- Understand how external SPAs can be integrated into AEM.
- Understand how server-side rendering can or cannot be implemented.
Requirements and Prerequisites
There are several requirements before you begin working with SPAs in AEM.
Knowledge
- Development experience creating SPAs with React or Angular frameworks
- Basic AEM skills creating Content Fragments and using the editor
- Be sure to review the document Headful and Headless in AEM so you can understand the various levels of SPA integration possible.
Tools
- Sandbox access for testing deploying your project
- Local development instance for data modeling and testing
- Existing external SPA (optional, depending on what integration model is chosen)
- AEM Project Archetype
What is a SPA?
A single-page application (SPA) differs from a conventional page in that it is rendered client-side and is primarily JavaScript-driven, relying on Ajax calls to load data and dynamically update the page. Most, or all, content is retrieved once in a single page load with additional resources loaded asynchronously as needed, based on user interaction with the page.
This functionality 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.
Why a SPA?
By being faster, fluid, and more like a native application, a SPA becomes an attractive experience. It is good 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.
How AEM Handles SPAs
Developing single page applications on AEM assumes that the front-end developer observes standard best practices when creating an SPA. As a front-end developer, if you follow these general best practices and a few AEM-specific principles, your SPA becomes functional with AEM and its content-authoring capabilities.
- Portability - As with any components, the SPA components should be built to be as portable as possible. The SPA should be built with portably and reusable components.
- AEM Drives Site Structure - The front-end developer creates components and owns their internal structure, but relies on AEM to define the content structure of the site.
- Dynamic Rendering - All rendering should be dynamic.
- Dynamic Routing - The SPA is responsible for the routing and AEM listens to it and fetches based on it. Any routing should be dynamic as well.
For a full description of how AEM handles SPAs, see the additional resources section for links to more in-dept documentation.
The AEM SPA Editor
Sites built using common SPA frameworks, such as React and Angular, load their content by way of dynamic JSON. They 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 necessary so you can save changes to the content.
SPA support in AEM introduces a thin JavaScript layer that interacts with the SPA JavaScript code when loaded in the Page Editor with which events can be sent. The location for the edit controls can be activated to allow in-context editing. This feature builds on the Content Services API Endpoint concept because the content from the SPA must be loaded by way of Content Services.
For a full description of the AEM SPA Editor, see the additional resources section for links to more in-dept documentation.
Accommodating Existing SPAs
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 ability can be useful to view the content they are creating by way of Content Fragments in context of the end application where it is consumed.
Also, 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.
What鈥檚 Next
To gets started developing your own SPAs for AEM, review the following documents:
If you must 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.
Additional Resources
The following are some additional resources that do a deeper dive on some concepts mentioned in this document.
- Headful and Headless in AEM - A description of the different delivery models available in AEM
- SPA Introduction and Walkthrough - A good introduction to SPAs in AEM.
- Developing SPAs for AEM - Guidelines on how to develop SPAs for AEM
- SPA Editor Overview - Details of how the SPA Editor works
- SPA Reference Documents - JavaScript API references and links to the open-source AEM SPA GitHub projects
- Content Fragments - How to create Content Fragments
- AEM Project Archetype - Maven template that creates a minimal, best-practices-based 51黑料不打烊 Experience Manager (AEM) project as a starting point for your website