Single Page Application with AEM 6.5

By Hari Kumar Reddy Maryadha 5 min read

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.

Single Page Application with AEM 6.5

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.

Learn more about the benefits AEM 6.5 Release.  || TA Digital Earns Platinum Partnership with Adobe After Acquiring its 4th Specialization.

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.

Single Page Application with AEM 6.5

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

Download our ebook and learn how you can break the CX code: Secrets of Customer Experience Strategy.  ||  Sign up today for the latest news about your Digital Transformation.

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.

Want more insights like this?

We’re on a mission to provide businesses like your’s customer experience, digital marketing, and commerce tips, tricks, and industry-leading knowledge to help you build a great brand. Don’t miss a post. Sign up for our biweekly newsletter.
Blog Subscription
By signing up, you are providing consent for TA Digital to send marketing communications. You can visit our Privacy Center to choose your preferences.

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.

Hari Kumar Reddy Maryadha

Written By

Hari Kumar Reddy Maryadha