Zen Garden Bridge: connect with anything, use data anywhere

10 April 2018
Mateusz Luczak
Frink_Cognifide_2016_HeaderImages_0117

Websites are becoming more and more complex. That's a fact. If you think about the functionality of your favourite site 5 years ago and compare it to today, you will notice how much more there is going on. Just scratching the surface — embedded videos, forms, notifications, social capabilities, live feeds, live chats, event calendars, offers and on top of that,  your own profile with - hopefully - personalised preferences. Keeping a user hooked these days requires more than just great content, so modern experiences become hubs displaying data and media coming from multiple services and providers.

At Cognifide, that's our bread and butter! Delivering complex and multi-layered experiences is what we do every day. But we also thrive on making things easier and better for the experience makers. And Zen Garden is just one of the tools that enables our clients to create richer experiences, more quickly.

This week we released Zen Garden 6.4 to coincide with the release of Adobe Experience Manager 6.4. This release incorporates an important new addition - let's take a look at how these kind of external service integrations work in AEM, with this clever new feature.

The real price of user engagement

In 2017, based on our customer projects, we discovered that delivering these kind of integrations consumes some 35% of total development budgets. It's not a new carousel component or fancy splash animation that eats the budget, but getting the data and displaying it on the website.

Why is that? In AEM, all experience functionality available to the user exists as a component. When you want to display, for example, currency exchange rates on your website, you need a dedicated component. This component is designed to retrieve and display the data. For references purposes, let's call this component the Currency Rates Table. But what about the next point of integration that you would like to surface on a site? Another new component? And do you then need another one for each bit of external data or media to be surfaced? 

Monolitic integration example

Monolithic integration — a single purpose component displaying data

If this is the case, when you crunch the numbers and add up the spend on new components, it's easy to see where that 35% comes from. But it's not money well-spent. Producing a lot of specialised components doesn't provide greater flexibility. Data always needs to be presented in the same way as it was designed during development.

You'll also end up with a bloated component inventory. With many complex pages on one site, you could end up with hundreds of specific, single-task components. This is an awful lot to develop and maintain during the lifecycle of the platform. So why not take a different approach? Maybe we don't need any new components at all...

Use data anywhere

So, we want to keep our component inventory lean. How do we achieve multiple different data integrations? Looking at a typical integration approach, it's easy to see the benefit of abstracting the data integration out of the components.

At Cognifide, we're great believers in the concept of universal and atomic components (learn more about this concept here), where the need for a component is defined solely by functionality. But the origin of data feeding the component isn't a different functionality. An image component always presents a picture to the user, it makes no difference whether this image is coming from AEM assets, a PIM or from social media. Back to our previous example — you wouldn't find a Currency Rates Table component in a well-defined platform component inventory. Instead you would find one single Table component. This prevents countless reinventions of the same functionality doing something a little bit different behind the scenes.

How do we achieve the abstraction of the data? We introduce a centrepiece that will manage the integration in a single place, so an expensive integration is done once, but can inject the data into all necessary, regular components.

The missing centrepiece

In the image below, each component is being configured with data. Our image component has properties like an image path and an image title. In order to direct the traffic of specific data into components, it needs to be injected into specific component properties. In some cases you may want all the properties to be taken from the integration, but sometimes - as in our image - you may wish to select. 

Abstract data injected into components

Abstracted approach — a single source of data is used across atomic components in different ways

This centrepiece needs to be able to define where exactly the data should and shouldn't be injected to maximise the reusability of existing components. Think about all the possible combinations with the power to not only inject the data anywhere on the page, but also arrange it internally and mix it with curated content within components.

We decided to build this centrepiece. This is where Zen Garden Bridge comes into play. It is a brand new Zen Garden module, designed to allow any data source to connect to AEM and to use retrieved data anywhere on the page, without the need to create new components. And what is most unique about Bridge is that data is injected directly into the component properties through the authoring interface.

Integrate on the fly

As Bridge uses the authoring interface to control the data, business users, rather than just developers, can manipulate the way in which the data is presented. Let's go back to the Currency Rates example. In non-Bridge implementations any change to the component or data layout would need development work, delaying delivery. With Bridge you can simply take the currency data and inject it into different components using something as simple as Rich Text or, another Zen Garden feature, a Block (learn more about Blocks here) that will also serve the purpose. Something that used to be a development piece can now can be achieved cheaper, faster and without bloating your component inventory. Developing engaging and sophisticated websites through integrations in AEM has never been easier.

 

Zen Garden 6.4 Opal - Find out more

 

Want to learn more how Zen Garden Bridge works? Or do you want to see how business users can easily inject data? Stay tuned for more on Zen Garden Bridge by subscribing to our blog using the 'subscribe for updates' form on this page. Or use the link above to see the full release notes for Zen Garden 6.4.