This document introduces Model-Driven Engineering (MDE) and modelling frameworks. It defines key MDE concepts like models, metamodels, and transformations. It then discusses modelling frameworks like Eclipse Modelling Framework (EMF) and their limitations. The document introduces JSMF as a new JavaScript modelling framework that aims to provide more flexibility compared to frameworks like EMF by separating model and metamodel definitions and allowing dynamic changes. It provides examples of using JSMF for tasks like Android malware visualization.

1. JSMF : A JavaScript Modelling
Framework
Introduction to Model-Driven Engineering

2. What is a modelling Framework ?
Why a modelling framework ?
Why modelling ?
What is a model ?
What it is useful for ?
Etc…
To answer those questions let’s have a look at
Model-Driven Engineering
So, what is Model-Driven Engineering ?
Note: I will not answer all those questions, with “why modelling” we could spend
hours of presentations and discussions ;-)

3. Model-Driven Engineering
A model: is an artifact that represent a portion of a
given system according to a given viewpoint.
μ
Represents
(partially)

4. Model-Driven Engineering
A metamodel: is a model to which a model conforms
to.
In MDE a Model has to conforms to an explicit metamodel
System Under
Study
χ
μ
Conforms to
Represents
Metamodel
Model

5. Model-Driven Engineering
A modelling language: is a structural language used
to express (meta)models
System Under
Study
χ
μ
Conforms to
Represents
Metamodel
Model
μ
Represents

6. Model-Driven Engineering
Transformations: from contemplative models to
productive models!
« Write once, generated everywhere »
The core idea was to generate code… but it can be any
different output: data correlation, visualization, etc.

7. Model-Driven Engineering
The essence of MDE is to provide a way to:
- abstract away from a system under study (focusing
on a peculiar problem)
- systematic way of expressing structured/typed model
thanks to metamodel
- generalization of the way to address problems
- automation of some processes (design, analysis,
etc.).

8. So, what is a Modelling frameworks
Modelling frameworks support the definition of:
Modelling language,
Models,
Metamodels
and other cool stuff like transformations, model checking,
model comparison, visualization, etc.
The famous one:
Eclipse Modelling Framework

9. Modelling frameworks
A set of companies are making business with EMF…
and EMF is the reference for big standardization
initiatives...

10. Our experience with EMF
Web user-interfaces generation from abstract
models (interaction flow) to actual app.

11. Our experience with EMF

12. Our experience with EMF
Our last try with EMF
60 variants of UI according to the conference user
profiles :
demonstrator used in real conditions by conference attendees.
Still stylistic and (back-end) code to be written :
But we learned a lot, generalizing hand-written code into models and
transformation ;
Long learning curve (from non MDE specialists in the
team).
Editor, visualisation are hard to build (but covered by
existing support).

13. Lessons learned
- Use of Eclipse is heavy...
- Bad integration of transformation chains :
multiples langages to ensure the generation process :
Ant, Java, JavaScript (for processing), ATL, Acceleo (for transformations)
- Produced environment is not integrated with web
applications
Note : nowadays Eclipse RCP is providing a support for web app.
No support for evolution or drafting for metamodels,
transformation
Modification of a metamodel part implies a lot of modifications

14. JSMF : What is different ?
A set of companies are making business with
EMF… so why designing a new one?
Flexibility !
On of the core issue with classical modelling framework is they
are so deeply embed in object oriented language (i.e., Java for
EMF) that modelling is too much constrained.

15. JSMF : What is different ?
Why flexibility...
Because modelling can also be a creative, collaborative task
JSMF, thanks to JavaScript dynamic typing allows for building
models from modeler viewpoint:
models can be incomplete (unfinished)
models can have uncertainty (partial/total)
models can be deduced from a set of model elements...

16. Dive inside the framework
4 concepts :
(Meta)Modelling : the core that gives substance to models (i.e.,
they are not only drawings).
Transformation: make your models useful
Managing ecosystem of models: aligning the different perspectives
Model emergence: toward data-driven modelling ;-)
https://js-mf.github.io/

17. Metamodel/ Model
Entity-Relationship Attributes
Defining a metamodel : Classes, Attributes, References
Class (Name)
name,
Multiplicity,
Opposite,
associatedClass
+ attribute name, type
+ attribute name, type
+ attribute name, type

18. Transformations
A
+ name, String
C
+ id, Number
B
+ name, String
D
+ num, Number

19. Transformation A
+ name, String
C
+ id, Number
B
+ name, String
D
+ num, Number

20. Transformation A
+ name, String
C
+ id, Number
B
+ name, String
D
+ num, Number

21. JSMF : The modelling part
As it is defined a model has to be conform to a
metamodel but in JSMF we:
It results in separating the behavior of model elements from
metamodel elements: they could both evolve separately.
We separate the metamodel functions 1) as a typing
mechanism and 2) as a template for model element creation
As a result, at a certain point in time, a model element could
no longer be conforms to the metamodel element used for its
creation

22. JSMF : To check or not to check !
Checking attributes (type, mandatory)
Checking references targeted types
Checking references multiplicities (min/max)
Adding any references or attributes to an existing JSMF object
Having a fine management of flexibility on artifacts (flexible class or just
some elements)

23. Some specific functions
Checking attributes (type, mandatory)
const Family = Class . newInstance ( ’ Family ’ , [] , { lastname : { type : String ,
mandatory : true }}
Level of check for individual references or attributes (using
errorCallback function):
OnError.silent to avoid checking,
OnError.thow to get a JavaScript error with JSMF properties,
Implement your own error callback function!
All instances of a Class can be declared flexible :
Person.setFlexible(true)
Simply adding any reference or attributes to an existing JSMF object
As any JavaScript object: one can add any property (attribute or reference)

24. How it can be applied ? What is
missing?
Where need abstraction, representation (of
knowledge)…. even where you have some uncertainty.
Can be used for producing app, but also in applications
themselves (e.g, reasoning about the application
state, data).
Managing different data structure
Ongoing work on aligning informal and more
structured (formal) models

25. From Flexible to Structured/Rigid
models
From Metamodel
from Model
(archetypal instance)
Structured/Rigid Modelling
Flexible Modelling
Recovery
Discovery

26. Controlling the flexibility
Recovery
Discovery

27. Example : Android Malware
Visualization
- Using existing tool output (using google protobuf)
as a JSMF model
- Extracting relevant information from models
- Build view from extracted data model

28. Example : Android Malware
Visualization

29. Example : Android Malware Visualization
https://github.com/ICC-analysis/JSMF-Android

30. https://js-mf.github.io/