Bpmn definitions out of the box

Some months ago I have worked on integrating the bpmn.io modeler and the camunda engine into the inhouse application framework of my former employer. This was also my first contact with the standard and these tools. The modeler impressed me so well that I needed to include it into my newest project.

There I am leading the development of a realtime classroom management application. One of the application features is to define learning sequences and learning cases. I came up with the idea to use the bpmn.io tools for this purpose since these sequences consist of similar pattern as defined by the standard.

I am using Meteor as fullstack Javascript framework. Both the Meteor framework as well as the modeler are based on NodeJS. This is why I thought this will work out easily.

Easy package integration

Usually it is very easy to install external packages into meteor. The platform provides it’s own package repository. All Meteor related extension packages are stored there. Think of npm with meteor optimization for the modules. You just need to type meteor add username:packagename into your console while being in the project directory. The framework automatically integrates te package with all external dependencies like npm does.

Why no bpmn on atmosphere?

Unfortunately there were no bpmn packages uploaded on atmosphere. The platform relies on an active community. If no one creates such a package then you have to either wait until someone creates it, ask for it in the forums or create it yourself. My next attempt after searching atmosphere was to search the forums. I only found a post, where another user had trouble integrating the modeler into his project. It made me wonder, why the integration should be that hard.

Adding npm modules to meteor packages

Yet on the same day I started to integrate the modeler into a test project. It did it the classic way using the cli to include the npm packages. The next step was to mime the setup script for the modeler from the example pages. It is important to understand, that Meteor’s built in template engine (blaze) has it’s own lifecycle which differs from the way you use them in jquery or plain JS. Therefore you won’t be able to use events such as “document.ready” or “window.onload”. You can, but your objects will not load correctly when invoking them in your template events.

Update: There will be soon a ReactJS based branch on this package, since we switched to React for frontend rendering.

Summarized, you can get a full working BPMN-JS wrapped in a meteor package for your meteor project now. The same routine worked out well for the cmmn modeler. You can get in on atmosphere and integrate it the same way as the bpmn tools package.

Link to the bpmn tools on atmospherejs

Link to the bpmn tools on github

Link to the cmmn tools on atmospherejs

Link to the cmmn tools on github


Jan Küster

I have graduated in Digital Media (M.Sc.) at the University of Bremen. After working as a consultant I am now developing the next level of leaning software with Meteor.

Leave a Reply