Architecture Overview
Types of App Builder apps
An App Builder Application is a serverless application that extends Adobe Product APIs. These applications can be one of two kinds: headless or headful. Each of these types is described in more detail in the sections that follow.
Headless Application
In a headless application, the application consists of a set of serverless actions and/or sequences deployed to Runtime, Adobe's serverless platform.
A typical headless application would integrate well with a remote script or process that invokes it, such as an AEM Assets workflow or an ACS activity.
Headful Application
A headful application is a Single Page Application (SPA) with a full-fledged user interface (UI) served from the out-of-the-box Content Delivery Network. This type of application calls Adobe Product APIs directly from the client when applicable. When there is a strong need to orchestrate Adobe Product API calls with 3rd party API calls, or with Adobe Identity Management System for authentication purposes, you can deploy serverless actions and/or sequences using Runtime.
JAMStack: Anatomy of an App Builder App
App Builder apps that are Single Page Applications with a full-fledged UI should follow the JAMStack Architecture.
The three main components of App Builder apps are:
- Adobe Product APIs, exposed to external developers and consumers through Adobe I/O API Gateway.
- Javascript-based SDK and serverless actions, sequences, and APIs deployed to Runtime.
- React-Spectrum, Adobe's front-end framework which applies Adobe's Design System to React-based components.
SDK Components
CLI
The CLI is one of the main touchpoints for App Builder developers. It is based on oclif, which is a popular framework to build extensible command line tools.
The CLI comes out-of-the-box with the following capabilities:
- Authentication to Adobe's Identity Management System
- Certificate management
- Configuration management
- Interactions with Adobe Developer Console
- Interactions with Runtime, Adobe's serverless platform
- Lifecycle management for App Builder
App Builder Generators
The generators help developers to bootstrap their App Builder apps when using the CLI.
Generators can be used to create:
- A headless application
- A full-fledged UI SPA that deploys into Experience Cloud Unified shell
- Runtime serverless actions extending specific Adobe APIs
SDK Libraries
App Builder also provides a collection of JavaScript-based SDK libraries designed to increase the developer's velocity when implementing Custom Applications on top of Adobe APIs.
Main SDK library
The main SDK library bundles smaller, reusable SDK libraries serving a variety of use-cases:
Integration with Adobe APIs
- The Adobe Analytics SDK library provides a client for Adobe Analytics 2.0 API.
- The Adobe Target SDK library provides a client for Adobe Target 1.0 API.
- The Adobe Campaign Standard SDK library provides a client for Adobe Campaign Standard API.
Integration with Adobe's Identity Management System
The Adobe IMS SDK library provides authentication management capabilities to Adobe's Identity Management Services, for both of the following scenarios:
Integration with additional out-of-the-box services
- The Files SDK provides a file system-like abstraction on top of an out-of-the-box cloud storage to store large, temporary files.
- The State SDK provides a state-like abstraction on top of an out-of-the-box cloud-based key-value store.
Technical framework for developers
The Core SDK library bundled into the main SDK library provides a lower-level technical framework for developers.
This framework must be used when contributing to the App Builder SDK. It is also recommended to use it when building an App Builder application.
Core SDK library
The Core SDK library enables developers with the following technical capabilities:
Configuration
The Configuration SDK library allows management of persistent and environment variable configuration.
Logging
The Logging SDK library provides a logger abstraction that can be used in SDK libraries and serverless actions deployed to Runtime.
Errors
The Errors SDK library is the base implementation for all errors thrown by the SDK libraries and can be used by developers to manage their own errors.
Networking
The Networking SDK library provides low-level networking tools such as exponential back-off that can be used in SDK libraries and custom API clients.
Token-Vending Machine
The Token-Vending Machine is exposed as an out-of-the-box API deployed to Runtime.
It enables developers to perform the following actions on behalf of their App Builder application credentials:
- Deploy the web assets of their App Builder application to the out-of-the-box CDN.
- Use the out-of-the-box cloud storage through the Files SDK.
- Use the out-of-the-box key-value store through the State SDK.
CI/CD Support
The out-of-the-box CI/CD support for App Builder Applications consists in:
- Github Actions to setup the CLI and use it to perform actions such as application testing, build and deployment.
- Github Workflows to orchestrate the Github Actions upon specific events triggered against the application repository.
- Github Secrets to store application secrets required for the execution of the Github Workflows against specific environments.
Webpack
App Builder uses Webpack for bundling I/O Runtime action code. See here for an overview on webpack configuration.
Migration Guides
- Standalone Application to DX Experience Cloud SPA v1 - Migrate an App Builder application that's been initialized as a Standalone Application to a DX Experience Cloud SPA v1. Useful if you can't seem to view your application in the App Builder Catalog in Adobe Experience Cloud.
