Single Page Application – AEM Editor
October 17, 2018
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.
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.
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.
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 Adobe, Microsoft, Sitecore, Acquia, Marketo, SAP Hybris, Elastic Path, IBM Watson Marketing, Coveo and Episerver. The company was named on 2013, 2014, 2015 Inc. 5000 list as one of the fastest-growing technology companies in the United States.