Component Level Client Library vs ui-frontend Module having

[varaande]

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

[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