Suggest few resources to understand the aem frontend from end to end. | Community
Skip to main content
donquixote_dofl
donquixote_dofl
Level 2
January 2, 2025
Solved

Suggest few resources to understand the aem frontend from end to end.

How components are being loaded? 
How the clientLib works? Why do styles and js are being minified?

How dependecies are being loaded? 

SreenivasBr
SreenivasBrAccepted solution
Level 4
January 2, 2025

Some resources from Adobe docs are below -

How components are being loaded? - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/components/developing-components

How the clientLib works? How dependecies are being loaded? - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/introduction/clientlibs

Why do styles and js are being minified? - There is a configuration called Adobe HTML Library Manager which is responsible for minification. - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/introduction/clientlibs#using-preprocessors

 

View reply

3 replies

MonalikaKapoor
MonalikaKapoor
Employee
January 6, 2025

Hi @donquixote_dofl, 

To understand the AEM on-premise frontend, focusing on component loading, ClientLibs functionality, and minification of styles and JavaScript, you may consider these resources:

  1. Foundation Components: Learn about the modular nature of AEM components and their role in content presentation Read more.

  2. Component Development: Explore the management of CSS and JavaScript in AEM, including client library organization and dependencies Read more.

  3. Client-Side Libraries: Understand how clientlibs aggregate CSS and JS for efficient delivery in AEM Read more.

  4. Front-End Workflow: Learn about deploying and managing CSS and JS using client-side libraries and webpack in AEM Sites Read more.

  5. How to Code for the AEM Style System: To have a technical deep dive into the CSS and JavaScript used to style AEM components using the Style System Read more

    I hope this helps! 🙂

    Please let me know if you’re looking for anything else specific or need further assistance.
Translate
    PRATHYUSHA_VP
    PRATHYUSHA_VP
    New Participant
    January 2, 2025

    Hi @donquixote_dofl 

     

    AEM projects can be implemented using both headless and headful models. Please refer below - 

     

    https://experienceleague.adobe.com/en/docs/experience-manager-cloud-service/content/implementing/developing/headful-headless

     

    For resources related to AEM components it is recommended to go through adobe docs. There is a detailed explanation how clientlibs, components rendered on the page -

     

    https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/components/components-basics

     

    https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/including-clientlibs

     

    https://medium.com/@toimrank/aem-clientlibs-css-and-js-6fda52c4e26f

     

    If you want to develop front end project using AEM archetype using webpack -

     

    https://experienceleague.adobe.com/en/docs/experience-manager-core-components/using/developing/archetype/front-end

     

    https://medium.com/@toimrank/aem-ui-frontend-module-complete-guide-265175c540b0

     

     

    Hope this helps

     

    Thanks

    Translate
      SreenivasBr
      SreenivasBrAccepted solution
      Level 4
      January 2, 2025

      Some resources from Adobe docs are below -

      How components are being loaded? - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/components/developing-components

      How the clientLib works? How dependecies are being loaded? - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/introduction/clientlibs

      Why do styles and js are being minified? - There is a configuration called Adobe HTML Library Manager which is responsible for minification. - https://experienceleague.adobe.com/en/docs/experience-manager-65/content/implementing/developing/introduction/clientlibs#using-preprocessors

       

      Translate
        Terms & ConditionsAccessibility statement

        Loading footer...