AEM Core Components can help you significantly reduce development time when you are using AEM for building websites and apps. Read this article to learn more.

Discover the Benefits of AEM Core Components

AEM (Adobe Experience Manager) is a comprehensive CMS offered by Adobe. By using this solution for creating forms, mobile software solutions, and websites, you can ensure a convenient and straightforward way to manage your digital assets and marketing content in the future. Given the wide range of possibilities that businesses can get with it, it is absolutely clear why AEM implementation services boast high popularity today.

To help companies to optimize the process of website creation, Adobe offers a set of ready-to-use, standardized and reusable components. They are known as AEM Core Components.

In this article, we are going to explain how you can apply them for delivering your websites faster.

What are the Core Components for AEM?

This collection of components became available in the AEM 6.3 version. We can define them as separate self-contained units that can realize some particular functionality for publishing content on pages of a website.

In general, AEM Core Components are intended for streamlining the design process without deteriorating the final product quality.

The idea behind their introduction is based on the following principle. Those who have already built websites or have a general understanding of web design, definitely know that a lot of UI patterns and elements are common in many projects.

When you are creating websites, you always need to add images, text content, etc. It means that you have to repeat multiple steps in the development of different websites again and again. That’s the issue that AEM Core Components can help you to deal with.

The list of Core Components is rather extensive. Among them, there are such components as

• Text
• Title
• Paragraph system
• Image
• Teaser
• List
• Toolbar
• Button, etc.

All the components are very flexible and you can use them for designing absolutely different layouts. They can be customized, and enriched with new functionality. Moreover, given the fact that Core Components are modular, it is possible to use them for building new components on a local instance.

This collection of components is open-source and is available on GitHub.

Architecture of AEM Core Components

There can be different approaches to explaining the architecture of Core Components. We offer you to have a look at how they are built by breaking components down into two parts: backend and frontend.

The frontend part includes:

• JS and CSS. They help to style the elements.
• HTL. It unites HTML elements with backend content.

Backend contains:

• View (logic). It is used for preparing the frontend content.
• Edit dialog and component configuration. They are used by designers and developers for identifying what content will be displayed, what elements will be editable, and what options for editing will be available.
• Content model. It is important for defining what content should be kept in a component.

How to use AEM Core Components

When you want to optimize the process of website creation with the help of Core Components, you need to understand how to work with them. Below you can find a four-step guide that will help you to use them in your project.

1. Download and install the latest version of the AEM ready-made components. This step is relevant only in those cases when you run AEM on-premises. When you use AEM as a Cloud Service, you will automatically get access to the Core Components.
2. Create site-specific (proxy) components. It is important to avoid direct reference to the Core Components from the content. And the creation of so-called proxy components will help you to do it. They shouldn’t contain any data. Each of them will just indicate a particular component.
3. Use the Core Styles. If you still do not have a Client Library with all the JS and CSS files that you will need to use for building your website, it is high time to create it. Then, the dependencies to the AEM Core Components should be added.
4. Enable components. To fulfill the fourth step, you should find the Layout Container in the Template Editor and open the Allowed Components lists. In this list, you should choose the site-specific components that you’ve created at step number 2 and apply the changes. If everything is done correctly, you will get the possibility to work with new components from the edited template.

AEM Core Components Best Practices

One of the most important points about this collection of components is that you can customize them for your needs. Thanks to this possibility you can make sure that you will be able to achieve the desired results without devoting a lot of time to building all the features fully from scratch.

But to be sure that all the introduced changes won’t prevent the components from being seamlessly integrated, you need to bear in mind a couple of important rules.

1. Do not make any modifications directly in the code. Instead of that, it is recommended to extend the logic or the content model of the component that you want to adjust to your requirements.
2. Apply CSS styles when you need to change any of the AEM Core Components. As the components have a standard naming convention and semantic markup that are well-known to the majority of frontend developers, this task usually does not cause serious difficulties.
3. If you introduce any updates to the code, bear in mind that all modifications of this kind are not covered by the Adobe support program.

Features and Characteristics of AEM Core Components

Let’s shortly summarize the key things that you should know about the Core Components.

• They are fully production-ready. You can start using them just as they are.
• They are SEO-friendly. With them, you can build efficient websites that will attract the highest traffic.
• They are trackable. You can monitor all steps of a user journey.
• You get access to a design kit. You can easily create wireframes that can be styled in accordance with your demands.
• They have AMP support. Thanks to it, you can ensure seamless mobile experiences for users.

Instead of a final word

As you can see, AEM and its Core Components can be a good alternative to building websites from scratch. Thanks to their capacities and characteristics, businesses can not only optimize the time and resources needed for creating their sites but also reduce further expenses on the support and maintenance of their solutions.