Single Page Application (SPA) is a website design approach or web application that dynamically interacts with the user and instantly rewrites the current page instead of altogether loading new pages from the server. This approach gives users a seamless experience between successive pages. It functions more like a local application.
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.
SPA’s can offer compelling experiences for website users. The SPA Editor offers a comprehensive solution for supporting SPA’s within AEM. Please refer our SPA Blog for more details on comparison with Multi page applications , SPA features released with multiple versions of AEM.
Let’s get in to implementation details with AEM 6.5 version!
Here is SPA (With SPA Editor) implementation logical flow diagram:
SPA Enhancements/New features added in AEM 6.5 release are helping in overcoming previous version limitations. Please refer our SPA Blog for more details on previous versions details.
Below is logical flow diagram explains the page load process – starting from client/browser request to getting the response from AEM.
SPA Editor – How it works?
- 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.
- 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.
- The basic concept is to map a SPA Component to an AEM Component. AEM components, running server-side, export content in the form of JSON. The JSON content is consumed by the SPA, running client-side in the browser. A 1:1 mapping between SPA components and an AEM component is required.
- Popular frameworks React JS and Angular are supported out of the box
SPA Editor – Loading Process
Below is the sequence how SPA editor loads and renders content:
- SPA Editor loads.
- SPA is loaded in a separated frame.
- SPA requests JSON content and renders components client-side.
- SPA Editor detects rendered components and generates overlays.
- Author clicks overlay, displaying the component’s edit toolbar.
- SPA Editor persists edits with a POST request to the server.
- SPA Editor requests updated JSON to the SPA Editor, which is sent to the SPA with a DOM Event.
- SPA re-renders the concerned component, updating its DOM.
The SPA is isolated from the editor and always in charge of its display. In production (publish), the SPA editor is never loaded.
Implementation & Build Process:
Please see key tasks / important points to be considered in each phase:
Key properties to note & it’s purpose:
Here are enhancements/new features added with AEM 6.5 release:
- In-context composition and content editing of React and Angular powered SPA.
- Use Template Editor to edit and configure the AEM editable parts of the SPA.
- Use Multi-site Management to create country, franchise or white-labeled SPA experiences.
- Screens Add-on: Edit and deliver rich interactive experiences using SPA Editor.
- Leverage the full localization and translation Support from AEM in your SPA.
- Embed forms and communications from AEM Forms into SPA Editor.
- With extended HTTP API, it supports the delivery of content fragments in JSON format & allow CRUD operations. This JSON format can be consumed across SPA, Mobile App, iOS App, Social media and more. This makes AEM standing as Hybrid CMS & supports Modern Web and Headless Delivery.
What are the Advantages with SPA Editor?
With release of AEM SPA Editor, it overcame most of the concerns we faced earlier. Here are the advantages:
- The content author will not experience any difference when editing or creating content.
- Enables in context editing of content & configuring components.
- Enables in context layout management of components.
- Provides the content authors with same user experience both in author and publish mode.
- It supports React and Angular framework which are widely used to create SPAs.
- Much improved seamless user experience.
- Improved application performance, as all content is retrieved once in a single page load with additional resources loaded asynchronously as needed based on user interaction with in the page.
- Clear separation of front end and back end development which reduces the integration dependency on each other.
- 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.
Please refer Adobe’s Step by Step weekend tutorial documentation for SPA implementation details with React / Angular.
Limitations of AEM SPA Editor:
The following AEM features are not yet supported by the SPA Editor:
Inline image editing
Edit configs (eg. listeners)
Apply styles from the Style System
Undo / Redo changes
Page diff and Time Warp
Features performing HTML rewriting server-side such as Link Checker, CDN rewriter service, URL shortening etc.
- We cannot mix SPA js components with AEM components as of now.
- Experience Fragments and context hub integration is also not supported as of now.