Powering Adobe MAX with App Builder and I/O Runtime

Now is an exciting time for extensibility at Adobe. We recently announced the general availability of Adobe Developer App Builder for all Adobe Experience Manager customers. Formerly Project Firefly, App Builder is our unified third-party extensibility framework for integrating and creating custom experiences to extend Adobe solutions in minutes.

In this article, we’ll look at how we successfully used App Builder, in combination with Adobe’s serverless platform I/O Runtime, to support features on Adobe.com during our virtual Adobe MAX conference in October. Providing personalized session and track recommendations for each original visitor, the application was able to dynamically scale to support MAX traffic without any incidents.

To achieve this, the Adobe.com team created a client-side React component, called the Chimera Card Collection, which powers card collection experiences across Adobe.com and primarily focuses on events such as Adobe MAX. Its “as-a-service” nature enabled us to cross-post event information across disparate codebases and surface recommended event content on relevant product pages.

︎Card collection component showing personalized content via an integration with Target activities and Target Recommendations

The beauty of this was the incredible amount of traffic we were able to handle, and the system scaled accordingly without any outage: Chimera served over nine million responses during Adobe MAX, peak volume was 153 requests per second at the end of the first keynote, and requests to Chimera increased by 4.5 times in comparison to Adobe Summit, just half-a-year prior — with zero performance issues.

So how did this all work? Let’s take a look at the technology behind the Chimera Card Collection.

Using Adobe I/O at scale

While the backend was successfully used at Adobe Summit in March 2021, for this year’s Adobe MAX we introduced an additional caching layer on the app level to reduce the load on the underlying persistence layer that we were integrating with. By leveraging Azure Blob storage via the out-of-the-box Adobe I/O Lib State library (a Node.js JavaScript abstraction on top of distributed/cloud DBs that exposes a simple state persistence API), we were able to drastically reduce response times and considerably increase overall throughput.

Chimera Card Collection is a part of Project Chimera, a broader “content-as-a-service” (CaaS) project that allows disparate Adobe Experience Manager (AEM) instances at Adobe to contribute and share content in the form of cards across AEM boundaries. Adobe MAX was the first big reveal for the project’s UI component built into Dexter, an AEM implementation aimed at developing design-agnostic components that enable authors to assemble a design experience regardless of the site visitor or audience type.

︎An overview of all available MAX event sessions, using a content type tag to only show event sessions. The card collection component features a sidebar with additional client-side filtering capabilities

By embracing existing AEM authoring concepts, we transparently added an integration with Chimera to enable content authors to easily contribute content entities to a central repository for subsequent consumption by other surfaces. Since MAX, more and more projects on Adobe.com are adopting CaaS and continuously formulating new use-cases with CaaS at the core.

App Builder and I/O Runtime: the Swiss Army knife for developers

The API services powering the Chimera Card Collection React component are entirely built and deployed with App Builder. The ease-of-use and self-service nature of the platform, which uses Node.js as the primary language, enables both front and back-end developers to quickly build, deploy, and test API services. Paired with a CI/CD pipeline leveraging automation using CircleCI, deployments are really easy.

︎An overview of all event session speakers, filtered by a separate speaker content-type. Clientside filtering capabilities enabled on component level

The ability to easily and efficiently develop and deploy REST API endpoints for client-side components is huge for this solution. App Builder and I/O Runtime have become an integral part of our tool belt. The full support of the I/O Runtime team during crunch times right before major virtual events like MAX then helps us find the right scale to provide a smooth and failure-free experience.