overlay/overriding v/s extending of components in AEM [duplicate]

Question

What is the difference between extending a component and overlaying a component. Can someone please explain with developer point of view.

Answer 1

Overlay 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/Override Component:

Creating a custom component manually by creating all necessary nodes and setting value of “sling:resourceSuperType” 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.