App Builder Architecture and Technical Deep Dive
summary
App Builder provides a Jamstack SPA front end (React Spectrum preferred) talking to Node.js 14 functions on Adobe Runtime, with platform-side authorization validators and managed state/file stores accessed via an SDK and token vending machine. The aio CLI scaffolds apps, adds actions, supports remote debugging, hooks and CI/CD. Demo builds a content-fragment markdown editor that adds a new runtime action called "translate" which calls the Google Translate API (API key from env), deploys the action, serves the UI locally, and saves translated content back to AEM on click — it works.
AI-written summary · about
chapters (16)
- 0:00Intro
- 1:05Agenda
- 2:17App Builder Intro
- 3:05App Builder Architecture
- 4:29Architecture Diagram
- 6:28Frontend Architecture
- 8:50Backend Architecture
- 12:07Storage Services Custom Events
- 14:49The Developer Experience
- 17:21Demo Question
- 17:49Demo Description
- 18:48Demo Demo
- 21:09Adding Translation
- 28:19Modify UI
- 28:29Code
- 29:41Translation
related talks
54mAdobe Experience Manager Rock Star: The Headless Challenge
39mAdobe Experience Manager as a Headless CMS - Where/When/Why?
36mHow to Build Content and Commerce Experiences Using App Builder and API Mesh
40mBring In-Context and Headless Authoring to Your Next.JS App
23mAWS On Air ft. AWS Amplify Studio
45mBuilding Isomorphic Apps (Updated)
15mBuilding world-class web apps using Frappe and React
37mA Single Page Story