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.
| Name | Description |
|---|---|
| Main | The 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 Store | The state store holds the state of the whole application |
| Redux | Used for JavaScript apps to ensure that the state is more predictable |
| Data Services | Manages 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 Service | Service used for localizing the website
Localization Service handles the following:
|
| Container Components | Collection 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 Components | Collection 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 Models | Maps to entities on the server (eg Page, Taxonomy). Responsible for:
|
| Theming | LESS libraries for overwriting styles for the website. Name of variables / mixins are provided with backwards compatibility.
Things you can change:
|
| Resources | resjson files with the UI string resources |
| Name | Description |
|---|---|
| Controls React Wrappers | Provides wrappers for Controls written in plain Javascript so they can be used as a React Component |
| Controls | Library with Controls based on the SDL user experience guidelines |
| React | Javascript rendering library for building user interfaces |
| React Router | Declarative routing for React |
| Models | Library with base models and utilities, such as the model for loading data from the server or Ajax utilities |
| Name | Description |
|---|---|
| DXA web application | An MVC web application using the SDL Digital Experience Accelerator (DXA) framework |