AEM Architect Certification Series: Single Page Application (SPA) | AEM Community Blog Seeding

[#1]

AEM Architect Certification Series: Single Page Application (SPA) by Monendra Singh

Abstract

Introduction: 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.

Basic SPA Editor Workflow
Keeping in mind the key elements of the SPA Editor, the high-level workflow of editing a SPA within AEM appears to the author as follows.

Please refer this article for more details.

SPA Editor loads.
SPA is loaded in a separate 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.
AEM Architecture and SPAs
The general architecture of AEM including development, authoring, and publishing environments does not change when using SPAs. However it is helpful to understand how SPA development fits into this architecture.

Read Full Blog

AEM Architect Certification Series: Single Page Application (SPA)

Q&A

Please use this thread to ask the related questions.