AEM core components overview

AEM core components are introduced in aem 6.2 but are strongly recommended to use from aem 6.3. The main purpose of developing aem core components in aem is to make extensible components in aem that are secure, robust, version-able and uses latest technologies.

AEM 6.3 comes up with a demo site we.retail to showcase the power of core components and best practices to use the. In this tutorial we will see :-

Core components overview.
Advantages of using core components over foundation components.
Core components Architecture.
Core components list in aem.
Extend/Overrides core components in aem.

Core components overview:-

Components that we use for Website development in aem either custom components or out-of-the-box components are known as web content management (WCM) components. The purpose of creating WCM components is to speed up the process of developing a WCM website in aem that uses latest technology and follow best practices and coding standards.

There are around 70 Foundation components that are available in aem and around 12 core components out of which 7 are page authorable components and 5 are form components are available. The hierarchy of core components how it is derived from wcm components is shown in below figure:-

Note:- Core Components require AEM 6.3 and Java 8. Core Components do not work with the Classic UI.

Advantages of using core components over foundation components:-

I have tried my best to consolidate all major differences between core components and foundation components in aem. Hope it helps you in understanding what was the need of introducing core components, why foundation components are deprecated.

Core Components	Foundation Components
100% written in HTL. No awful JSPs and scriplet.	Business Logic placed inline in JSP as scriptlets.
Unit test coverage > 80%.	No testing coverage with unit tests
All latest features are supported, plus backward compatibility is also available.	No consistent support of latest AEM features like TouchUI or Editable Templates
Allow versioning of components.	Versioning of components not available.
Apache 2.0 License.	Proprietary of Adobe
Any one can contribute and enhance the code using GitHub Pull requests.	Not possible as the code is shipped under libs with aem.
Technology Used:- Logic :- Sling Models Scripting :- HTL CSS :- BEM (Block Element Modifier) JSON :- Sling Model Exporter XSS Protection :- HTL UI Dialog Support :-TouchUI (Coral3)	Technology Used:- Logic :- JavaScript Use-API Scripting :- JSP, HTL CSS :- Custom JSON :- Default Get Servlet XSS Protection :- Manual UI Dialog Support :- ClassicUI, TouchUI (Coral2)

Core components Architecture:-

From an author point of view components are broken down into three parts structure, initial and policies.

Structure contains the resources that will be forced on each page to be present, and that the page author won’t be able delete, like for instance the page header and footer components.
Initial contains the initial content that will be duplicated to the page when it is created.
Policies contains for each component the mapping to a policy, which is the component’s pre-configuration. This mapping allows policies to be reused across templates, and therefore to be centrally managed.

Core components in aem follow MVC architecture approach. Below screenshot will provide you better understanding:-

Core components list in aem:-

Core components list in aem 6.3 consist of 12 core components out of which 7 are page authorable components and 5 are form components as shown below:-

Page Authorable core components:-

Page
Breadcrumb
Title
Text (RTE)
Image
List
Sharing

Form core components:-

Container
Text field
Options field
Hidden filed
Button

In our coming tutorial we will see how to extend a core component in aem. As RTE component is most frequently used component so i will try to cover it.

Click Here to Learn how to override core components.

Spread the love

AEM CQ5 Tutorials