AEM’s SPA Editor Overview and Where to Find Things

As an AEM developer attending my very first Adobe Summit this year, I was given the chance to take a deep dive into some of the newest and cutting edge features that Adobe recently released or plans on releasing with the upcoming AEM 6.5. 

One of the newer features that caught my attention is AEM’s Single Page Application (SPA) Editor. New with AEM 6.4 Service Pack 2 and available in its entirety in 6.5, the SPA editor allows you to build your React or Angular SPAs to be edited and published by AEM authors while still maintaining a true SPA architecture on the front end.

This not only benefits the developers, but also UX, design, product owners, and most importantly, the end users. I have seen several AEM projects in the wild where the front end is built on either React or Angular, yet they were still using a multi-page architecture on the server side. This meant that the JS framework, libraries, and components had to be re-initialized (bootstrapped) and rendered upon each page load, resulting in poor loading times and poor user experience, not to mention the added code complexity.

So what exactly is the AEM SPA editor? It’s the same page editing interface that you’re already familiar with in the AEM authoring environment. This is not some new interface that is used exclusively for SPAs. The core ideas that string this all together is through the use of AEM’s Sling Models Exporter framework combined with the use of Adobe’s JS SDKs in your SPA. Adobe has published these SDKs and associated helper libraries to NPM, so obtaining and using them is as simple as adding the dependency to your project’s package.json and importing them into the JS files that need them. These libraries provide APIs to your front end app to facilitate creating a 1:1 mapping of your React/Angular component with an editable AEM component whose content is persisted in the JCR.

Lets dive right into an example of a text component that is rendered by React and can be edited by an AEM author. These examples are lifted from the WKND Events sample project.

Here I have authored a Text component which provides rich text editing capabilities within the page. As you can see, editing your SPA components is no different than the AEM authoring interface you’re already used to.

Since this component makes use of the Sling Models Exporter framework on the back-end, we can view an export of the JSON for this authored component:

{
    text: "<p>Hello AEM SPA Editor!</p>",
    richText: true,
    :type: "wknd-events/components/content/text"
}

The front end app makes an asynchronous call to AEM to get this content by referring to the model.json of this component at http://localhost:4502/content/wknd-events/react/home/jcr:content/root/responsivegrid/text.model.json

The JS SDK will take this response and pass it in as this.props which is immediately available for use by the rendering React component. Lets take a look at our React component:

/*
    Text.js

    Maps to wknd-events/components/content/text
*/

import React, {Component} from 'react';
import {MapTo} from '@adobe/cq-react-editable-components';
require('./Text.scss');
/**
 * Default Edit configuration for the Text component that interact with the Core Text component and sub-types
 *
 * @type EditConfig
 */
const TextEditConfig = {

    emptyLabel: 'Text',

    isEmpty: function(props) {
        return !props || !props.text || props.text.trim().length < 1;
    }
};

/**
 * Text React component
 */
export default class Text extends Component {

    get richTextContent() {
        return <div dangerouslySetInnerHTML={{__html:  this.props.text}}/>;
    }

    get textContent() {
        return <div>{this.props.text}</div>;
    }

    render() {
        let innercontent = this.props.richText ? this.richTextContent : this.textContent;
        return (<div className="Text">
                {innercontent}
            </div>);
    }
}

MapTo('wknd-events/components/content/text')(Text, TextEditConfig);

Looking at the React component above, we can identify a few notable aspects of our component. Line 8 is our import statement that includes the MapTo function exported by the @adobe/cq-react-editable-components package. As the name suggests, this function maps the AEM component’s resource type to the SPA component.

Moving onto line 15 is our component’s EditConfig. This tells the SPA editor how to display the component to the author when the component is considered “empty”, i.e. there hasn’t been enough content authored to display anything meaningful here, so a placeholder label is displayed instead.

Starting on line 27, we have our standard React component with its usual render() method. The only significant thing here is that the authored content from the AEM component gets passed in as this.props by the JS SDK.

Lastly on line 45, we have the MapTo() function which is the glue code that maps the AEM component to the SPA component. We pass into this function the AEM resource type as well as a reference to the SPA component and its associated EditConfig. The JS SDK takes care of mapping the content properties to this.props if using React or @Injecting the fields if using Angular.

JS Framework Support

Currently, only SDKs for React and Angular have been published by Adobe. Adobe has stated they encourage and support the community to write and publish SPA editor SDKs for other JS frameworks. Developers wishing to write their own can refer to this blueprint documentation that outlines the contract the SDK must fulfill in order to provide full SPA editing capabilities.

More than just AEM

Want to push your content out to more channels than just your SPA? Reach out to more channels by using AEM as a Headless CMS. With this architecture approach, your authors can publish pages, components, content fragments and more to be exported as a series of JSON endpoints that can be consumed by anything such as your SPA, native mobile app, Adobe Target, GraphQL, AWS Lambda, Azure function, etc. The list goes on. This could be a reasonable approach to take if you don’t want your SPA to be tied to AEM’s SPA editor framework.

Conclusion & Links

With all of that said, this post is really just skimming the surface of what you can do with these newer features of AEM. Adobe has an excellent series of tutorials and documentation to quickly get you up to speed on the new SPA editor framework and Headless CMS architecture. Check out the links below to help you get started and find what you need.

SPA Overview & Getting Started

SPA Architecture

https://helpx.adobe.com/experience-manager/6-4/sites/developing/using/spa-architecture.html
Take a closer look at how the SPA editor framework works and how it fits into the AEM architecture of content authoring and rendering. This article also contains a useful section that describes the level of coordination needed of front-end developers and back-end developers for developing SPA editable components.

Tutorials and other links

Start building a SPA Editor enabled implementation today by following the WKND Events tutorial. You can choose to follow the React or Angular tutorial.

SPA Maven Archetype

When creating a SPA Editor enabled AEM project, it is recommend to use the new Maven Archetype for SPA Starter Kit.

Summit Labs

If you didn’t get a chance to attend Adobe Summit this year and missed out on the awesome hands-on lab sessions they have, it’s not too late! All Summit labs are available online for anyone, no account required. These step-by-step guides will walk you through the topic from start to finish. Each lab has a “Resources” folder in the lower-left corner of the page which contains things like a sample project that is referenced throughout the lab. 

Here are the labs specifically for the AEM SPA Editor and Headless CMS that I attended while at Summit:

• Building for the Modern Web with the Adobe Experience Manager SPA Editor
• No Author Left Behind – Develop SPAs That Are Fast, Engaging, and Editable 
• Headless Architecture with Adobe Experience Manager

And here is the exhaustive list of all labs at Summit 2019 – https://forums.adobe.com/message/11009038#11009038

Experience League

Launched at last year’s Summit, the Adobe Experience League is your one stop shop for any knowledge needs as it pertains to Adobe and the Experience Cloud. From here you can select your learning “path” and be guided to all sorts of learning resources that may interest you.

Happy learning!