AEM in 40 Days
CalendarPhase 3 · Building with the Archetype

Day 13 of 40

Core Components

The proxy pattern, versioning, and why you never fork them

~40 min read2 videos2 source pages

By the end of today you should be able to

  1. Explain what Core Components are and why Adobe maintains them
  2. Implement the proxy pattern and say why you never copy a Core Component
  3. Explain Core Component versioning and what a version bump means for you
  4. Use the Components console to see what is available and where it is allowed

What Core Components are

Core Components are Adobe's maintained, open-source library of standard components: Title, Text, Image, Teaser, List, Breadcrumb, Navigation, Carousel, Container, Experience Fragment, Content Fragment, Embed, Form fields and more. They ship accessible markup, sensible authoring dialogs, Style System support, the Adobe Client Data Layer, and responsive image handling.

They are a real dependency of your project, versioned in pom.xml and developed at github.com/adobe/aem-core-wcm-components. The archetype wires them in for you.

The default position

Before writing a component, check whether a Core Component already does it. Most "custom" components in the wild are a Core Component plus a bit of CSS. Every component you do not write is one you do not have to maintain, make accessible, or fix.

The proxy pattern

You never use a Core Component directly by resource type, and you never copy its code. Instead you create a nearly empty component in your own project that inherits from it:

/apps/wknd/components/title
  .content.xml
    jcr:primaryType = "cq:Component"
    jcr:title = "Title"
    sling:resourceSuperType = "core/wcm/components/title/v3/title"
    componentGroup = "WKND - Content"

That is the whole component. It has no HTL of its own; everything is inherited. What this buys you:

  • Your own resource type. Content references wknd/components/title, so you own the contract with your content.
  • Upgrades become a one-line change. Moving from v3 to v4 is editing sling:resourceSuperType — your content does not move.
  • Selective override. Add a title.html and you replace just the markup. Add a dialog snippet and you extend just the dialog. Everything you do not override keeps coming from Adobe.
  • Your own component group, so authors see "WKND - Content" rather than a mixed list of Adobe internals.
Why copying is a trap

Copy a Core Component into /apps and you have forked it. You now own its accessibility, its bugs, and its future — and every Adobe improvement passes you by. It is the single most expensive shortcut in AEM development.

Versioning

Core Components are versioned in the resource type path: .../title/v2/title, .../title/v3/title. Adobe's contract is that a version's behaviour and content structure stay stable, and breaking changes arrive as a new version alongside the old one.

So a major bump is not automatic. You change your proxy's sling:resourceSuperType deliberately, then test — because a new version may render different markup or expect a slightly different content structure. Old versions remain available, so migration happens component by component on your schedule.

The Components console

At Tools → General → Components you get a browsable list of every component on the instance. For each one you can see its title, group, resource type, the supertype it inherits from, and — usefully — which templates and policies actually allow it. When an author says "I can't find the Teaser component", this console tells you whether it exists, whether it is in a visible group, and whether the template's policy permits it.

Where custom code still belongs

You will still write components. The realistic split:

  • Proxy only — Title, Text, Image, Breadcrumb, Navigation. Just inherit.
  • Proxy plus overrides — Teaser or List where you need different markup or an extra dialog field.
  • Genuinely custom — something with no Core equivalent: a product finder, an interactive map, a domain-specific widget. Day 21 builds one.
Today's takeaway

Proxy, do not copy. A proxy is a cq:Component node with a sling:resourceSuperType and a component group — and that tiny file is what keeps Adobe maintaining your components for you.

Watch

Adobe's own videos for this topic. They load only when you press play.

Core Components
Component Console

Read on Experience League

The primary sources these notes are drawn from.

Your notes

Saved automatically to this browser.

Check yourself

10 questions on today's material. 80% to pass.

Take the quiz