Introduction to AEM core components

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 the 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 the latest technology and follows 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 forms components are available. The hierarchy of core components how it is derived from wcm components is shown in the 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. I 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 script.
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

Anyone 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's 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 to 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 contain 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 the MVC architecture approach. Below screenshot will provide you a better understanding:-

 

Core components list in aem:-
Core components list in aem 6.3 consists 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 the most frequently used component so I will try to cover it.
Click Here to Learn how to override core components.