Casino

This project aims to ease the migration of application front-end using metamodels. To do so, it extracts the UI model of an application and generates the target application from the model.

This repository includes the whole work needed to migrate a GWT application to an Angular one. Other importers and exporters are available.

• Package description
• Installation
• Repository architecture
• Example of Casino usage
  • Extraction
    • For GWT application
    • Existing JSON file
    • Other existing importers
  • Generate
    • Angular application
    • Other generators
• Developers
• Links
  • Other documentation (might be outdated):
  • Linked research papers
• Contacts

This project is a research project part of an industrial project at Berger-Levrault in collaboration with the RMoD Team - Inria

Package description

This repository contains the main packages of Casino. It includes:

• A metamodel to represent the front-end of an application
• An Importer for this metamodel
• An Exporter for this metamodel
• A Specific Importer for Java (GWT)
• A Specific Exporter to Angular

It also contains some specific package for a company (but you don't need to know)

Installation

To install Casino:

1. Download the last Moose Image
2. In the Moose Image execute

Metacello new
  githubUser: 'badetitou' project: 'Casino' commitish: 'v2.0.24' path: 'src';
  baseline: 'Casino';
  onConflictUseIncoming;
  load

This should load the version v2.0.24 of the project (you can also specify another version or branch).

Repository architecture

Here I'll try to explain you the repository architecture of Casino.

There are three main parts:

• Casino-Model-X is about the visual part of the model
• Casino-Business-X is about the data manipulated by the application
• Casino-Behavior-X is about the behavior of the UI (e.g. what happen when someone clicks on this button)

Example of Casino usage

Extraction

For GWT application

1. Load a Moose model

'path/to/model.json' asFileReference readStreamDo: [ :stream | famixModel := FamixJavaModel new importFromJSONStream: stream ]

You can create a JSON model using VerveineJ With the command: & 'D:\Developpement\mse\VerveineJ\verveinej.bat' -o test.json -format json -anchor assoc -autocp .\lib\ .\src

2. Create a Casino model

"create a metamodel with Casino UI, Behavioral, Business, and FAMIX ref"
metamodel := FMMetaModelBuilder metamodelFromPackages: CSNBModel packagesToProcessToCreateMetamodel , CRFModel packagesToProcessToCreateMetamodel, CSNBuModel packagesToProcessToCreateMetamodel.
"Create a model"
gwtModel := CSNUICWModel new name: 'Omaje'; yourself.
"fix the metamodel of the model"
gwtModel metamodel: metamodel.

3. Extract the UI with an extractor.

xml := (XMLDOMParser parse: 'path/to/myApp.module.xml' asFileReference).

CSNWebModelJava new
  sourceModel: famixModel;
  xml: xml;
  createModelIn: gwtModel.

4. Extract the behavior of the UI

behavioralModel := CSNBehaviorModelImporterJava new 
  uiModel: gwtModel;
  sourceCodeModel: famixModel;
  resetUIAndGenerateBehavioralModel.

5. Extract the business concept (DTO) from services usage

businessImporter := CSNBuModelImporter new.
businessImporter buModel: gwtModel.
businessImporter famixModel: famixModel.
gwtModel allCSNServiceAPI do: [ :serviceAPI |  
	businessImporter importForServiceApi: serviceAPI.
].

Existing JSON file

"create a metamodel with Casino UI, Behavioral, Business, and FAMIX ref"
metamodel := FMMetaModelBuilder metamodelFromPackages: CSNBModel packagesToProcessToCreateMetamodel , CRFModel packagesToProcessToCreateMetamodel, CSNBuModel packagesToProcessToCreateMetamodel.

"Create a model"
casinoModel := CSNUICWModel new name: 'MyModel'; yourself.

"fix the metamodel of the model"
casinoModel metamodel: metamodel.

'/path/to/model.json' readStreamDo: [:stream | casinoModel importFromJSONStream: stream ].

Other existing importers

In GitHub

Generate

Angular application

6. Export the UI and its behavior

"Create an exporter"
exporter := CSNModelExporterAngularBLSpecific new.
exporter model: gwtModel.

"Set the home page"
exporter homePage: (evolModel detect: [:page | page name = 'MyHomePage']).

"Use the material.angular.io as target library"
exporter exporterAngularConfiguration: CSNExporterAngularMaterialConfiguration new.
exporter attributeExporter: CSNExporterAngularAttribute new.
exporter prepareExport.

"Select export location"
exporter context root: '/path/for/export' asFileReference.
exporter runExport.
"

7. Export the data models (DTO)

root := (exporter context root / 'models') asFileReference ensureCreateDirectory.
businessExporter := CSNBusinessExporter new modelRoot: root.
businessExporter export: gwtModel.

Other generators

In GitHub

Developers

If you want to implement your importer, you should look at the CSNWebModel class. This is the abstract importer of Casino.

Here, we will only give hints on the main Casino project, with the GWT importer and Angular Exporter.

• Add/Customize Angular target widget

Links

Other documentation (might be outdated):

• Personal website page

Linked research papers

In no specific order:

• GUI Migration using MDE from GWT to Angular 6: An Industrial Case
• Challenges for Layout Validation: Lessons Learned
• Switching of GUI framework: the case from Spec to Spec 2
• Migrating GWT to Angular 6 using MDE

Contacts

Please, for any question contact me by mail.