CMS, Digital Marketing, Enterprise Solutions

Single Page Application (SPA) implementation with Adobe Experience Manager 6.5

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.

SPA’s differs from a traditional web application in that the page 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. The page does not reload at any point in the process, nor does control transfer to another page.

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:

  1. SPA Editor loads.
  2. SPA is loaded in a separated frame.
  3. SPA requests JSON content and renders components client-side.
  4. SPA Editor detects rendered components and generates overlays.
  5. Author clicks overlay, displaying the component’s edit toolbar.
  6. SPA Editor persists edits with a POST request to the server.
  7. SPA Editor requests updated JSON to the SPA Editor, which is sent to the SPA with a DOM Event.
  8. 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.
  • New Maven Archetype for SPA, which creates minimal project structure required for SPA implementation. It also includes with SPA JavaScript SDK in project, which reduces developer efforts in configuration.
  • Server-side rendering of SPA JavaScript to reduce first page load time and improve SEO.
  • 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.
  • Gives the front-end developers the flexibility to use their choice of JavaScript frameworks and build tools to create highly interactive applications.
  • 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:

  • Target mode
  • ContextHub integration
  • 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.
  • Developer mode
  • Launch
  • 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.
References:
  1. https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/spa-walkthrough.html
  2. https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/spa-getting-started-react.html
  3. https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/spa-implementing-react-component.html
  4. https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/spa-wknd.html
  5. https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/spa-getting-started-angular.html
  6. https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/spa-deep-dives.html
  7. https://helpx.adobe.com/experience-manager/6-5/sites/developing/using/spa-overview.html

About The Author