Modern AEM Component Implementation Patterns

AEM Core Components follow modern implementation patterns. There are two types of component patterns in AEM, General Component Pattern & Reusable Component Pattern

 1. General Component Patterns
 This set of patterns are recommended for any type of components(regardless whether the component is specific to a single project, or reused across multiple sites or projects).

 a. Configurable Components
 There are cases where we have a requirement of components which are having variation of similar elements. In such cases, it is recommended to have configurable components having dialogs with various options instead of creating multiple components.

 b. Separation of Concerns
 This patterns recommends the usage of separation of logic from markup.

 - HTL can be used for markup which is more secure.
 - SlingModels are the recommended option for Logic implementation 

2. Reusable Component Patterns
 These patterns are used for any kind of component, which are most suitable for components that are intended to be reused across multiple sites or projects(For eg. Core Components)

 a. Pre-Configurable Capabilities
 It is recommended to define the components/templates flexible as much as possible. Some examples could be using edit dialog (For Page authors), Design Dialog (For Template authors) and all these options are availabe under 'Policies' as part of editable templates.

 b. Proxy Component Pattern
 Here component inheritance is used as a proxy. Create second level components by referring the resourceSuperType property from core components.
Which offers more flexibility and avoid content refactoring if one site needs a different behavior for a component.

 c. Component Versioning
 Always introduce component versioning by adding a number in their resource type path, and in the fully qualified Java class names of their implementations, which will help keeping the components compatible over time. Useful when upgrade happens.

 d. Model Interfaces
 This pattern recommends the usage of  HTL's data-sly-use instruction to point to a Java interface, while the Sling Model implementation is also registering itself to the resource type of the component.

When there is a requirement to redefine the implementation of a Sling Model or  HTL markup of a component, this avoids complexity. Because they are loosely coupled.

Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4


Below video gives an overview of AEM Component Patterns

Proxy Components in AEM 6.4

What are proxy components?

Proxy Components are site-specific components which are inherited from core components, which define the desired component name and group to display for page authoring.

• Proxy Components refer to a Core Component as their super-type.
• Proxy Components follow the path  : /apps/my-site/components (Where core components path : core/wcm/components)

These site-specific components are called proxy components, for the reason they don't need to contain anything; they just serve mostly to define the version of a component to use for the site. Infact, when customizing the Core Components, these proxy components play an essential role for markup and logic customization.

[Click on image to see it big]

Advantages of creating Proxy Components

• Proxy components helps categorization of components in a reusable way.
• Better seggregation: It is a good practice to have 'sling:resourceType' property pointing to site-specific components, instead of pointing to components that are shared by multiple sites.
• This provide more flexibility and avoid content refactoring if one site needs a different behavior for a component.
• Customization can then be achieved on the site-specific component and won't affect the other sites.
• Proxy components can be entirely empty if they fully inherit the functionality, or they can redefine some aspects of the component.

 Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4

See below video to understand more about Proxy Components. 

AEM Core Components

 AEM Core components are available from AEM 6.2. AEM 6.3 onwards Core Components were getting more stabilized. Now we have AEM 6.4 which has the more advanced Core components.

  Core Components were introduced to provide robust and extensible base components, built on the latest technology and best practices, and adhering to accessibility guidelines.

 Core Components leverage the latest technology to enable the creation of flexible, extensible, and feature-rich components to enable authors to easily create content.

 AEM Core components are with HTML Template Language, or HTL, Touch UI dialogs and Sling Models, Secure, robust, version-able

 There are 16 Core Components in AEM 6.4 at present (This count keep getting increased based on developer contrbutions in GitHub), which can be divided into two categories .

 Page authorable components

-Breadcrumb
-Content Fragment
-List
-Navigation
-Page
-Quick Search
-Social Media Sharing
-Text
-Title
-Language Navigation
-Image

Form specific core components
-Form Hidden
-Form Options
-Form Text
-Form Button
-Form Container

When to Use the Core Components?

New Projects - New projects should always attempt to use Core Components.

Existing Projects - Recommendation is keep using the foundation components, unless a site or component refactoring is planned.

New Custom Components - Assess if an existing Core Component may be customized. If not, recommendation is to build a new custom component following the Component Guidelines.

Existing Custom Components - If your components work as expected, then keep them as they are.
If not, refer to "New Custom Components" above.

Foundation Component Support
Since the foundation components have served as a basis of so much project development over many versions, they will continue to be supported into the foreseeable future.

However, Adobe's development emphasis has shifted to the core components and new features will be added to them whereas only bug fixes will be made to the foundation components

Core Components Advantages

• 100% written in HTL.
• Apache 2.0 License.
• Allow versioning of components.
• GitHub
• latest features are supported, plus backward compatibility is also available.
• Unit test coverage > 80%

Steps to create a sample core components:

• Download and Install
• Create Proxy Components
• Load the Core Styles
• Enable the Components

Read More

Modern AEM Component Implementation Patterns

AEM Core Components

Proxy Components in AEM 6.4

See below video to understand more about creation of Core Components. 



See below video of Core Components walk-through.