Realistic examples of inheritance and composition in components

[au4liferz]

I'm a bit confused by the concepts of overriding, inheriting and composition to build components. It would seem that copying code directly from /libs/foundation would be strongly discouraged, (due to the issue that would result after upgrades), so I don't really want to consider that as as option. 

1. With inheritance, will I always have to completely re-write the javascript that provides the core functionality for the component? If so, what is the real benefit. Can I keep most of the functionality and selectively "override" to provide my own implementation for a particular behavior, and/or extend the functionality with additional javascript? If so, how do I go about  doing this? Just write a separate javascript file and call it as necessary, and then modify the presentation piece to accommodate the new behavior if necessary?

2. With composition, how do I go about combining existing components? Pull in and leverage/call the implementation, (i..e javascript, Java code etc.), and then write or modify the presentation module and dialog to accommodate all of the combined behaviors?

If you have any realistic examples/tutorials you could link, please do so.

[smacdonald2008]

". It would seem that copying code directly from /libs/foundation would be strongly discouraged"

Overlaying components by copying from /libs to /apps is best practice when working with AEM as discussed here:

https://docs.adobe.com/docs/en/cq/5-6-1/getting_started/first_steps_for_developers.html#Developing a new component by adapting an existing     component

When you upgrade - you bundle your app into a package then redeploy - this is how most ppl do it. 

Now for your question about inheritance - see this community content:

http://myadobecq.blogspot.ca/2013/02/creating-inherited-component-in-cq.html

[Lokesh_Shivalingaiah]

Overriding and Inheritance are used extensively in AEM and its purely depends on your objective.

1. Overriding - If you want to make the changes on the existing behavior of a component, then you can copy , paste to your project and do all your changes. This gives you the initial platform to build your own custom component. Due to this, your custom component feature are not affected when you port this onto different version of AEM

2. Inheritence - If you want all the feature as is from OOB but if you want to add some feature to it or override only part of it, then you use inheritence. ex: /foundation/components/page which will be used when we create a page component.

when it comes to 'Composition', we dont have anything called composition as such ! however, it depends on how modular you have created your components, dialog tabs etc. If you want the same feature ex tab in a dialog, or a component itself in another component we can refer the same which essentially act as inheritance !

[au4liferz]

Thanks for the responses. smacdonald, I've seen the series that you linked, and it was my first exposure to developing components, but it is a rather simple example and I'm having trouble translating it to actual components with more robust requirements. I still don't quite understand how I'd change a select piece of functionality that I wanted to override, or even how to extend. Would it be through development of separate javascript files that I could then call in the presentation layer, (as I was asking in the original post)???

[Opkar_Gill · Accepted solution]

Hi,

if this is Classic UI, then a couple of good resources I cam across previously are below. The second is the best I have come across for examples on creating and extending dialogs.

Regards,

Opkar

[1] https://docs.adobe.com/docs/en/cq/5-6/howto/components_develop.html

[2] https://docs.adobe.com/docs/en/cq/5-6-1/developing/widgets.html