Single Page Application (SPA) in AEM

 


In this technological era where speed is everything, Single Page Applications (SPA) play a very vital role in terms of loading web pages. SPA is vital to meet the rising website expectations of today’s consumers. The seamless integration of SPA with Adobe Experience Manager (AEM) goes ahead to offer a detailed solution for SPA within AEM. But why use SPA over the traditional multi-page applications? What is the reason that SPA is much more efficient in terms of speed and functionality?
 
Well, one of the biggest differences between SPA and MPA is that single-page applications only download the page once it is executed, and they only download the page in question. This is completely unlike a multiple-page application, which downloads the entire application at once. Therefore, in terms of interactivity and user experience, SPA is considerably faster and better than MPA. 
 
It’s a lot easier for the user to navigate through multiple web pages without having to wait for them to load. This article will study SPA in AEM in-depth and cover everything there is to know about the duo. 

What is a Single Page Application (SPA)? 

 
By definition, SPA is a web design approach that actively interacts with the user, and instead of loading new pages from the server, simply rewrites the current page. This functions more like a local application than an online application. SPA provides a seamless experience for users while switching between successive web pages. Here are some of the pros of integrating SPA with AEM. 


  • They are perfect for future mobile development. 
  • Comparatively much quicker and more responsive. 
  • Much more interactive user interface. 
  • Seamless client-side rendering. 
  • Better caching. 
  • It is considerably easier debugging with chrome. 
  • Ideal for social networks, SaaS platforms, and closed communities.

How does SPA help in achieving better User Experience (UX)?

 
With a much more interactive and compelling experience lined up for website users, the integration of SPA in AEM makes your entire browsing experience fluid. SPA is a lot more suitable in situations where developers simply want to provide users with a responsive and fast website interface and SEO doesn’t matter much. Examples of this can be Google, Soundcloud, Trello, Google Drive, Google Maps, etc. 
 
While browsing this website, the user needs only the information in the portion of the webpage that he is currently browsing. So SPA will simply load this part and load the rest when they need to be executed. Here is how SPA integrated with AEM can account for a much faster and better website user interface. 

Functionality 

SPA is poles apart from a traditional web page application regarding functionality and speed. With SPA, when the webpage is opened, it renders on the client-side and is usually Javascript-driven. It heavily relies on Ajax calls to load data and update the page. Some or all of the content on the web page is retrieved at the same time, with other resources loaded in an asynchronous manner, as and when the user demands it. Therefore, there is no reason for the page to reload at any point in the process, or transfer control to another website. 

Caching capabilities 

Seamlessly cache any local data with the SPA approach. When a server request is sent from single-page applications, all the incoming data is stored. Therefore, even in the absence of an internet connection, you can work offline. This is because the local data will be synchronized with the server once the internet connection is back up and running. 

Uninterrupted UX 

Gone are the days when you had to click multiple links and redirect to other web pages ust to find out in-depth information about certain topics. With SPA, find all the relevant information on a single page and experience an unbroken chain of scrolling through a webpage. This feature entailing uninterrupted scrolling comes in handy especially while browsing a website via your phone. 

Major differences between Single-Page and Multi-page applications

 
The key differences between SPA and MPA are mentioned below. 

  • One of the major differences between single-page and multi-page applications is the way they approach loading a webpage. With MPA, only the specific portion of the date that you have requested will be loaded. If you want to know more, you might need to click a navigation link or action button, upon which the server calls on for additional resources. This will result in a delay in page loading times since new data is requested from the server again. 
  • On the other hand, when it comes to SPA, all the relevant data is loaded in the first load. Any additional data is then loaded asynchronously, depending on the user. No time is wasted in redirecting or reloading the page; hence a more fluid and seamless experience is offered. The user is able to interact with the webpage without any lag or delay. 
  • Marketers and developers are also in for a much more interactive experience, given the way SPA  works. 
  • SPA pages are much easier to develop and maintain, as compared to Multi-page applications, which are complex to work around. 
  • When the internet connection is interrupted, SPAs can still function as they are compatible with offline service. This isn’t the case with MPAs, since they always require an internet connection to complete user requests.
  • Unlike multi-page applications, SPAs don’t need to make round trips every time the user interacts with the webpage. 

SPA implementation with AEM

 
Before SPA was introduced with AEM 6.3, the previous versions (before AEM 6.4 SP2) faced challenges such as no possibility of previewing the content page, no out-of-box support for in-context editing, limited authoring capabilities, etc. But Adobe has now introduced a SPA editor with AEM 6.4 SP2. This version of AEM supports the following capabilities. 

  • SPA Editor JSK SD has been introduced as a thin layer over the SPA editor. It basically refers to a collection of open-source JavaScript libraries that offer frameworks allowing authors to make changes to SPA contents integrated and deployed in AEM. AEM releases the content in JSON, which is then converted into react components by the SPA editor JSK SD. 
  • The SPA editor is now a framework agnostic implementation. 
  • Tech preview is now available for JS Server-side rendering. 
  • Makes in-context editing available.
  • Supports history API for routing. 
  • Offers support for react and angular frameworks. 
  • Supports state libraries like Redux. 
 

An Overview of the SPA Editor: Pros & Limitations 

Advantages of the AEM SPA Editor

The advantages of the AEM SPA editor are as follows. 

  • Be it creating or editing content, the content author will never notice a difference. 
  • In-context content editing and configuration of components is now available.
  • Option for context layout management of content is now available.
  • The same user experience is provided to content authors in author and publishing mode. 
  • Support for react and angular framework are now available. 
  • User experience is much more fluid and seamless. 
  • All the content on the page is made available in a single load. Hence the application performance is improved significantly. Additional elements are loaded when required, as per the request of the user. 
  • Reduction in integration dependency between front-end and back-end development, given that a clear separation is now made between them. 
  • Front-end developers now have the flexibility to choose between Javascript frameworks, and further build tools that create interactive applications. 
  • SPA is a much faster and desirable experience for marketers and developers as well, given how SPA works. 

Limitations with SPA editor

The below 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
  • Link Checker, CDN rewriter service, URL shortening, and other features performing HTML rewriting server-side.
  • Developer mode
  • Launch
  • SPA JS and AEM components cannot be mixed as of now. 
  • No support for Experience Fragments and context hub integration as of now.

Additional features with AEM 6.5 release

 
Here are the new features made available with the AEM 6.5 release. 

  • React and angular powered SPA can now undergo in-context composition and content editing. 
  • Introduction of New Maven Archetype for SPA, which can create minimal project structure for SPA implementation. Developer efforts are further reduced in the configuration by the availability of SPA editor SDK in the project.
  • Enjoy full localization and transitional support in your SPA with the help of AEM. 
  • Reduction in first page load time and improvement in SEO done by the introduction of Server-side rendering of SPA JavaScript.
  • The delivery of contact fragments in JSON format, and permission for CRUD operations is now available with an extended HTTP API. This format can easily be consumed across SPA, iOS App, Mobile App, Social media, etc. This is what makes AEM A hybrid CMS and provides support for headless delivery and Modern Web. 
  • Template editor for editing and configuring AEM editable parts of SPA. 
  • For a country, franchise, or white-labeled SPA experience, Multi-site Management has been made available.
  • Forms and communications from AEM forms can now be embedded into the SPA editor. 

Bottom Line

This is everything you need to know about the integration of SPA with AEM. Not only do they improve the user interface and improve performance, but they also offer support for  react and angular frameworks. 



References:


https://experienceleague.adobe.com/docs/experience-manager-64/developing/headless/spas/spa-overview.html?lang=en

https://experienceleague.adobe.com/docs/experience-manager-learn/sites/spa-editor/spa-editor-framework-feature-video-use.html

https://experienceleague.adobe.com/docs/experience-manager-learn/getting-started-with-aem-headless/spa-editor/react/overview.html?lang=en

Comments

Post a Comment

Popular posts from this blog

Headless content management in AEM

      Adobe Experience Manager, commonly referred to as AEM, is a cloud-native, API-first content management system (CMS) and Digital Asset Management (DAM) platform that enables you to structure and deliver headless content across multiple channels. AEM enables headless delivery of immersive and optimized media to customers that can automatically adapt to any platform or device.        This headless CMS will help you create immersive content that allows marketing teams to manage channel-agnostic content using an enterprise-level DAM. It supports a content as a service model that doesn’t need you to recreate your content for different channels. Moreover, businesses seeking content delivered as packed HTML ( HTML/CSS/JS) can acquire the same with AEM.        Taking the above into consideration, in this article, we’ll be shedding some light on everything you need to know about AEM and its unique headless content management feature. Headless CMS Vs. Traditional CMS       To unders
Read more

AEM as Cloud Service Migration Tools

  AEM as Cloud Service providing useful tools for migrating from AEM On-Premises. This article covers various tools available & their purpose. The tools can be downloaded from adobe “Software Distribution” portal.   Tools Best Practices Analyzer (BPA) Tool
Read more

AEM as Cloud Service Project Structure - 1

Image
  In AEM as Cloud Service, Project Structure has changed & is one of the important exercises to be done if any projects wish to migrate from On-Premises to AEM as CS. In this article we will explore on project structure, code repository, run modes & tools and tips. This section describes the changes required to "AEM On-Premises Maven Project to be AEM as Cloud Service Compatible Project" . 1.      AEM as Cloud Service brings the concept of  mutable  &  immutable content. The dependencies are established to create non-conflicting, deterministic deployments & that they are packaged in deploy-able structure. 2.      AEM application deployments must be comprised of a single AEM Package. This package should in turn contain sub packages that comprises everything to run the application.   Mutable vs Immutable 1.      /apps & /libs are considered  immutable  areas of AEM as they cannot be changed (CRUD Operations) after AEM starts (i.e. at run-time).
Read more