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 of 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.
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 of how SPA editor loads and renders content:
- 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.
Key properties to note & it’s the purpose:
Here are enhancements/new features added with AEM 6.5 release:
- 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 the 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, like all content, is retrieved once in a single page load with additional resources loaded asynchronously as needed based on user interaction within the page.
- Clear separation of front end and back end development which reduces the integration dependency on each other.
- It 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.
What are the Advantages with SPA Editor?
With the 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 the 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, like all content, is retrieved once in a single page load with additional resources loaded asynchronously as needed based on user interaction within the page.
- Clear separation of front end and back end development which reduces the integration dependency on each other.
- It 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 to Adobe’s Step by Step weekend tutorial documentation for SPA implementation details with React / Angular.
- 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:
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 of 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.
Let’s get into 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.
Below is a 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 Editor – Loading Process
Below is the sequence of how SPA editor loads and renders content:
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 the purpose:
Here are enhancements/new features added with AEM 6.5 release:
What are the Advantages with SPA Editor?
With the release of AEM SPA Editor, it overcame most of the concerns we faced earlier. Here are the advantages:
Please refer to 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:
References:
No comments:
Post a Comment
If you have any doubts or questions, please let us know.