Detailed GUI architecture of the Dynamic Documentation sample implementation

Describes the overall GUI (Graphical User Interface) architecture of the Dynamic Documentation implementation and how it interacts with the back end as well as third-party dependencies.

Table 1. GUI
NameDescription
MainThe entry point of the application
The Main component creates the instances of the Data Services and Localization Service. After that it renders the main Container Component called "App".
State StoreThe state store holds the state of the whole application
ReduxUsed for JavaScript apps to ensure that the state is more predictable
Data ServicesManages the communication between the models and the components

Data Services can have different implementations, such as for server and client side rendering. Implementations are set by the main entry point.

Localization ServiceService used for localizing the website
Localization Service handles the following:
  1. Localization of UI strings
  2. Setting orientation (left-to-right / right-to-left)
  3. Localization of dates / numbers / currencies / ...
Container ComponentsCollection of React components which take care of rendering the UI

Container components are high level components which are aware of the business logic of the application.

Presentation ComponentsCollection of React components which take care of rendering the UI

These components are more low level and focus on specific UI presentations. They are not aware of business-specific logic.

Entity ModelsMaps to entities on the server (eg Page, Taxonomy). Responsible for:
  1. Retrieving / saving data to the server
  2. Any business logic
ThemingLESS libraries for overwriting styles for the website.

Name of variables / mixins are provided with backwards compatibility.

Things you can change:
  1. Color scheme
  2. Fonts used
  3. Typography styles (headings, paragraphs, lists, tables, ...)
  4. Icons
Resourcesresjson files with the UI string resources
Table 2. 3rd party Dependencies
NameDescription
Controls React WrappersProvides wrappers for Controls written in plain Javascript so they can be used as a React Component
ControlsLibrary with Controls based on the SDL user experience guidelines
ReactJavascript rendering library for building user interfaces
React RouterDeclarative routing for React
ModelsLibrary with base models and utilities, such as the model for loading data from the server or Ajax utilities
Table 3. Back end
NameDescription
DXA web applicationAn MVC web application using the SDL Digital Experience Accelerator (DXA) framework