Generating JavaScript code from UML state machine models

Sinelabore creates compact and clearly readable JavaScript code from UML state machine diagrams. It has zero dependencies, and is useful for frontend and backend application logic.

Sinelabore enables event-driven programming to handle complex logic in predictable, robust, and visual ways.

To generate JavaScript code, call the code generator with the command line flag -l js or -l mjs depending on the file extension wanted. The content of the generated file is the same in both cases.

Example command to generate the oven machine code from a model file called oven.xml:

java -cp “../../*” codegen.Main -l js -p ssc -o oven oven.xml

By supporting JS code generation, Sinelabore users can now design state machines in UML and generate JS code from them. Which is undoubtedly a great advantage when thinking about the development of protocols between IoT devices and servers, for example. Or the development of device prototypes where a functioning GUI user interface based on HTML/JS can be emulated very easily.

How can You benefit from JS code generation?

Creating business logic

Create your business logic as state machines on either the client or server side. Create state machine diagrams without manual coding, allowing rapid prototyping or requirements gathering without worrying about the details of state machine implementation. The built-in model checker ensures that your state machine is always correct. Simulate your design to test and iterate using the built-in simulator. Or create a rapid prototype (see below) to get early feedback from your team and customers on how things should work.

Creating HMI prototypes for IoT or embedded devices

Prototypes are often needed to get quick feedback on design approaches or unclear requirements. This is where JS can play an important role. Thanks to its integration into HTML pages and its simple syntax, it enables the rapid development of functional prototypes. Users can then “play” with them and give direct feedback. This is shown here for a microwave oven. The oven can be controlled via a simple HTML page (the state machine is shown below).

The event hander of the generated state machine is called at the appropriate points in the HTML page e.g. to forward the key presses to the generated event handler the following code used: 

<script type="module">
         import { oven } from './oven.mjs';
         import { TimerManager } from './TimerManager.mjs';
 
         let myOven; // Declare my Oven in the outer scope
         const userData={
         };
 
         window.buttonDecClicked= function() {
             myOven.processEvent(myOven.events.evDec,userData)
         }
 
         window.buttonIncClicked=function() {
             myOven.processEvent(myOven.events.evInc,userData)
         }
 
         window.buttonOpenDoorClicked= function() {
             myOven.processEvent(myOven.events.evDoorOpen,userData)
         }
 
         window.buttonCloseDoorClicked=function() {
             myOven.processEvent(myOven.events.evDoorClosed,userData)
         }
      ...
}

The machine below realizes the behaviour of the oven. It uses hierarchical states with deep history and actions in various places. Two JS helper classes are used to interact with the GUI and to have timers available.

The machine realizes this behaviour:

State Machine of a Microwave Oven with Java Script Promo Code

A customer can work with this machine and interactively test whether the device really works as intended. For example, should the light stay on after the cooking time has elapsed even though the oven has not yet been opened? Such things can only be determined if you can “play” with your model.

The Sinelabore Code Generator provides all the functions necessary to work with the machine. In addition to the event handler, these are auxiliary functions, for example to find out what state (or states) the machine is in and much more. The complete code is available below:

Features of the JavaScript State Machine Code Generator

The code generator supports the following features:

As in the other backends too, code at the beginning of the generated JavaScript file can be specified with the header linked to the class in a UML diagram. Use this to define your imports or other local code. It is also possible to define pre- and post-action code of the generated state handler (see section 'Introduction' in the manual).

The generated code looks as follows for the oven state machine. The complete example is available on the sinelabore github site.

Generated JavaScript code from the Oven State Machine