search

adobe / aem-project-archetype

Maven template to create best-practice websites on AEM.
https://experienceleague.adobe.com/docs/experience-manager-core-components/using/developing/archetype/overview.html
Apache License 2.0
544 stars 419 forks source link

Document "best practices" for developers utilizing the "ui.frontend.general" package #379

Closed jkernMINITAB closed 4 years ago

jkernMINITAB commented 4 years ago

My team is new to AEM 6.5, and we're developing off of the latest version archetype with the "ui.frontend.general" feature enabled. By referring to this document, we have been able to utilize SCSS, JavaScript, WebPack and its static HTML file to experiment with implementing components.

However, what is the best-practice for developing these components while utilizing "ui.frontend.general"? Searching online for tutorials utilizing AEM with WebPack brings us links such as these, which while useful for 2017, does not apply today since it details how to bundle JavaScript/CSS directly with the component code in the "ui.apps" project. This is another AEM WebPack example that emphasizes the use of "ui.apps" instead of "ui.frontend.general".

While the WKND Project does cover utilizing "ui.frontend.general" a bit with SCSS, it unfortunately does not detail how to write modular JavaScript within "ui.frontend,general" for custom components. Referencing other Adobe documentation for client-libraries and JavaScript seems that it is only applicable to projects not utilizing "ui.frontend.general".

Over at the Core Components repository, they have a wiki with items that detail the basics of AEM concepts such as the delegation pattern. Having a similar wiki item on this repository regarding "ui.frontend.general", and a simple custom component with JavaScript, SCSS and reference HTL files would be immensely useful. While the beauty of "ui.frontend.general" is that it can be extended by developers to utilize a wide variety of tools, it is important that there is a clear structural and implementation definition of what the SCSS and JavaScript files should look like within the "ui.frontend.general" project before it is consumed and deployed to AEM.

godanny86 commented 4 years ago

Hi @jkernMINITAB thank you for raising this. Its true we can do a better job at addressing this. There is some documentation around the ui.frontend module documented here: https://docs.adobe.com/content/help/en/experience-manager-core-components/using/developing/archetype/uifrontend.html. Its true that the WKND tutorial doesn't have an example of a custom component with Javascript. However the full WKND reference site does have a few examples (although not many...) : https://github.com/adobe/aem-guides-wknd/blob/master/ui.frontend/src/main/webpack/components/form/sign-in-buttons/sign-in-buttons.js

jkernMINITAB commented 4 years ago

@godanny86, thank you very much for the direct link to an example within the finished "WKND Project" reference site; I noticed that you coded it yourself. :) Between reviewing official documentation and watching PluralSight videos, it honestly didn't cross my mind to use the finished project as a reference point!

I'll share the example code with my team so we can plan out our development efforts. Thank you for contributing the code, and for replying as well.

godanny86 commented 4 years ago

@jkernMINITAB no problem! And thank you for the credit but it may have been my colleague @davidjgonzalez who originally wrote that code ;) (I may have just been the merger).

We are planning on creating something like an "WKND A-Z" which would be an index of the various examples/samples that are in the reference code base but not covered in the step-by-step tutorial.

gabrielwalt commented 4 years ago

Closing this as it is being documented by the WKND project.