Use case 2: Model server and web frontend
This use case realizes the synchronization of model data between two web frontends and a model server.
One web frontend is the Management application implemented in Vue.js and can modify the model content.
It uses the @modelix/model-client, the @modelix/vue-model-api and code generated by the Model API generator.
The generated code provides type-safe access to model data and is derived from the MPS languages under
The other web frontend is written in Angular and only reads model data. It also uses the
model-client and the generated type-safe TypeScript API.
A running MPS instance can also sync model data using the model-server-sync-plugin.
|The web frontends communicate directly with a model server and not through an intermediary custom backend like in use case 3.|
|Take a look at the overview to understand how this use case relates to the other use cases|
Use Gradle to build the relevant components.
./gradlew spa-management-vue:build spa-overview-angular:build mps:project-modelserver-backend:build
Install dependencies in the MPS project
The main dependency is the model-server-sync-plugin.
Generates TypeScript sources in
Those sources are generated from the MPS languages in
mps/languages. They are used in the
builds the Single-page applications
Start up the components.
docker-compose --profile useCase2 up
2021.2.6 without any global plugins and open the project in the
This MPS project has a plugin installed and configured to sync the model content automatically with the model server.
Use case 1 describes the synchronization between a model client and an MPS instance.
Now you can modify the model through the Management application. Those changes are first synced to the model server. The model server syncs those changes to other opened web applications, like the Overview application or other instances of the Management application open in another tab.
If you have an MPS instance running and connected to the model server, changes made in MPS are synced with web applications, and vice versa.