Stop developing composite view AEM components with "Editable Component"​ | AEM Community Blog Seeding

[kautuk_sahni]

Stop developing composite view AEM components with "Editable Component"​ by Adobe Tech Blog

Abstract

I have been always a big proponent of SOLID Design Principles and the Separation of Concerns Design Principle. Both these principles provide fundamental building blocks for any system design and development including AEM applications. Aligning to these principles, I have thoughtfully promoted atomic AEM components as a building block for the development of a site.

AEM has fundamentally done a phenomenal job providing various building blocks following these principles and has offered multiple capabilities like templates, components, experience fragments, content fragments, style systems for authors to create composite views and apply the UI styles dynamically, but there has been always a big gap on AEM that enforced authors to ask for more composite view components, as AEM does not offer the capability to author a composite view and reuse the same composite view but also allow to update the content on the various webpages.

Creating atomic components does provide huge flexibility to support ever-changing UI requirements, but not able to create re-authorable composite views has been a huge limiting factor to truly maximize the potential of atomic components. For a long time, I have struggled to find a genuine flexible solution that empowers atomic components to deliver a composite view without any AEM development, so I decided to look for a solution that uses atomic components and create re-authorable composite views by authors instead of creating composite view components by developers.

To brainstorm the idea and find a workable solution for re-authorable composite views which I named as "Editable Component", I shared the details with my fellow architect Daniel Njoroge, and we quickly finalized the implementation architecture. Daniel offered to write the solution for "Editable Component" and the POC solution details can be found under his GitHub repo.

Editable component fills the gap of delivering composite views by authoring and applying the styles, without developing a composite view component. Once the composite view is authored then the same composite view can be used and reauthored on the multiple webpages using the Editable component solution.

How Editable Components work?

To create a fully responsive editable component with style guides we needed a fully capable AEM component authoring window, and we realized that we can repurpose the Experience Fragment window which provides flexibility to author all components, assets, including responsive authoring, etc.

Step #1

Create a composite view based on UI and assemble all the components as an experience fragment shown below including applying the style guides using style systems.

Read Full Blog

Stop developing composite view AEM components with "Editable Component"​

Q&A

Please use this thread to ask the related questions.