Creating Single Page Applications in Adobe Experience Manager

It’s been just about a dozen years since websites began implementing asynchronous updates without a page refresh.  This practice forever changed the way users expect a web application to behave. Rather than sites requiring a full page refresh when a user enters data – an inefficient, jarring user experience — the web has evolved to allow users to update only pieces of a page when interacting with that page.

However, the tools used to curate and manage that digital customer experience have generally lagged behind the experience provided to customers. Brands could provide this experience to customers, but it couldn’t be easily replicated in CMS (content management system) authoring environments. As users expect web applications to behave like native applications, the biggest challenges for marketers is to find scalable, mature technology solutions to architect and curate experiences at speed and as a consumer would use them. These heightened expectations have forced commerce platforms to evolve to meet the needs of marketers, and have paved the way for more complex and dynamic digital experiences.

Adobe’s product suite provides a robust experience ecosystem that enables businesses to use several products to connect with their customers while simultaneously tracking that user’s interactions throughout the customer journey. Adobe Experience Manager (AEM), specifically, has made major strides in its last two version updates to support more dynamic Content-as-a-Service (CaaS) models, and Single Page Application (SPA) integration directly in the authoring experience.

Isobar’s recent whitepaper uncovers the opportunities of SPAs in driving experience-led transformation through their integration into AEM brand experiences. The paper includes considerations that CMOs, CTOs, and their technical solution architects should consider when defining SPA architecture and integrating it to AEM.  Here are the three key areas of focus explored in the paper:

  1. What CMOs and CTOs need to know:
    • What are SPAs and how do they connect with Headless Commerce models?
    • Should you build a SPA or create a traditional marketing site?
    • How can AEM support the build of a SPA?
    • When and how proprietary solutions can enhance AEM and solve your unique needs.
  2. What technical architectural considerations/steps should you make when integrating SPA into AEM?
    • Decide on a JavaScript Framework.
    • Choose an asset compilation strategy; a custom solution or AEM’s out-of-the-box client libraries.
    • Determine how to plug in widgets or a SPA into your application.
    • Understand how to leverage AEM to provide data to a SPA experience.
    • Leverage AEM 6.4 SP2 to create and manage SPA content via the authoring experience.
      1. AEM’s SPA Editor feature requires AEM 6.4 service pack 2 or newer.
    • Enhance SPA architecture to meet SEO requirements.
    • Determine the configurations of a SPA using custom OSGi (a module system for Java) settings.
  3. What other factors should be considered when defining SPA architecture?
    • Using an API Tier in front of a SPA.
    • Serving personalized content by using Adobe Target as part of your SPA.
    • Allocating financial budgets judiciously to utilize the expansive Adobe ecosystem.
    • Playing to your team’s strengths to maintain development velocity.
    • Integrating SPA code as part of the code ecosystem.

Download the whitepaper here to explore these in detail and learn how to power brand experiences using a SPA in AEM.