Previously I presented a common situation where an engineering team might push for Headless AEM and covered why, in my opinion, a Hybrid solution is a better approach. I discussed how Content Fragments, Experience Fragments, and Sling Model Exporters are used in combination to deliver the Headless side of the AEM experience. In case you missed part 1, you can read it here.
So how do you best combine using Content Fragments, Experience Fragments, and Sling Model Exporters with SPAs? Here are several approaches.
SPA Widgets / Single Pages
Sometimes only portions of the page or specific pages require a high interactivity or state management that comes with SPA frameworks. You can build AEM components that utilize any JS library or framework, load them only on pages where they are needed, and even use different frameworks per page. This approach is a light amount of custom development to integrate your SPA components with AEM.
For your engineering team, typically this is done through a small AEM wrapper component. It utilizes an HTL template and data attributes for content sourced from the Sling Model and AEM dialog authoring. As covered previously, you can then expose the Sling Model as JSON to support multichannel content.
This solution works best when you do not require SPA-controlled routing for your pages. If you still need URL-based, stateful entry points, remember that query parameters and suffixes are always available as an option.
SPA Editor
The SPA Editor is an AEM-provided solution for React and Angular applications to integrate directly with AEM with in-context editing. It works best when you
- Plan to write your entire frontend for a site in React or Angular
- Want to minimize the amount of AEM your frontend developers need to know
- Require SPA-controlled routing and want to serve SPA web pages from AEM
The content authoring for the SPA components is still stored in the JCR, but provided as a JSON representation via component mapping instead of writing AEM HTL templates. You can then expose this JSON to other channels in the same way as before. One nice thing about this solution is Adobe has taken the time to re-write many of the Core Components in React and Angular. This allows for direct parent/child SPA component relationships and data flows that will be very familiar to SPA developers.
Now this solution does come with some AEM limitations because the rendering is controlled via the SPA rather than HTML templates. For a full, updated list of limitations, please read the Adobe documentation. The SPA Editor is still actively supported and developed by Adobe, so hopefully they will remove these limitations over time.
Remote SPA
Remote SPA is an AEM-provided solution for externally hosted React applications to become editable within AEM. Functionally, it operates in much the same way as SPA Editor, but the SPA server delivers the pages instead of AEM. This allows the engineering team to build the bulk of the site components outside of AEM and to scale the page traffic separately from AEM. Downsides of this approach include:
- The need for separate server infrastructure
- Two separate deployment cycles
- The same limitations as SPA Editor
- And it currently only supports React
Still, this may be the best solution for adding authoring to an existing SPA application or meeting timeline requirements for a team unfamiliar with AEM.
My colleague Jeff Molsen did a recent “Pop-up Perspective with Perficient” video on this topic if you’d like to learn more in-depth or see Remote SPA in action.
Explore What AEM Has to Offer
If you are using a different frontend, I still recommend taking the time to learn and develop within AEM with Sling Exporters. There are several great tutorials on how to develop editable components within AEM with or without SPA editor. When faced with a new problem, explore what AEM has to offer first. Your marketing team will thank you for it.
For more information on how Perficient can implement your dream digital experiences, we’d love to hear from you. We’re certified by Adobe for our proven capabilities, and we hold an Adobe Experience Manager specialization (among others). Contact Perficient to start your journey.
