Architecture Overview

Types of App Builder apps

An App Builder Application is a serverless application that extends Adobe Product APIs. These applications may be headless or headful, as described below.

Headless applications

Headless applications consist of a set of serverless actions or sequences deployed to I/O Runtime, Adobe's serverless platform.

Headless applications integrate well with remote scripts or processes that invoke them, for example AEM Assets workflows or ACS activities.

Headful applications

Headful applications are Single-Page Applications (SPAs) with full-fledged user interfaces (UIs) served from the Content Delivery Network included with App Builder. Headful applications call Adobe Product APIs directly from the client. When there is a need to orchestrate Adobe Product API calls with third-party API calls, or with the Adobe Identity Management System for authentication, you can deploy serverless actions and sequences using Runtime].

JAMStack: anatomy of an App Builder app

Single-Page App Builder applications with full-fledged UIs 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 I/O Runtime
• React-Spectrum, Adobe's front-end framework that applies Adobe's design system to React-based components

SDK components

Command-line interface (CLI)

The CLI is one of the main touchpoints for App Builder Developers. It is based on oclif, a popular framework to build extensible command-line tools.

The CLI is supplied with these capabilities:

• Authentication to Adobe's Identity Management System
• Certificate management
• Configuration management
• Interactions with Adobe Developer Console
• Interactions with I/O Runtime, Adobe's serverless platform
• Lifecycle management for App Builder

App Builder generators

Generators help Developers bootstrap App Builder apps when using the CLI. They can be used to create:

• Headless applications
• Full-fledged UI Single-Page Applications that deploy into Adobe's 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 Developer productivity when implementing custom applications on top of Adobe APIs.

Main SDK library

The main SDK library bundles smaller, reusable SDK libraries that serve a variety of use cases:

Integration with Adobe APIs

• The Adobe Analytics SDK library provides a client for the Adobe Analytics 2.0 API
• The Adobe Target SDK library provides a client for the Adobe Target 1.0 API
• The Adobe Campaign Standard SDK library provides a client for the Adobe Campaign Standard API

Integration with Adobe's Identity Management System (IMS)

The Adobe IMS SDK library adds authentication management capabilities to Adobe's Identity Management Services, for these scenarios:

• User-based (OAuth 2.0)
• Technical account-based (JWT Bearer-token)

Integration with additional services provided with App Builder

• The Files SDK provides a file-system-like abstraction on top of cloud storage provided with App Builder, to store large temporary files
• The State SDK provides a state-like abstraction on top of the cloud-based key-value store provided with App Builder

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, and is recommended for use when building App Builder applications.

Core SDK library

The Core SDK library gives Developers these technical capabilities:

Configuration

The Configuration SDK library allows configurationmanagement of persistent and environment variables .

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; Developers may use it 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 API deployed to Runtime, provided with App Builder.

It lets Developers perform these 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 provided cloud storage through the Files SDK
• Use the provided key-value store through the State SDK

CI/CD support

CI/CD support provided with App Builder for App Builder applications includes:

• 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 Webpack Configuration for an overview on how to configure webpack.

Migration guides

• Migrating Apps to DX Experience Cloud v1 SPAs shows how to migrate App Builder applications initialized as Standalone Applications to a DX Experience Cloud Single-Page Application v1. This is useful if you can't view your application in Adobe Experience Cloud's App Builder Catalog.

Next steps

Continue to Dealing with Application State.

Return to App Builder Overview.

Return to Guides Index.