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. Optionally, an MPS project can be run and also synchronize its model data with the model server.

One web frontend is the Management application implemented in Vue.js. It can be used to edit 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 mps/languages.

The other web frontend is the Overview application and is implemented in Angular. It displays an overview of model data. It also uses the model-client and the generated type-safe TypeScript API.

A running MPS projects syncs 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 case 2
Figure 1. Demonstration of synchronization
Figure 2. Interactions in demonstration

In this demonstration

  1. Model data is edited through the Management application.

  2. Those changes are then synced to the Overview application and MPS through the model server.

  3. Model data is edited again in MPS by reverting the made changes.

  4. Those changes are then also synced back.


You can try the demo yourself by downloading the samples repository.

In the downloaded repository, use Gradle to build the relevant components.

Command to build needed components
./gradlew spa-management-vue:build spa-overview-angular:build mps:project-modelserver-backend:build

This command

  • Installs dependencies in the MPS project mps/project-modelserver-backend.

    The main dependency is the model-server-sync-plugin.

  • Generates TypeScript sources in mps/metamodel-api-ts.

    Those sources are generated from the MPS languages in mps/languages. They are used in the spa-management-vue and spa-overview-angular.

  • Builds the Single-page applications spa-management-vue and spa-overview-angular.

Start the components:

docker-compose --profile useCase2 up

This starts

MPS (optionally)

Start MPS 2021.2.6 without any global plugins and open the project in the mps/project-mps-backend folder.

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.