Creating new components with no inheritance VS Extending base components (Future Proofing)

[JoelLucuik]

Hi,

Some context:

I just started a contract at CIC (Govt of Canada). Helping give some guidance to Serge, the UI Designer here. He has 3 weeks experience with AEM 6.2. Newbie.

I worked for Adobe doing AEM Tech Support in 2013. Getting back up to speed.

Serge is creating components following the government WET standards.

Serge asked for a strategy on creating new components (with little inheritance I gather) VS extending base components. His concern is primary future upgrades (to 6.3), and 

Adobe not supporting the components he extends. "Future Proofing" it.

Do you have any recommendations here? 

Thanks,

Joel

[smacdonald2008 · Accepted solution]

Hi Joel - He may want to look at the concept of Overlaying Components to modify out the box components to meet his requirements. 

https://docs.adobe.com/docs/en/aem/6-2/develop/platform/overlays.html

Overlaying is a best practice when you want to extend ootb components.  

[JoelLucuik]

Thanks Scott.

[kautuk_sahni]

What is a AEM overlay/override VS Extend a component?

Overlay/Override Component:
Creating a custom component by copying a foundation component to your project and modifying it based on the need. For example you copy image component from “/libs/foundation/components/image” to your site folder “/apps/testsite/components” by doing so you are creating a new component with is exactly same as Image component. After copying you can make changes to component based on your requirements. But the problem with this approach would be that if you are upgrading CQ then new version of CQ might have new implementation of “/libs/foundation/components/image” component than those changes will not be reflected in your “/apps/testsite/components/image” component, so you have to manually make those changes in custom component.

Extend Component:
Creating a custom component manually by creating all necessary nodes and setting value of “sling:superResourceType” property as “/libs/foundation/components/image”. By doing this you inherit all the feature of image component, even after upgrade you still inherit the features of image component.

Also please read documentation :- https://docs.adobe.com/docs/en/aem/6-2/develop/components.html

I hope this would help you.

~kautuk

[JoelLucuik]

Thanks Kautuk for the thorough reply.

Sorry I am still waiting on getting a login here, so I can't try this stuff just yet.

Q: What is the advantage of overlay over extend? Docs say in Overlay you "Only redefine what is actually required". Are there limits to this? 

From what I've read, extend means you want most of the inherited functionality. 

So, for example, if I have component (main.jsp, child.jsp), and main.jsp includes child.jsp and I extend it to create myComponentA (“child.jsp”). Will myComponentA render properly?

We are debating on a conditional  includes in component(main.jsp), versus and overlay approach. And the team is still learning AEM.

Thanks

Joel

[smacdonald2008]

Overlay you have more control - you move the given component from libs to apps and then you have control over the content under /apps. You can change app logic, the dialog, etc, 

Joel - if you want to have a call - i can help your team come up to speed with AEM. email me - scottm@adobe.com