Éditeur de diagramme de séquence - Partie 2 - Le DSL

Une des fonctionnalités essentielle de cet outil étant l'utilisation du DSL textuel, entrons directement dans le vif du sujet : comment réaliser ce DSL ?

OMeta


Écrire un analyseur grammatical "à la main" est une tâche fastidieuse et source de nombreuses erreurs, typiquement pour implémenter une spécification de langage qui évolue constamment. C'est pour cette raison que des générateurs d'analyseurs grammaticaux  sont souvent utilisés pour automatiser ce processus.
Un compilateur utilise non seulement un analyseur grammatical mais aussi un analyseur syntaxique, plusieurs traducteurs et enfin un générateur de code - chacun pouvant être issus de différents outils et même utiliser différents langages.

Alessandro Warth a créé le langage OMeta afin d'unifier tous ces outils, réduire la courbe d'apprentissage et faciliter l'expérimentation de langages. Ce langage a été créé dans le cadre d'une thèse de doctorat. Vous pouvez consulter cette thèse ici : http://www.vpri.org/pdf/tr2008003_experimenting.pdf.

OMeta est un langage de reconnaissance de modèle fondé sur une analyse grammaticale d'expression (PEG - Parsing Expression Grammar). Ce langage permet donc de supprimer la séparation entre l'analyseur grammatical et syntaxique.

De nombreux concepts et extensions sont apportées dans ce langage, mais nous n'allons pas les détailler ici.

Travailler avec OMeta peut être décomposé en 3 parties :

  1. Écrire une grammaire dans le langage OMeta.
  2. Configurer le compilateur OMeta et compiler la grammaire.
  3. Utiliser le résultat de la compilation afin d'analyser et traduire un flux d'entrée.


OMeta/JS


Étant un langage générique de description de grammaire, OMeta a été implémenté dans plusieurs langages hôte. Dans le cadre de notre projet, nous nous intéresserons à la librairie OMeta/JS qui, comme son nom l'indique, est l'implémentation JavaScript du langage OMeta.

Vous pouvez trouver cette librairie dans GitHub à l'adresse : https://github.com/alexwarth/ometa-js. Ce dépôt contient aussi un éditeur en ligne, mais dont nous allons nous passer dans cet article.

Les fichiers nécessaires à notre test sont :

  • bs-js-compiler.js
  • bs-ometa-compiler.js
  • bs-ometa-js-compiler.js
  • bs-ometa-optimizer.js
  • lib.js
  • ometa-base.js
  • ometa-script-tag.js
  • parser.js


Mise en place


Afin de se familiariser avec ce langage, nous allons tout d'abord créer un environnement de test pour nous aider dans la rédaction de notre grammaire. 

Cette étape de rédaction se fera de façon incrémentale afin de mieux décomposer notre problème.

Expérimentations concernant la grammaire


Voici l'enveloppe de notre fichier HTML dans lequel nous allons stocker la grammaire de notre langage:

<html>
  <head></head>
  <body>
    <script type="text/x-ometa-js" id="ometadd">
      ometa WSD {
      }
    </script>
    <script src="lib/ometa/lib.js"></script>
    <script src="lib/ometa/ometa-base.js"></script>
    <script src="lib/ometa/ometa-script-tag.js"></script>
    <script src="lib/ometa/parser.js"></script>
    <script src="lib/ometa/bs-js-compiler.js"></script>
    <script src="lib/ometa/bs-ometa-compiler.js"></script>
    <script src="lib/ometa/bs-ometa-js-compiler.js"></script>
    <script src="lib/ometa/bs-ometa-optimizer.js"></script>
    <script>
      document.addEventListener('DOMContentLoaded', function () {
        // Les différents tests seront ici
        
      });
    </script>
  </body>
</html>

Nous allons donc faire évoluer ce modèle jusqu'à obtenir la grammaire que nous souhaitons obtenir. Notez que l'interprétation automatique de la grammaire est réalisée dans le script "ometa-script-tag.js" dont le rôle est de parcourir la page HTML à la recherche de scripts de type "text/x-ometa-js". Nous pourrions faire autrement mais ce comportement nous convient pour l'instant.


Éditeur de diagramme de séquence - Partie 1 - Objectifs

Cet article est le premier d'une série dans laquelle nous allons construire itérativement un éditeur de diagramme de séquence.
Comme tout projet bien mené qui se respecte, il faut dans un premier temps en définir les objectifs.

Le diagramme de séquence


Un diagramme de séquence est une représentation graphique des interactions entre différents acteurs selon un ordre chronologique. Il fait parti des différents diagrammes manipulés à travers la méthodologie UML.

Dans notre activité, nous utilisons régulièrement ce type de représentations car il permet de documenter simplement les échanges entre différentes parties d'un système et ainsi mieux communiquer au sein d'un  projet.

Jusque là, nous utilisions les services d'un site web spécialisé pour réaliser ce type de diagrammes : https://www.websequencediagrams.com/. Ce site permet de représenter graphiquement des diagrammes de séquence à partir d'une formulation textuelle.

C'est donc tout naturellement que nous nous sommes interrogés sur la façon d'implémenter un tel outil en ligne et que nous vous proposons un moyen simple et efficace d'y parvenir.

Par la suite, nous allons nous inspirer du formalisme de ce site comme support pour notre outil.

Voici un exemple de description de diagramme de séquence tel que l'attend le site websequencediagrams :
title Authentication Sequence
Alice->Bob: Authentication Request
note right of Bob: Bob thinks about it
Bob->Alice: Authentication Response

Et voici la représentation associée à cet exemple :


Un outil permettant de transformer (ou plutôt interpréter) le texte en entrée pour obtenir l'image précédente en sortie est ce que l'on appelle un DSL textuel.

Un DSL textuel pour interpréter la saisie


Qu'est-ce qu'un DSL textuel ?


Un DSL (pour Domain Specific Language) est un langage dont les spécifications s'adressent à un domaine d'application précis.

Nous ne souhaitons pas que les utilisateurs utilisent la programmation classique pour définir le diagramme de séquence qu'ils souhaitent. Nous allons donc créer un langage dédié à la description du diagramme.

Pour cela nous reprendrons à l'identique la grammaire de description du site websequencediagrams.

La définition que je vous donne d'un DSL est très très simplifiée. Si cette partie vous intéresse davantage, je vous invite à consulter les nombreuses ressources et outils disponibles sur Internet ou à me contacter.

Spécifications de notre DSL


Notre outil va donc interpréter la saisie du diagramme à partir d'une grammaire : encore faut-il spécifier cette grammaire. Pour cela, reprenons les possibilités offertes du site websequencediagrams :

Les signaux

Les signaux permettent de représenter une interaction entre deux acteurs de la façon suivante :
# This is a comment.            
Alice->Bob: Filled arrow
Alice->>Bob: Open arrow
Bob-->Alice: Dotted line
Bob-->>Alice: Dotted Line, open arrow
Bob<->Alice: Double arrow

Les participants sont automatiquement créés dès qu'ils sont utilisés. Utilisez la syntaxe "-->" pour dessiner une ligne en pointillé.

Le changement d'ordre des participants

Si vous souhaitez que les participants soient affichés dans un ordre différent que leur utilisation, vous devez les déclarer au préalable en tête de description en utilisant le mot clé "participant". Vous pouvez aussi les renommer afin de faciliter la saisie du diagramme.
participant Bob
participant Alice
participant "I have a really\nlong name" as L

Alice->Bob: Authentication Request
Bob->Alice: Authentication Response
Bob->L: Log transaction


Signal à soi-même

Un participant peut s'envoyer un signal à lui-même : celui-ci sera représenté par une flèche qui reviendra vers lui.
Alice->Alice: This is a signal to self.\nIt also demonstrates \nmultiline \ntext.

Grouper des signaux ensemble

Vous pouvez grouper des signaux ensemble en utilisant les mots-clés "alt/else", "opt" et "loop". Chacun d'eux peut prendre une description qui s'affichera dans l'entête du groupe. Utilisez le mot-clé "end" pour fermer le groupe. Les groupes peuvent être imbriqués.
Alice->Bob: Authentication Request
alt successful case
Bob->Alice: Authentication Accepted
else some kind of failure
Bob->Alice: Authentication Failure
opt
    loop 1000 times
        Alice->Bob: DNS Attack
    end
end
else Another type of failure
Bob->Alice: Please repeat
end

Les notes

Vous pouvez ajouter des notes à votre diagramme. Ces notes peuvent être placées à la gauche du participant ou à sa droite. De plus, vous pouvez centrer une note au-dessus de un ou plusieurs participants.
participant Alice
participant Bob

note left of Alice 
This is displayed 
left of Alice.
end note
note right of Alice: This is displayed right of Alice.
note over Alice: This is displayed over Alice.
note over Alice, Bob: This is displayed over Bob and Alice.

Et bien plus encore...

Le site websequencediagrams intègre encore bien d'autres comportements. Le but ici n'est pas de réécrire l'ensemble des fonctionnalités de ce dernier mais plutôt d'avoir un sujet de base intéressant pour illustrer l'utilisation de divers outils techniques.

Vous l'avez certainement remarqué, le site websequencediagrams propose différentes visualisations de la représentation graphique du diagramme : nous verrons plus tard si il est intéressant de présenter le développement de ce type de fonctionnalité.

L'outil d'interprétation

En parlant d'outils, nous avons besoin d'un outil qui nous permettra d'interpréter la saisie de l'utilisateur. Dans le monde Java l'outil Antlr est parfait pour la déclaration de grammaires. Dans le monde JavaScript, il existe quelques outils qui semblent également pertinents. Nous avons noté  :


Les fonctionnalités que nous allons mettre en œuvre


Les fonctionnalités qui seront prises en charges seront a minima les suivantes :
  • Les fonctionnalités de base d'un éditeur (ouverture/enregistrement des diagrammes et export de la représentation graphique).
  • Interprétation de la saisie utilisateur.
  • Affichage de la représentation au fur et à mesure de la saisie (ainsi que des erreurs d'interprétation).
Par la suite, nous pourrons ajouter des fonctionnalités (par exemple de nouvelles interactions, un changement de style de la représentation, ...).

Voilà, le décor est posé. il n'y a plus qu'à se mettre au travail....