App Frontend Application Architecture
Description of the Application architecture for App-Frontend
App Frontend is a Single Page Application based on React.
This application is responsible to present a UI to the end user. The application consist of serveral different features that is responsible for handling the ui for different steps in the workflow.
Each App developed in Altinn Studio will contain their own App Frontend as part of the Docker Container created during the build/deploy process to a Altinn Apps environment. This means that there can be different versions of App Frontend for two different deployed Apps
React Architecture
The React Architecture used for App Frontend is based on using different javascript frameworks together REACT to handle different responsibilties.
The React architecture tries to follow best practice React architecture.
The diagram below show the architecture
Store
A store holds the whole state tree of your application. The only way to change the state inside it is to dispatch an action on it.
Reducers
Reducers specify how the application’s state changes in response to actions sent to the store. Remember that actions only describe what happened, but don’t describe how the application’s state changes.
Action Creators
An action creator is, quite simply, a function that creates an action. Do not confuse the two terms—again, an action is a payload of information, and an action creator is a factory that creates an action.
App Frontend Features
The App Frontend SPA is seperated in serveral features that is a collection of components and containers that support a given functional area for a App. Typical a feature is connected to a type of workflow step. Like formfilling, signing, ++.
Support for new types of workflow steps are added
Instansiate
This feature is responsible for presenting the user
UI Render (FormFiller)
The UI rendering component is the one that is responsible for rendering the UI designed in Altinn Studio.
This feature uses the formlayout for an app together with other metdata about the datamodell.
Based on the content of the formlayout file the UI Render, renders the correct components like textbox, fileupload ++
Receipt
This feature is responsible to show the summary of the instance when an app is sent to end state of the process flow.
Configuration files
The App Frontend requires some configuration files to work correctly. These files are loaded through API
FormLayout
The formlayot is used the UI-render feature.
It decides the layout elements. App Frontend have access to form layout through API.
See details about FormLayout.json
Language
Contains all text resources
ServiceMetadata
Contains information about the data model and is used by UI-render to map the fields to the data model.