How Next-Gen Composability makes AEM development cloud-native

Adobe Next-Gen Composability (also known as AEM Franklin, or Project Franklin) is an innovative new feature of AEM Sites that focuses on enabling peak web performance and seamless collaboration for teams to edit and publish content. You may have heard about Next-Gen Composability from the Adobe Summit in Las Vegas earlier this year – and for good reason. Next-Gen Composability represents a paradigm shift in content management, making AEM cloud-native for development processes, scaling, and more.

Last time, we covered how Next-Gen Composability reimagines content management for marketing teams. So what are the technical implications of this new feature?

From AEM Sites to Next-Gen Composability in 3 weeks at Cognizant Netcentric

Cognizant Netcentric was among the first to get our hands on Next-Gen Composability by migrating our own website from a typical AEM Sites setup to Next-Gen Composability. Despite the major changes in the tech stack and the need to implement nearly the entire website from scratch, we went live with our new NGC setup within 3 weeks from the first kick-off to switching DNS entries. This meant the newly launched website was in perfect congruence with the former AEM implementation, with vast improvements in page load times, zero editorial overhead, and more agile development teams.

In this article, we’ll take you through the highlights of Next-Gen Composability – and why this is so revolutionary on the technical side.

How Next-Gen Composability brings code and content together

Next-Gen Composability gives you the ability to use well-known tools like Github, Microsoft Office, and Google Workspace tools to manage your code and content.

Getting started is easy and fast – you can set up a new environment in under 20 minutes:

  1. Create a new GitHub repository based on Adobe's Boilerplate Template
  2. Connect and set up your content folder in either Google Drive or Microsoft Sharepoint
  3. Activate the Bot to automatically take care about deploying code into the NGC cloud infrastructure. This will make sure web performance is maintained through any code changes, running an analysis for every pull request.

That’s it; you’re ready to start developing and publishing content. For the local setup, Adobe provides a command line tool to directly view and test any changes in your local repository. Additionally, NGC cloud infrastructure provides a separate URL for any pushed branch, meaning you can QA before merges without the need of cumbersome dev, test or integration environment setups. Every change can be tested in full and subsequently pushed to production, which enormously accelerates time-to-market and simplifies the development process.

NGC developers do need only a very minimum of proprietary product knowledge; the majority of code is JavaScript and CSS following well-known standards.

AEM Sidekick: a dedicated Chrome extension for Next-Gen Composability

AEM Sidekick is a Chrome extension that enables you to manage website content directly using online document editors like Microsoft Office 365 and Google Workspace tools. Once configured, Sidekick appears as a toolbar under your browser address bar with lots of useful built-in functionality.

With one click, you can see your latest changes in Preview mode, push the changes to public production, switch between environments, and see page metadata like the last edit, preview, and publication date. Of course, you can also jump into the related document for the page and change the content directly.

From AEM Core Components to document-style building blocks

AEM treated websites as a composition of components. Next-Gen Composability has introduced blocks, sections, and templates to manage the structure and layout of pages. The concept behind NGC is to make content creation as natural as possible, enabling authors to create content directly in document editors without requiring deep knowledge about the code setup.

A live example: Cognizant Netcentric’s homepage

This is how the Cognizant Netcentric website homepage looks like in Edit mode.

(Wondering where the navigation is? As the header and footer are common elements across websites, these are maintained as individual files, separate from content pages.)

The first teaser in this example is the most complex element. And with NGC, you can construct this hero section using a simple 2-column, 2-row table including the necessary metadata and content. Without the need to pre-develop components and configure pieces of content individually, you can assemble a page like this in 10 minutes.

Another live example: this article

This is how this very article looks like in Edit mode.

What you see is a Google Word Document, with headings, subheadings, links and text. Users do not need to think about code setup and editing is natural and easy. Additionally, users benefit from all of Docs features and functionalities. An added benefit is how Next-Gen Composability makes metadata just as easy to manage. Below, you can see the metadata section where changing the meta description is just as editable, in the same way as the rest of the page.

Headless and Automated

Additionally, you have several options to provide content in a headless format. You can use query indexes to get website content in a JSON format, and maintaining redirects or arbitrary lists is as simple as adding a line to an Excel or Google Sheet. With the public API, you can automate all actions and integrate with the out-of-the-box functionality.

Let’s talk

Our team of experts is truly excited about this huge breakthrough in content management and web development, and looking forward to helping teams integrate Next-Gen Composability with your current Adobe Marketing Cloud setup.

Ready to benefit from fast-tracked web development and built-in functionality to achieve peak performance?