Making of bpmn-js Token Simulation

Understanding bpmn-js extensibility one token at a time.

Nico Rehwaldt 2021

About Me

  • Software developer at Camunda
  • bpmn.io creator and project lead
  • @nikku on GitHub
2

Agenda

1️⃣ Token simulation?

2️⃣ About bpmn-js

3️⃣ bpmn-js extensibility

4️⃣ How does token simulation plug in?

3

1️⃣ Token Simulation?

4

A picture is worth a thousand words.

5

A moving token is worth a whole bunch of static BPMN diagrams.

6

Token simulation overview

7

Core Idea: Token Flow = 💡

  • Understand wait, join, and split semantics
  • Learn BPMN execution in a playful manner
  • Aid your understanding of a diagrams semantics
8

What it is not

  • Batch processing simulator
  • Business intelligence tool
  • Verifier / dead lock / live lock analyzer
9

2️⃣ About bpmn-js

10

11

bpmn-js

  • A BPMN diagram renderer and editing toolkit
  • Embeds into any web page
  • Extensible by design

https://github.com/bpmn-io/bpmn-js

12
13

Modeling, Kids at Home

14

Nyan cat

15

16

3️⃣ bpmn-js Extensibility

17

A (BPMN) Diagram Toolbox

  • Element discovery, rendering and interaction
  • Selection, navigation, search
  • Palette and context pad
  • Modeling primitives and stacked behaviors
  • Overlays
  • ...
18

An Extensible Architecture

  • Named services offer behavior
  • Modules group services into logical units
  • Service instantiation library managed
  • Dependency injection / IoC at the core
19

Extension Cases

  • 📙 Interface with bpmn-js via API
  • 📘 Build your own extensions
  • 📗 Replace an existing service / functionality
20

📙 Select an Element

const bpmnModeler = new BpmnModeler();

const selection = bpmnModeler.get('selection');
const elementRegistry = bpmnModeler.get('elementRegistry');

selection.select([
  elementRegistry.get('Task_1')
]);
21

📙 Hook into Events

const bpmnModeler = new BpmnModeler();

const eventBus = bpmnModeler.get('eventBus');

eventBus.on('element.changed', function(event) {
  console.log('Changed', event.element);
});
22

📙 Model Programmatically

const modeling = bpmnModeler.get('modeling');

modeling.createShape(
  { type: 'bpmn:ServiceTask' },
  { x: 10, y: 20 }
);
23
002_wasdenn-2.gif

https://bpmn.io/blog/posts/2021-wasdenn-ai-modeling-assistant.html

24

📘 Implement a Service

// TaskSelection.js
export default function TaskSelection(selection, elementRegistry) {

  /**
   * Select this very special task
   */
  this.selectTask1 = function() {
    selection.select([
      elementRegistry.get('Task_1')
    ])
  };
}
25

📘 Create a Module

// TaskSelectionModule.js
import TaskSelection from './TaskSelection';

export default {
  taskSelection: [ 'type', TaskSelection ]
};
26

📘 Extend bpmn-js

import taskSelectionModule from './TaskSelectionModule';

const bpmnModeler = new BpmnModeler({
  additionalModules: [
    taskSelectionModule
  ]
});

const taskSelection = bpmnModeler.get('taskSelection');

taskSelection.selectTask1();
27

4️⃣ How does token simulation plug in?

28

Code Review!

29

In a Nutshell

  • Uses bpmn-js extensible architecture
  • Visualizations on top of the actual BPMN diagram
  • Accounts for editor or viewer
  • Custom controls to interact with the simulator
  • Disabled modeling interaction ☠
  • A (single instance) process engine
30

Thank you. Questions?

31

Contribute to Token Simulation

You like the token simulation tool? Consider contributing on Github and help us to make it even better ❤️.

32

Resources

33