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 mps/languages.

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

Demonstration

Figure 1. Demonstration of synchronization

Figure 2. Interactions in demonstration

Build

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:

Install 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

Start up the components.

docker-compose --profile useCase2 up

This starts:

a model server with initial data under http://localhost:28101/
the Management application under http://localhost:3000/
the Overview application under http://localhost:4200/

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.

Use

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.