Single Page Application – AEM Editor

By Lokesh Shivalingaiah 3 min read

Single Page Application – AEM Editor

October 17, 2018

By Lokesh Banglore Shivalingaiah

A Single Page Application (SPA) is a web application, differing from traditional web application in which the pages interact with the user by dynamically retrieving content and rendering the page on the client side (primarily JavaScript driven) rather than loading the entire page from a server for each action.  All the required content (HTML, JavaScript, CSS) that is not dependent on specific action is retrieved once in a first page load with all other resources loading asynchronously as needed based on the user interaction with the page. This method avoids navigation related interruption, creating a seamless user experience with faster page loads without the need for a page refresh.

Advantages of SPA

1. Much improved seamless user experience.

2. Improved application performance, as all the required resources are loaded on the first page load and also there are no full-page refreshes as the user navigates through the application.

3. Clear separation of front end and back end development which reduces the integration dependency on each other.

AEM and SPA

Main challenges for building SPA using any of the frameworks within AEM was

4. Authoring Experience – Authoring is a core strength of AEM and there is built in componentization for the same.

5. Separate JSON renderer services are needed for data to be consumed by SPA framework. Content services end points can be used for powering SPA.

6. AEM doesn’t allow for in-context experience creation in SPA without heavy customization.

7. Structural components cannot be authored.

8. Content authors could author content but could not create experiences (layout & design).

9. Content authors are not able to preview final publish experience of the pages.

10. Time to customize to handle SPA behavior in AEM including links, routing etc.

Or one could use AEM as a headless content management system and expose “Content As a Service” for the single page applications which again makes AEM less efficient.

To overcome all of these, Adobe have come up with ‘SPA Editor’ – a framework by itself which can solve all the limitations and easily build SPAs with AEM. Below is the high-level architecture.

Single Page Application – AEM Editor

Main features of SPA Editor

11. With AEM SPA Editor, the content author will not experience any difference when editing or creating content. All the common AEM functionality is available and no changes are required.

12. Enables in context editing of content & configuring components.

13. Enables in context layout management of components.

14. Provides the content authors with same user experience both in author and publish mode.

15. Gives the front-end developers the flexibility to use their choice of JavaScript frameworks and build tools to create highly interactive applications.

16. It supports React and Angular framework which are widely used to create SPAs.

17. All the required resources are loaded on the first call. This reduces the number of server calls from the client side and in turn increases the page load performance.

These features, present in the newly released AEM SPA editor eliminate the challenges, making it possible to develop rich SPA driven functionality without having to hack a solution or leverage headless CMS engines.  AEM continues to be best in class full featured and current content solution.

Explore Additional Resources

Learn more on how to select the right CMS for your business and excel the Digital Experience.

Reach out to our Adobe Experience Cloud Consulting team which specializes in helping you deliver seamless, intelligent, and personalized customer experiences.

Get Help from Our Experts

Over the past 19 years, we have completed thousands of digital projects globally. We have one of the largest and deepest multi-solutions digital consulting teams in the world. Our proprietary processes and years of Digital Experience expertise have earned us a 97% customer satisfaction rating with our clients ranging from Global Fortune 1000 to Mid-Market Enterprises, leading educational institutions, and Non-Profits.

DesignRush has recognized TA Digital as a top Creative Agency.

About TA Digital

TA Digital is an innovative digital transformation agency, specializing in delivering digital experience, commerce, and marketing solutions. For nearly two decades, we have been helping traditional businesses transform and create dynamic digital cultures through disruptive strategies and agile deployment of innovative solutions. We are known as a global leader in the digital technology industry for helping marketing leaders achieve their revenue targets, create profitable, omni-channel customer and commerce experiences. TA Digital has high-level strategic partnerships with digital technology companies AdobeMicrosoftSitecoreAcquiaMarketoSAP Commerce CloudElastic Path, IBM Watson Marketing, Coveo and Episerver. The company was named on 2013, 2014, 2015, 2019 Inc. 5000 list as one of the fastest-growing technology companies in the United States.

Lokesh Shivalingaiah

Written By

Lokesh Shivalingaiah