Making of bpmn-js Token Simulation
Understanding bpmn-js extensibility one token at a time.
Nico Rehwaldt
About Me
- Software developer at Camunda
- bpmn.io creator and project lead
@nikkuon GitHub
Agenda
1️⃣ Token simulation?
2️⃣ About bpmn-js
3️⃣ bpmn-js extensibility
4️⃣ How does token simulation plug in?
1️⃣ Token Simulation?
A picture is worth a thousand words.
A moving token is worth a whole bunch of static BPMN diagrams.
Core Idea: Token Flow = 💡
- Understand wait, join, and split semantics
- Learn BPMN execution in a playful manner
- Aid your understanding of a diagrams semantics
What it is not
- Batch processing simulator
- Business intelligence tool
- Verifier / dead lock / live lock analyzer
2️⃣ About bpmn-js
bpmn-js
- A BPMN diagram renderer and editing toolkit
- Embeds into any web page
- Extensible by design
3️⃣ bpmn-js Extensibility
A (BPMN) Diagram Toolbox
- Element discovery, rendering and interaction
- Selection, navigation, search
- Palette and context pad
- Modeling primitives and stacked behaviors
- Overlays
- ...
An Extensible Architecture
- Named services offer behavior
- Modules group services into logical units
- Service instantiation library managed
- Dependency injection / IoC at the core
Extension Cases
- 📙 Interface with bpmn-js via API
- 📘 Build your own extensions
- 📗 Replace an existing service / functionality
📙 Select an Element
const bpmnModeler = new BpmnModeler();
const selection = bpmnModeler.get('selection');
const elementRegistry = bpmnModeler.get('elementRegistry');
selection.select([
elementRegistry.get('Task_1')
]);
📙 Hook into Events
const bpmnModeler = new BpmnModeler();
const eventBus = bpmnModeler.get('eventBus');
eventBus.on('element.changed', function(event) {
console.log('Changed', event.element);
});
📙 Model Programmatically
const modeling = bpmnModeler.get('modeling');
modeling.createShape(
{ type: 'bpmn:ServiceTask' },
{ x: 10, y: 20 }
);
https://bpmn.io/blog/posts/2021-wasdenn-ai-modeling-assistant.html
📘 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')
])
};
}
📘 Create a Module
// TaskSelectionModule.js
import TaskSelection from './TaskSelection';
export default {
taskSelection: [ 'type', TaskSelection ]
};
📘 Extend bpmn-js
import taskSelectionModule from './TaskSelectionModule';
const bpmnModeler = new BpmnModeler({
additionalModules: [
taskSelectionModule
]
});
const taskSelection = bpmnModeler.get('taskSelection');
taskSelection.selectTask1();
4️⃣ How does token simulation plug in?
Code Review!
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
