Skip to content

Simplified Components Proposal

Gabriel Walt edited this page Mar 10, 2021 · 3 revisions

To ease the work of frontend developers that usually don't have AEM knowledge, it is important to make the components and all aspects of the AEM HTML and JSON output contain as little AEM specificities as possible. This proposition aims to remove the AEM idiosyncrasies that mostly have a historic reason and that are in the way of frontend developers.

Lean JSON output

The Page Model JSON output, also called "Content Services", is the API for experience management of headless content delivery, which is to be used when authors need in-context editing and preview capabilities of SPA implementations. This JSON API is complementing AEM's other JSON API, the GraphQL Content Fragment API, which is ideal for simpler content management of headless content delivery, which is to be used for the content that authors don't need to edit or preview in-context. While the GraphQL API allows developers to cherry pick the fields they need as they are in control of the layout, the Page Model exposes the layout choices made by the author, therefore the SPA developers need to implement all properties exposed by the API. For example, if the author configured a teaser component to be 4 columns wide and to display some image, then the consuming SPA needs to take these in consideration, or the author would think that the corresponding editor dialog options are broken. As implementing all Page Model properties is a huge task, the Headless SDK with the React Core Components aim to implement those.

Allowed components removal

Link transformation performed by Sling Models

Style System exposed by Sling Models

Responsive Grid exposed by Sling Models

Configurable Data Layer output

Extended Content Fragment component

Lean HTML output

CQ element removal

Wrapper DIV removal

Style System applied by the component

Responsive Grid applied by the component

Removal of the component placeholder elements

Customizable Style System class name

Customizable Responsive Grid class names

Configurable Data Layer support

Extended Content Fragment component