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.
How does it help in achieving a better user experience?
Single Page Applications (SPAs) can offer compelling experiences for website users. The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. This article talks about the advantages of single-page applications over multi-page applications, and the SPA features rolled out with different versions of AEM, along with the details of how it works with AEM. Let’s get into the details.
· A Single Page Application (SPA) differs from a traditional web application. The page is rendered client-side and is primarily JavaScript-driven, relying on Ajax calls to load data and dynamically update the page. Some 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 it transfer control 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.
· Few popular SPA Apps are Gmail, Facebook, Twitter, Trello.
Differences between Single Page Applications and Multi-Page Applications
· In a Multi-page application (traditional web application), only the data needed for the requested page will be loaded. When the visitor moves to another page by clicking either on navigation links or any actions, the server is called for the additional resources, which lead to a delay in page loads as the page must get the required content again from the server.
· Whereas in Single Page Applications, most of the content (HTML, JS, CSS) is loaded during the first-page load. Any additional data that might be needed is called asynchronously to maximize the speed of the page seamlessly, without redirecting the page. By rendering on the client-side, the page element reacts faster, and interactions with the page by the visitor are immediate.
· By being faster, fluid, and more like a native application, a SPA becomes an engaging experience not only for the visitors of the webpage but also for marketers and developers due to the nature of how SPAs work.
SPA implementation with Adobe Experience Manager:
SPA introduced with AEM 6.3, but earlier version (before AEM 6.4 SP2) of AEM were having challenges like no out of box support for in-context editing, no possibility of previewing the content page, limited authoring capabilities, etc.
As part of the AEM 6.4 SP2 release, Adobe has come up with ‘SPA Editor’ – supporting below capabilities:
· With SPA editor, Adobe has introduced a thin layer called SPA Editor JS SDK, which is a collection of open-source JavaScript libraries that provide a framework for allowing authors to edit the contents of a Single Page Application deployed in AEM. AEM delivers the content in the form of JSON, and the SPA Editor JS SDK maps the JSON to React components.
· SPA editor is a framework Agnostic Implementation.
· Offers in-context editing.
· Supports React and Angular frameworks.
· Support for History API for routing.
· Support for state library, like Redux.
· Tech preview for JS Server-Side Rendering.
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 context layout management of components.
· Provides the content authors with the same user experience both in author and publish mode.
· It supports the React and Angular framework, which are widely used to create SPAs.
· Much improved seamless user experience.
· Improved application performance, as all the 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 desirable experience not only for the visitor of the webpage but also for marketers and developers due to the nature of how SPAs work.
What’s new with AEM 6.5 release?
Below are new capabilities/enhancements 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 SPA JavaScript SDK in the project, which reduces developer efforts in the configuration.
· Server-side rendering of SPA JavaScript to reduce first page load time and improve SEO.
· Use the Template Editor to edit and configure the AEM editable parts of the SPA.
· Use Multi-site Management to create the 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 & allows 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.
Limitations/Known issues with SPA Editor
The following AEM features are not yet supported by the SPA Editor:
· Target mode
· Context Hub integration
· Inline image editing
· Edit configs (e.g., 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.
Source: https://www.tadigital.com/blog/single-page-application-with-aem-6-5/
No comments:
Post a Comment
If you have any doubts or questions, please let us know.