Mastering Adobe Composable Part 3/3: AEM Hybrid Options

In the first two parts of our Mastering Adobe Composable series, we laid the groundwork for modular architecture and explored the specialized tools AEM offers for a pure headless approach. However, for many enterprises, the choice isn't a binary one between "headful" and "headless." The most effective digital strategies often lie in the middle: the Hybrid Architecture. This final installment focuses on how to balance the technical freedom of modern front-end frameworks with the visual, intuitive authoring experience that marketing teams expect. By the end of this guide, you will understand how to orchestrate a "best of both worlds" environment that accelerates development without compromising on-site management.

On This Page:

• Single Page Applications with AEM SPA Editor (Deprecated)
  • Single Page Applications (SPA)
  • Remote SPA
• Experience Fragments

Let's explore the offerings that AEM provides to support the implementation of a Hybrid architecture.

Disclaimer: The SPA Editor has been officially deprecated as of the 2025.01 release of AEM as a Cloud Service. As a result, Adobe no longer enhances or evolves the SPA Editor SDKs, limiting support to critical fixes and security updates only. While existing implementations may continue to operate, Adobe does not recommend the SPA Editor for new projects and instead advises adopting the Universal Editor or other modern authoring approaches to ensure long-term viability and access to ongoing innovations. However, since some existing solutions are still built on the SPA Editor, the following section may remain relevant for understanding or maintaining those implementations.

Single Page Applications with AEM SPA Editor (Deprecated)

A Single Page Application (SPA) is a web application that dynamically updates page content without requiring full page reloads. SPAs achieve this by loading content asynchronously and updating the page in response to user interactions, providing a smooth, responsive user experience similar to that of desktop applications.

Around 2021, Single Page Applications (SPAs) gained popularity, prompting more people to utilize SPAs with AEM's headless options. However, the architecture of an SPA powered by a "headless" CMS presents a new challenge. This approach often excludes marketers and authors from making presentation or layout decisions, resulting in increased time-to-market and total cost of ownership, as any changes require development support. In response to this issue, Adobe introduced the SPA Editor.

The SPA Editor offers a comprehensive solution for supporting SPAs within AEM. It provides in-context editing and authoring, offering a WYSIWYG editor familiar to AEM users. This editor has two versions, each with distinct features and capabilities that we will explore.

Single Page Applications (SPA)

SPA Editor v1, also known as SPA Editor or SPA Editor SDK, was launched in 2018. It is a tool provided by AEM that enables content creators to edit the content of Single-Page Applications (SPAs) within the AEM environment. The SPA Editor JS SDK is a collection of open-source JavaScript libraries that provide a framework for enabling editable content on SPA pages through the AEM SPA Editor. With the SPA Editor JS SDK, users can modify SPA content directly within AEM.

Let's outline some of the main characteristics of the SPA Editor:

• The "head" or the application is embedded into AEM, operating in a coupled mode.

• Only React and Angular are supported by Adobe for integration with the SPA Editor.

• Additional front-end frameworks, such as Vue.js, can be incorporated, and the AEM SDK can be leveraged. Documentation is available to guide users through the integration process. However, it's important to note that custom Adobe does not support custom implementations.

• The SPA Editor uses dedicated AEM JavaScript libraries to enable mapping JavaScript components with authoring capabilities.

• With additional setup, server-side rendering is possible, though Adobe has not made this a starting point with the options available in the Maven Archetype.

Known Limitations

The AEM SPA Editor SDK was introduced with AEM 6.4 service pack 2. However, certain features from AEM Sites are not supported by the SPA Editor:

• Target mode

• ContextHub

• Inline image editing

• Edit configs (e.g., listeners)

• Style System

• Undo / Redo

• Page diff and Time Warp

• Features for rewriting HTML server-side, including a Link Checker, CDN rewriter service, and URL shortening, among others.

• Developer mode

• AEM Launches

Advantages

• The content author can edit the app using AEM's familiar content authoring experience.

• No additional infrastructure is required as everything is hosted on AEM.

• Out-of-the-box components (core components) are included with the SDK.

Disadvantages

• The content drives the application, so it must be written to match the author's content.

• The application is responsible for routing, which can add complexity.

• It is tightly coupled with AEM, requiring the SPA to be built in accordance with AEM specifications. This makes it almost impossible to integrate an existing SPA seamlessly into AEM.

• Setting up SSR (Server-Side Rendering) can be challenging to configure.

Common Use Cases

Considering this technology is older, this section is primarily intended for educational purposes. It's highly recommended to explore either the Remote SPA or Universal Editor as the first option. However, you might still consider using this technology when:

• You already have an existing SPA written in Angular or React.

• Your SPA doesn't require extensive authoring.

• You prefer not to manage a separate infrastructure for hosting the SPA externally.

• SEO is not one of your priorities

Remote SPA

SPA Editor v2, commonly referred to as the Remote SPA Editor, addresses limitations and introduces enhancements in the previous version. Launched in 2021, it presents the following characteristics:

• The application, or "head," is hosted externally to AEM.

• It relies on the AEM SDK, with official Adobe support for React. Next.js has also been adopted as a common option, although it may not have full support from Adobe. However, Adobe offers some blueprints as references and starting points.

• It supports dynamic routing, but each page needs to be explicitly configured to enable authoring.

• The infrastructure for the head, where it resides, must be managed separately, which may result in additional costs and resource allocation.

• It requires Server-Side Rendering, which is handled by the frontend module.

Server Side Rendering (SSR)

SSR is a technique used in web development to generate HTML for a webpage on the server and send it to the client's browser, rather than the more traditional client-side rendering, where the browser loads JavaScript files and dynamically renders the page content. With SSR, the server processes the request, retrieves the necessary data, and renders the HTML content, which is then sent to the client for display. This approach has several advantages, including improved performance, enhanced search engine optimization (SEO), and a better user experience, especially on devices with slower network connections or less powerful hardware.

SSR Hosting Options

Several options are available for hosting server-side rendering with the remote SPA editor. Adobe recommends using Adobe I/O Runtime, which provides a serverless environment for running JavaScript code.

Alternatively, developers can use any hosting platform that supports static site generation, including Vercel, Netlify, and AWS Amplify. Another option is to create a dedicated Node.js server. This can be achieved by developing an Express.js server and hosting it in the cloud, offering a more traditional approach to SSR hosting. Each option provides developers with flexibility and scalability in implementing SSR for their Remote SPA projects.

Advantages

• SPA Remote allows SPAs to reside outside AEM's environment, facilitating modular development and simplified maintenance.

• Core components are available in the SDK, providing ready-to-use building blocks for rapid development.

• The development workflow is accelerated by concurrent task execution, thereby enhancing overall productivity.

• Setting up SSR is typically straightforward since it's integrated into the front-end framework.

• The clear separation of concerns between the front and back end means that not all team members need to be AEM experts; individuals proficient in React are often well-suited for the job. This flexibility can simplify the hiring process.

• Dynamic routing can be implemented using Sling mappings and placeholder pages, offering greater flexibility in managing page navigation.

Disadvantages

• The initial setup and learning curve can be significant, especially at the beginning stages.

• SPAs require separate infrastructure, resulting in additional costs and increased complexity in resource management.

• Developers have complete control over the SPA, dictating where and which pages need to be created for the application.

• Defining editable sections within the SPA requires careful planning and implementation.

• The application dictates the content structure, meaning authors must create pages based on the application's requirements rather than content-driven needs.

• Although the archetype includes Webpack and React, upgrading frameworks and plugins may be difficult. For example, the default archetype does not include TypeScript.

Common Use Cases

Several factors should be considered when deciding whether to implement SPA Remote technology. Below are some of them:

• SPA Remote is suitable for complex front-end integrations that require modern technology capabilities. Frameworks like Next.js and Svelte have gained popularity for their ability to streamline development processes and improve performance.

• If your team is more proficient in frontend technologies such as React and Next.js than in Adobe Experience Manager, SPA Remote may be a preferred option.

• SPA Remote can still provide a good, author-friendly experience with a WYSIWYG editor, albeit in a limited capacity.

• Select SPA Remote for its scalability and ease of management, making it suitable for projects with evolving needs.

• SPA Remote enables you to leverage out-of-the-box AEM functionalities, including MSM, Content Fragments, and live copies, providing flexibility in content management.

• If you don't require a fully authorable site but need fixed areas for content authoring, SPA Remote can be a suitable choice.

Experience Fragments

Experience fragments (XF) in Adobe Experience Manager (AEM) are special components that combine content with design and layout elements to create cohesive and engaging experiences. These fragments can be referenced within pages, allowing for flexible reuse across multiple contexts. Furthermore, experience fragments are based on editable templates that define their structure and components, serving as the foundation for creating the root page of the fragment. With a modular approach, experience fragments facilitate the creation of dynamic and customizable experiences by incorporating a diverse range of components within a paragraph system.

One of the key advantages of experience fragments is their scalability and reusability. They can be utilized across multiple pages within a website or application, streamlining content management and ensuring consistency across the digital ecosystem. Moreover, experience fragments support the creation of variations based on the root page template, enabling marketers to tailor content and components for different audiences or scenarios. These variations can share content and components, enhancing efficiency and reducing redundancy in content creation workflows.

Additionally, experience fragments offer granular control over content organization and presentation. They can be broken down into building blocks that can be reused across multiple variations of the fragment, promoting consistency and efficiency in content management. This modular approach enables marketers to assemble and customize experiences quickly and efficiently, empowering them to deliver compelling and personalized content to their target audience across various channels and touchpoints.

Delivery Mechanisms for Experience Fragments

Experience fragments can be delivered in different ways to fit into various platforms:

• They can be directly added to Adobe Experience Manager features, such as Sites or Screens, and displayed as regular web content.

• Special links can also be used to send them to apps outside of Adobe Experience Manager, where they will appear as web content (HTML).

• Using their tools, you can share them on social media platforms like Facebook or X.

• They can be exposed as JSON information for third-party services.

• They can also be sent to Adobe Target, which helps personalize content for specific groups of people on websites or in apps (HTML/JSON).

These methods make it easy to share experience fragments wherever needed, keeping your message consistent across various online platforms.

Common Use Cases

Experience fragments in Adobe Experience Manager (AEM) offer a versatile solution for a variety of use cases, each tailored to specific needs and scenarios:

1. Content Reusability and Management: Experience fragments are ideal for reusing experiences across different pages or touchpoints within a website or application. This capability streamlines content management, saving authors time and effort who would otherwise need to manually copy and paste content components.

2. Third-party Content Syndication: For organizations that utilize AEM as a content delivery platform for third-party websites or applications, experience fragments facilitate seamless content integration across various platforms. This ensures consistency in messaging and branding, enhancing the overall user experience.

3. Variations and Contextualization: Experience fragments excel in scenarios where variations or renditions of content are needed for specific channels or contexts. Marketers can leverage experience fragments to create channel-specific variations or group related experiences, such as different versions of a campaign across digital channels.

4. Omnichannel Commerce: Businesses implementing omnichannel commerce strategies benefit from using experience fragments to turn touchpoints into transactions. By delivering cohesive and personalized experiences across multiple channels, experience fragments enhance the overall customer journey and drive conversions effectively.

Wrapping Up

Adobe Experience Manager (AEM) offers multiple implementation approaches: Traditional/Headful, Headless, and Hybrid. Understanding the tools tailored to each approach can empower users to navigate and execute their projects effectively within the AEM ecosystem.

However, the choice between these design patterns hinges on multiple factors, including project needs, team familiarity with the tools, time constraints, and alignment with overarching business objectives.

Ultimately, the decision requires carefully evaluating how the chosen approach aligns with project goals and maximizes the potential for success.

Oshyn Can Help

If you need help navigating these implementation options within the Adobe web ecosystem, our team is ready to assist. Simply schedule a time or contact us to arrange a conversation with one of our expert consultants.