Component Level Client Library vs ui-frontend Module having | Community
Skip to main content
Level 5
April 16, 2024
Solved

Component Level Client Library vs ui-frontend Module having

  • April 16, 2024
  • 2 replies
  • 594 views

Hi Team

 

Currently we are not having any frontend codebase in ui-frontend module level ,only we maintaining at  component level . Is there any recommendation or advantages handling ui-frontend module level instead of component level  for better performance.

 

Regards

Vara

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 EstebanBustamante

Hi, 

Short answer: Yes, the ui.frontend module exists for a reason. There are several advantages to using it over simply dropping all the CSS and JS into your app's directory. I will highlight some of them:

  1. Modularity: Separating frontend code into its own module allows for better organization and modularity within the project structure.

  2. Clear Separation of Concerns: Developers can focus solely on frontend development without being encumbered by backend complexities, fostering a clear separation of concerns.

  3. Improved Collaboration: Separate frontend and backend codebases facilitate collaboration among frontend and backend developers, as they can work independently on their respective layers.

  4. Flexibility: With frontend code decoupled from the backend, developers have the flexibility to use different frontend frameworks, libraries, or tools based on project requirements.

  5. Scalability: Modular frontend code is easier to scale and maintain as the project grows, allowing for more efficient development and updates.

  6. Reuse: Frontend components or assets developed in the ui.frontend module can be easily reused across multiple AEM projects or modules.

  7. Faster Development: By isolating frontend development, developers can iterate and deploy changes to the user interface more quickly, accelerating the overall development process.

  8. Use of new technologies: Taking advantage of webpack plugins and loaders you can do easier Typescript, Testing, ES6, etc.


Please go through these links which can give you more light:

https://drewrobinson.com/blog/aem-frontend-module-overview

https://unlocklearning.in/aem-frontend-development-with-ui-frontend-module/ 

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

 

Hope this helps

2 replies

EstebanBustamante
Community Advisor and Adobe Champion
EstebanBustamanteCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
April 16, 2024

Hi, 

Short answer: Yes, the ui.frontend module exists for a reason. There are several advantages to using it over simply dropping all the CSS and JS into your app's directory. I will highlight some of them:

  1. Modularity: Separating frontend code into its own module allows for better organization and modularity within the project structure.

  2. Clear Separation of Concerns: Developers can focus solely on frontend development without being encumbered by backend complexities, fostering a clear separation of concerns.

  3. Improved Collaboration: Separate frontend and backend codebases facilitate collaboration among frontend and backend developers, as they can work independently on their respective layers.

  4. Flexibility: With frontend code decoupled from the backend, developers have the flexibility to use different frontend frameworks, libraries, or tools based on project requirements.

  5. Scalability: Modular frontend code is easier to scale and maintain as the project grows, allowing for more efficient development and updates.

  6. Reuse: Frontend components or assets developed in the ui.frontend module can be easily reused across multiple AEM projects or modules.

  7. Faster Development: By isolating frontend development, developers can iterate and deploy changes to the user interface more quickly, accelerating the overall development process.

  8. Use of new technologies: Taking advantage of webpack plugins and loaders you can do easier Typescript, Testing, ES6, etc.


Please go through these links which can give you more light:

https://drewrobinson.com/blog/aem-frontend-module-overview

https://unlocklearning.in/aem-frontend-development-with-ui-frontend-module/ 

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

 

Hope this helps

Esteban Bustamante
EstebanBustamante
Community Advisor and Adobe Champion
Community Advisor and Adobe Champion
May 27, 2024

@varaande 

Did you find the suggestions from users helpful? Please let us know if more information is required. Otherwise, please mark the answer as correct for posterity. If you have found out solution yourself, please share it with the community

 

cc: @kautuk_sahni 

Esteban Bustamante