Single Page Application with AEM 6.5
What is Single Page Application (SPA)?
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.
- 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:
- SPA editor is 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.
- 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.
- 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
- 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.
Get help from our experts
Over the past 20 years, we have completed thousands of digital projects globally. We have one of the largest and deepest multi-solutions digital consulting teams in the world. Our proprietary processes and years of Digital Experience expertise have earned us a 97% customer satisfaction rating with our clients ranging from Global Fortune 1000 to Mid-Market Enterprises, leading educational institutions, and Non-Profits.
DesignRush has recognized TA Digital as a top Creative Agency.
About TA Digital
TA Digital is the only global boutique agency that delivers the “best of both worlds” to clients seeking to achieve organizational success through digital transformation. Unlike smaller, regional agencies that lack the ability to scale or large organizations that succumb to a quantity-over-quality approach, we offer resource diversity while also providing meticulous attention to the details that enable strategic success.
Over the past 20 years, TA Digital has positioned clients to achieve digital maturity by focusing on data, customer-centricity and exponential return on investment; by melding exceptional user experience and data-driven methodologies with artificial intelligence and machine learning, we enable digital transformations that intelligently build upon the strategies we set into motion. We are known as a global leader that assists marketing and technology executives in understanding the digital ecosystem while identifying cultural and operational gaps within their business – ultimately ushering organizations toward a more mature model and profitable digital landscape.
Recognized in 2013, 2014, 2015, and 2019 Inc. 5000 list as one of the most successful technology companies in the United States, TA Digital is pleased also to share high-level strategic partnerships with world class digital experience platform companies like Adobe, SAP and Salesforce and possess global partnerships with industry leaders such as Sitecore, Episerver, Elastic Path, BigCommerce, AWS, Azure and Coveo.