Detailed Graphical User Interface (GUI) architecture of the Reference Implementation

Describes the overall GUI architecture of the Reference Implementation and how it interacts with the back end.

Table 1. GUI
NameDescription
MainThe entry point of the application. 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.
ReduxRedux is used for JavaScript apps with the intent to ensure that the state is more predictable.
Data ServicesResponsible for managing the communication between the models and the components. Can have different implementations (eg for server and client side rendering). Implementations are set by the main entry point.
Localization ServiceService which is used for localizing the website.
Handles
  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 and 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 which match the SDL UX Guidelines.
ReactA javascript rendering libary for building user interfaces.
React RouterDeclarative routing for React.
ModelsLibrary with base models / utilities. For example the model for loading data from the server, ajax utils...
Table 3. Back end
NameDescription
Web AppJava based Spring application using the DXA Framework