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.

  • January 2, 2025
  • 3 replies
  • 655 views

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

How dependecies are being loaded? 

This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
Best answer by SreenivasBr

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

 

3 replies

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

 

    PRATHYUSHA_VP
    Community Advisor
    PRATHYUSHA_VPCommunity Advisor
    Community Advisor
    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

      MonalikaKapoor
      Adobe Employee
      MonalikaKapoorAdobe Employee
      Adobe 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.
        Terms & ConditionsAccessibility statement

        Loading footer...