Create a universal component inventory with composites

28 March 2017
Mateusz Luczak
Frink_Cognifide_2016_HeaderImages_0117

Components are the building blocks of websites in almost all modern content management systems. It doesn't matter if you are a Drupal, Sitecore or Adobe Experience Manager user, if you want to provide new functionality for a newly created page, you need to develop components. So when starting a project from scratch, you build components for every functional eventuality, giving authors options for every piece of content. 

Consequently, your component inventory grows from page to page, so when you finally complete a website, you end up with a pretty large inventory. And that’s only for a single website! What happens when you need to build another one? Are there any components from that inventory that you can reuse? Or will you need to introduce fifty new components? 

The simple answer is this - not if you are using our AEM accelerator, Zen Garden. 

Atomic components

There are many ways to approach component creation on a website. The simplest is to start with a complete page design and divide it into smaller chunks, usually determined by the desired author experience. This approach will definitely result in a component inventory, but will these components  actually be reusable? 

To ensure that they will be, always take a step back and look at the page without branding and design. Instead, look deeper at the core functionality of the components. One way of abstracting component functionality is to strip it right back and look at how flexible the potential HTML markup could be.

Atomic component - single clear functionality, no styles attached

Atomic component - single, clear functionality, no styles attached

Let's think about a header component. Usually it is configured with a logo and a list of links. If the header is defined as a single component could it be reused on other pages? Only if they also happen to have both a logo, a list of links and nothing else. Breaking the chunks down into smaller, individual components - one image, one list of links - gives you a lot more future flexibility. 

Using the atomic approach we focus solely on the functionality of the building blocks of the website. We can easily distinguish images, videos, text blocks or a list of links as really simple blocks with clear and unique responsibilities. For instance, an atomic carousel component is just a component that creates a content cycle - whatever content you put inside it. Components defined using the atomic approach are highly reusable - let's face it, every website needs text blocks or a list of links. Back to our example - the logo in this header is just an image block styled differently - different form but same functionality.

Functionality over form

Frank Lloyd Wright said that form and function are one. Well, he clearly never built a website! Yes, we could build new components for every new design or image or text, but we would only end up with many components doing the same job - just looking a little bit different.

Same functionality, different form

Same functionality, different form

However, we are not suggesting compromising on design. Thanks to the power of CSS styles and Javascript we can make the same component look totally different. If your image needs to be a different size, be realigned, have a border around,  you just need some additional CSS class in the component's markup. And this is not limited to still images. If your atomic carousel needs a different animation - you can still achieve this using CSS class. In an ideal world you would probably like to demonstrate various stylings for your atomic components in the inventories of different websites. This can also be achieved using the Zen Garden feature, Variants.

Composite components

In reality, you rarely use single atomic components on final pages. Possibly simple components such as image or text blocks would be used on their own but a carousel component, for example, would always contain various elements. You may take a carousel and insert an image. So now you are using two atomic components to form an entirely new component - a composite of image and carousel. By using the carousel with an image you are forming a new logical component - an image carousel. 

Two atomic components make one composite component

Two atomic components make one composite component

In this way we can quickly create new functionality. A new carousel sliding text block is required? Put the text component inside the carousel and the new composition can be made just by providing new CSS. There are unlimited possibilities when it comes to combining components. Do you want a carousel that displays video? Not a problem! There are so many possibilities when your inventory contains reusable atomic components, especially when you can resize those components in the author interface.

What about the author experience?

Inevitably, this flexibility can come at a price. While, you may end up with an inventory containing 30 instead of 100 components, authors will need to do slightly more work. Where previously they may have needed to configure only really specialized components, they may now need to do the same for several, depending on the complexity of the composition. Instead of simply dragging and dropping an image into a carousel, the carousel will first need to be inserted, followed by the corresponding image for every carousel slide. Every component that needs to be inserted is an additional configuration effort and that’s undoubtedly a drawback of this approach. 

That's why we're giving you the ability to define and reuse composite components between pages in the next release of Zen Garden.  This will significantly reduce authoring time as composites can be dragged and dropped from the side panel just like regular components. Problem solved!

And no author could argue with the consistency that this approach brings. Consistency is one of the most important UX principles and by using the same components for configuring images, videos, or text you are enforcing an overall consistency. 

We'll be announcing this new Zen Garden release featuring composites very soon  - so stay tuned.