Documentation Center

SDL Digital Experience Accelerator architecture

The DXA Web application uses an MVC architecture.

Web application architecture

Editors create and edit Pages in the Content Manager using Experience Manager or Content Explorer. When they publish these Pages, they are stored in the Content Data Store (database).

Page requests to the Web application are processed by Controllers, which pass responsibility on to a Content Provider to retrieve the content for the URL. The Content Provider returns content to the Controller in a data object (Model) rather than rendered HTML.

Controllers use the Content Provider to determine which View to use to render the Model, and also map the Model to a corresponding View Model which is a data object optimized for the presentation of the content with that particular View.

A Page is not rendered by a single controller action or view: the top level Page Controller action and View breaks rendering down into first Region Controller actions, with corresponding Region Views and then within that Entity Controller actions with corresponding Entity Views.

Requests for other assets, such as configuration, images, css, or script files, are not handled by a Controller but intercepted by a Static Content (HTTP) Module, which retrieves them directly from the Content Provider.

Model mapping and semantics

Domain (Content Manager) Models are mapped to the Presentation (View) Models using Model Semantics so that Web developers can work with data structures optimized for the Views they are creating without having to have a deep understanding of the underlying content model. It also means that developers do not have to create custom mapping code to populate their view models with Content Manager managed content.

Model Semantics are also used to output schema.org semantic mark-up automatically in the rendered HTML so that search engines, and other machines consuming your content, have a deeper understanding of the content you publish. The mechanism is extensible, so you can replace or compliment the semantic mark-up with that from another semantic vocabulary such as Dublin Core or FOAF.

Model Semantics are also used to add Experience Manager mark-up on the staging site to enable in-line editing of the content, without requiring View developers to have a deep understanding of these concepts.

Web site HTML Design

The DXA uses Bootstrap to deliver a customizable responsive HTML5 Web design. It is designed to work on screens of all widths down to 320px, and is responsive on client and server side to ensure that content is displayed accordingly (column layouts and menus collapse on smaller screens) and optimally (images are dynamically resized to suit the screen width available).

By default, the design is managed and published from the Content Manager where a ZIP file contains raw design assets (LESS, CSS, Javascript, and so on) which get compiled, merged and compressed on publish using Grunt tasks running in node.js.

You can customize the default design in the example Web site on a number of levels depending on your technical ability. For example, you can set simple settings such as brand primary color and typeface, or fully customize the CSS/Javascript compilation process and create your own Views containing custom HTML.

Core and Modules

The DXA is broken down into the Core, which contains standard functionality required by most implementations, and Modules that contain specific optional functionality, or functionality that requires specific third-party product installations and/or license keys, for example Search and Google Analytics. The separation is made both in the Content Manager and in the Web application.

Implementers are encouraged to create their own Module elements and separate them from standard Core and Modules using the structure provided rather that alter elements of the Core or Modules to facilitate upgrades as new functionality is released or issues are fixed. You can create their own Module elements by copying an example, or by starting from scratch.