Dynamic Model to Component Mapping for SPAs

Last update: January 16, 2025

Topics:
Developing,SPA Editor

CREATED FOR:

Developer

This document describes how the dynamic model to component mapping occurs in the JavaScript SPA SDK for Adobe Experience Manager (AEM).

IMPORTANT

The SPA Editor remains supported by Adobe, but the preferred editors for managing headless content in AEM are now:

The Universal Editor for visually editing headless content.
The Content Fragment Editor for form-based editing of headless content.

ComponentMapping Module

The ComponentMapping module is provided as an NPM package to the front-end project. It stores front-end components and provides a way for the Single Page Application to map front-end components to AEM resource types. This enables a dynamic resolution of components when parsing the JSON model of the application.

Each items present in the model contains a :type field that exposes an AEM resource type. When mounted, the front-end component can render itself using the fragment of model it has received from the underlying libraries.

See SPA Blueprint for more information about model parsing and the front-end component access to the model.

Also see the npm package: https://www.npmjs.com/package/@adobe/aem-spa-component-mapping

Model-Driven Single Page Application

Single Page Applications using the JavaScript SPA SDK for AEM are model-driven:

Front-end components register themselves to the Component Mapping Store.
Then the Container, once provided with a model by the Model Provider, iterates over its model content ( :items).
If there is a page, its children ( :children) first get a component class from the Component Mapping and then instantiate it.

App Initialization

Each component is extended with the capabilities of the ModelProvider. Initialization therefore takes the following general form:

Each model provider initializes itself and listens for changes made to the piece of model that corresponds to its inner component.
The PageModelManager must be initialized as represented by the initialization flow.
Once stored, the page model manager returns the complete model of the app.
This model is then passed to the front-end root Container component of the application.
Pieces of the model are finally propagated to each individual child component.