How AEM Core Components Simplify Website Development

AEM WCM Core Component has been core of its developments since their introduction 2017 for AEM 6.3. Before that there used to be multiple out of the box components also know as foundation components.

Adobe has always recommended that the list of components in a project should be minimum and the design of component should cater re-usablity as much as possible.

After multiple release and evolution over so many release of AEM Adobe has reach a list of 69 components which are supported on all type of environment whether i.e. AEMaaCS, on AMS and on-premise.

These components are production ready, Versatile, Configurable, responsive, SEO-Friendly, AMP Support, Themeable, Localizable and open-sourced.

List of components:

Following are 5 broad categories and their available component according to latest release of Core Component Library:

• Core Structure: Breadcrumb, Language Navigation, Navigation, Page, Table of Contents

• Core Content: Adaptive Form - Embed, Accordion, Button, Carousel, Container, Content Fragment, Content Fragment List, Core Form Container, Download, Embed, Experience Fragment, Image, List, PDF Viewer, Progress Bar, Search, Separator, Tabs, Teaser, Text, Title

• Core Form: Form Button, Form Hidden, Form Options, Form Text

• Commerce: Commerce Content Fragment, Product, Product Teaser, Product Carousel, Related Products, Product List, Search, Category Carousel, Featured Category List, Commerce Teaser, Navigation, Breadcrumb, Experience Fragment, Forms And Communications Portal, Drafts and Submissions, Link, Search And Lister

• Adaptive Forms: Aem Embed Container, Vertical Tabs, CAPTCHA, Fragment, Check Box, Terms and Conditions, Accordion, Button, Check Box Group, Date Picker, Dropdown List, Email Input, File Attachment, Footer, Form Container, Header, Image, Number Input, Panel, Radio Button, Reset Button, Submit Button, Switch, Tabs on top, Telephone Input, Text, Text Input, Title, Wizard

Core component support different phase of site development:During design cycle:

• A site can be planned using AEM out of the box component using Adobe XD.

• The components are responsive and hence can be used in design of all platforms (Desktop, Tablet, Mobile)

• The components follow BEM CSS Markup convention hence user can think of theming them according to there global design. The concept of Style systems in AEM also allow these components to have different look and feel at different pages in same site.

During development cycle: The Core Components are fully customizable and can be extended for site-specific functionality. This flexibility is essential during AEM development, allowing teams to tailor the components to meet unique project requirements without building from scratch.During SEO Planning:

• If your want your site to be on the top of the search engine list you dont have to worry about the impact of using Core components as they are SEO friendly right out of the box.

• You can also configure at template level in order to allow author to be able to use them or not.

• The components have built-in support for the AMP standard, accelerating your mobile experiences while keeping your lighthouse performance score high.

Core components are also open-source and anyone can support in fixing open issues. TO THE NEW (in short TTN) devs has been actively involved in fixing issues with Core components in the past

TO THE NEW contribution and it’s custom component library:

TTN team also maintain internal practice of developing future proof reusable components to help our clients with quick delivery of their own sites. As a team offering Adobe Experience Manager consulting, TTN also maintains an internal library of future-proof, reusable components. The common component built by our team are mostly related to common usecase across different challenges that we face eg. Search component (content ingested using OOTB AEM or Solr or Elastic Search), Login components.

Julia Haynes is a Business Consultant. She likes reading new books and spend time with her loved ones in her spare time. Her writings focus on cutting-edge technologies and the latest trends and topics like digital marketing, technology.