Free Avro Schema Viewer

Avro is a data serialization system. The core is Avro schema which can be used to describe the structure of datasets very much like XML Schema or JSON Schema. Avro is primarily used in Big Data scenarios for which it offers special features like schema evolution. This is a typical Avro file:

{"namespace": "net.pleus.domain",
    "name": "customer",
    "version":"1.0",
    "doc" : "Customer Dataset",
    "type": "record", 
    "fields": [
        {"name": "id", "type": "int","default":"-1", "doc":"Unique id of the customer"},
        {"name": "name", "type": ["string", "null"],"default":null,"aliases":["fullname"],"doc":"Customer's name (optional)"},
        {"name":"address", "default":null, "doc":"Address information",
            "type":{
                "type":"record",
                "name":"address",
                "fields":[
                    {"name": "street", "type" : "string","default":"unknown", "doc":"Street"},        
                    {"name": "city", "type": "string","default":"unknown", "doc":"City"}
                ]
            }
        },
        {"name": "contact", "default":null, "doc":"List of contact options", "type": {
            "type": "array",
            "items": {
                "type":"record",
                "name":"contact",
                "fields":[
                    {"name": "type", "type" : { "name":"values" , "type": "enum", "namespace" : "net.pleus.contacts", "symbols" : ["EMAIL", "PHONE", "MESSENGER"]}, "doc" : "Type of contact"},        
                    {"name": "url", "type": "string","default":"unknown", "doc":"The contact url"}
                ]
            }            
        }}
    ]
   }

As you can see it is a JSON file that is structured according to the Avro specification. Although this verbose form might be suitable for technical people, often such structure definitions have to be discussed with non-technical people from the business domain. This is especially the case if you follow a domain driven approach.

To make it easier to discuss and negotiate Avro structure definitions without creating redundant model representations, I’ve created an easy to use Avro Viewer. If you drop the file shown above you will see a visual representation that just shows the essence of the schema.

You can see records, enums, arrays, defaults, aliases, documentation and so on without the JSON markup noise.
Avro Viewer is free to use. It is just plain HTML+JavaScript+CSS. If required you can download the source and modify it to suit your needs.

Fintech Success Story

In 2017 PLEUS Consulting supported Yareto GmbH in the development of their new independent comparision site for the automotive finance industry.
Yareto is a fintech company that specializes in automotive financing. In 2016 the corporate startup was founded to build a brand new comparision site for the automotive finance industry. The site enables car dealers to compare credit offers in the areas of sales financing and purchase financing. Lenders get access to sales channels they couldn’t serve before.

PLEUS Consulting supported Yareto in setting up a Creative Software Workbench. The Creative Software Workbench aligns technology, processes and people in a way that creates an environment in which high quality digital products can be developed in short time.

The front-ends were developed using modern web technologies such as Java-/Typescript, HTML5, CSS and Angular. For the backend Java Enterprise (JEE) and a Sustainable Service Design approach was utilized to design and build a backend with a high degree of reuse and scalability. The service landscape was established using Domain Driven Design principles. Operations was performed using cloud platforms.

On the technical side, PLEUS Consulting supported the teams as Lead Developer. In the area of agile techniques, PLEUS Consulting supported the development teams as Agile Coach. The combination of those roles worked quite well especially in the phases of seed and growth. With these roles the company received thorough support in the areas of technology and methodology.

The project has shown that with a combination of modern technologies, agile approaches and the right people a very short concept to market cycle can be achieved, creating competitive advantages. This is what the Creative Software Workbench is all about.

You can read more details about the project in the official success story. More info about the Creative Software Workbench can be found on the official website.

Bank11 Success Story

In 2016 PLEUS Consulting supported Bank11 in the development of their brand new sales financing system VICTOR 3.0.

Success Story Bank11 is a credit institution that specializes in sales financing. In 2016 the bank decided to replace their existing software with something new. To be able to meet the challenging requirements in terms of quality, customer satisfaction and process efficiency they decided to build their own solution.

The front-ends were developed using modern web technologies such as Javascript, HTML5, CSS and Angular. For the backend Java Enterprise (JEE) and a Sustainable Service Design approach was utilized to design and build a backend with a high degree of reuse and scalability. The service landscape was established using Domain Driven Design principles.

On the technical side, PLEUS Consulting supported the teams as Master Developer and Architecture Owner. In the area of agile techniques, PLEUS Consulting supported the development teams as Scrum Master and Agile Coach. Although not 100% tension free, the combination of those roles worked quite well. With these roles the bank received thorough support in the areas of technology and methodology.

From the beginning we tried to align technology and business as much as possible, creating a people centered architecture. Central to the strategy were BPMN process models, graphical business rules and visual service contracts. In order to create appealing front-ends for the car dealers and the back office of the bank we worked closely with user interface specialists which were members of the cross functional teams. Web stack technologies allowed us to create individual and great looking front-ends. Agile frameworks such as Scrum organized the development teams and created valuable software together with the customer within a short period of time.

The project has shown that with a combination of modern technologies and agile approaches a very short concept to market cycle can be achieved, creating competitive advantages. It also demonstrates that it is possible to establish an agile culture in rather traditional business domains.

You can read more details about the project in the official success story. If you want to find out more come to watch my talks at JAX 2017 in Mainz.

Team Complexity – The Underestimated Factor

Most people would agree to say that an IT project is complex if it has to cope with difficult technology and a challenging business context.
But it is not just technical complexity that threatens the success of a project. Team complexity is an important and often underestimated factor that highly affects the likelyness of success and failure of IT projects.
Even if you have a simple technical problem to solve, it can get much more complicated if you do it with a complex team.
The main problem is that effective communication is very hard to achieve with complex teams. But effective communication amongst the stakeholders, developers, business and operations is one of the key success factors for IT projects. Thus having a team with low complexity reduces risk and increases efficiency. But why is this often not recognized? I think the reason is that dynamic effects are hard to measure and invisible most of the time.
Inspired by the article Projects fail due to dynamic complexity (German) written by Prof. Dr. des. oec. HSG Stefan Grösser I thought about common factors that affect team complexity and therefore dynamic complexity.
To create more awareness in terms of those factors and make the subject more tangible I’ve created the Team Complexity Calculator. Its a fun tool that can be used to get a better idea of how those typical factors affect team complexity. It does not produce absolute results, so please don’t take it too serious. 😉
If you know additional factors that affect team complexity, please let me know.

Those factors are based on experience I’ve made in projects ranging from small to very large sizes.

Windows Store Apps Training

As part of my ongoing certification I recently achieved the Microsoft Solutions Developer Windows Store Apps using HTML5 certification.

MCSD_2013(rgb)_1479

I am now entitled to deliver the official trainings from the Microsoft Official Curriculum such as:

Programming in HTML5 with JavaScript and CSS
Essentials of Developing Windows Store Apps Using HTML5 and JavaScript
Advanced Windows Store App Development Using HTML5 and JavaScript

If you are not sure whether Windows App development is the right thing for you or if you just want to get a feeling for the tooling, technologies and the development process you should attend my Windows Store Apps development workshop which is offered as in-house training.
Windows Apps will soon be availabe on most office workstations. Learning how to develop it is a great opportunity to be at the fore front to deliver compelling user experience. Don’t miss it! 😉

Agile Games Released

Today my Windows 8 app Agile Games passed the Microsoft certification process. It is now available in the Windows Store.

Planning

The app acts a a host of typical games that are utilized in agile projects. The first game is planning poker which can be now played by distributed teams over the internet. Other games will be added to upcoming versions. I implemented the app using HTML5/CSS/JavaScript and jQuery. The backend is based on HTML Web Sockets and hosted on Windows Azure cloud infrastructure. Although in my personal opinion XAML/C# is more productive than HTML/JS, I must admit that app development with HTML/JS is great fun. Existing techniques and frameworks such as jQuery or Knockout can be used and the JavaScript code has a high potential of reuse in different environments and across platforms. The WinJS APIs allow a smooth integration to use Windows functionality such as search and sharing. And last but not least the touch interface lifts the user experience to the next level.
If you want to know to develop how those apps, please attend the Windows Store App Development Workshop. I think Windows Apps have a great potential. They are well suited to reach users in a modern way. Most business workstations today are equipped with Windows so the market is huge. Let’s start coding!

Create Interactive BPMN Models Using JavaScript

In this tutorial I would like to show how to visualize BPMN files in a web browser.
All we need is jQuery for easy DOM navigation, XMLJS to parse the BPMN file and Raphael to visualize it. Since BPMN version 2.0 the BPMN XML file contains additional diagram interchange information. This information together with the actual process data can be used to draw process diagrams from the XML with little effort.

Step 1: Create the process
First we create a simple BPMN2.0 process like the one below using our tool of choice. In this case it was created with Signavio Modeler.

If we open the bpmn file in a text editor it looks like this:

What we see is that in addition to the actual process information it contains elements named BPMNShape and BPMNEdge. BPMNShape contains the bounds of the shape whereas BPMNEdge contains the path of the respective shape connector. This is the diagram interchange format which specifies the size and location of the graphical elements and paths.

Step 2: Prepare the HTML page
We need a simple HTML page that loads the required scripts for jQuery, XMLJS, Raphael and of course our own script bpmnjs.js.

The textarea element (line 20) contains the BPMN data. It is omitted here for the sake of readability.
The div element (line 23) specifies the drawing area that is needed to output the graphics.
Both are needed to initialize BPMNJS in the document ready event (line 14-15).

Step 3: Parse the DI elements using XMLJS
The following listing shows the parsing loop for the BPMN shapes within the plot function of BPMNJS.

First the XMLJS dom parser is initialized (line 49-51). The bpmndi namespace is determined in the getNamespaces function at line 54. Line 57 obtains all shapes. The rest of the listing iterates over the shapes, gets positions, sizes and bpmnElement-ids of the related BPMN elements and passes them to the paintShape function which performs the painting. The parsing loop for the edges is almost identical. The simplest possible paintShape implementation would look like the following.

The constructor function (lines 2-4) connects Raphael with our div and stores the Raphael instance in a variable called paper. The paper is used in the function paintShape which draws a simple rectangle using the given coordinates (line 8).
The result looks like this:

A few lines of JavaScript and we see the BPMN skeleton already. Not too bad.

Step 4: Find related process elements
In order to draw specific BPMN elements we have to determine the element type. The bpmnElement attribute that we have got in step 3 helps us to do that. We use it to get the process element by issuing an xPath expression on the DOM as you can see in the next listing (line 128).

The localName of the element is the name of the BPMN element an therefore the type such as startEvent. With this information we can implement a dispatcher to draw all BPMN elements individually (lines 130-133).

Step 5: Draw elements using Raphael and CSS
Raphael is a powerful JavaScript library that allows to paint graphical primitives easily.
The next listing shows an implementation to draw a basic BPMN task.

First the rectangle is painted (line 3) then the text is written onto the shape (lines 6-8). We can even apply CSS stylesheets to the shapes that allow very flexible customization without changing the JavaScript code (line 10). The function getCss determines the CSS class name. The simplest implementation just uses the elementType as CSS class name as you can see in the following CSS snippet.

After implementing some more type specific paint functions the result looks like this:

Step 6: Highlight paths
One of the advantages of painting the BPMN model at runtime over a static JPG like the one shown in step 1 is that it allows interactivity. For instance we could highlight the actual token flow in the model. To do that we need information about the executed BPMN steps. This can typically be obtained from a process tracking system which is part of almost every BPM product. To achieve highlighting we extend the getCss function to return a different class if the current shape is in the list of already executed steps.

We add the postfix -high to the CSS class in case the element should be highlighted. By specifying for example the class .task-high we can achieve highlighting for shapes and edges. The result is show below.

Step 7: Add interactivity
Finally we can even add interactivity to the model with a little help from Raphael.

As this can not be demonstrated using static images you can find an interactive version here. In this version you can hover over and click individual shapes to make them react.

Summary
With the help of jQuery, XMLJS, Raphael and less than 300 lines of JavaScript code, this blog post has shown how to create interactive BPMN models in your web browser. The complete demo can be downloaded here.

New Workshop! Developing Modern User Interfaces Using WinRT

I am offering a new workshop that is dedicated to developing Windows Store Apps using WinRT and related technologies such as HTML, JavaScript, CSS, XAML and C#. The workshop is intended for people who want to find out whether Windows Store Apps are a good option for your application development in addition to or instead of desktop/web application development. It takes 1 or 2 days depending on your needs and offers insights to the exiting world of Windows Store App development.

You can find more details here (German only).

HTML5 with JavaScript and CSS3 Specialist

As part of continuously maintaining my certifications, I passed the exam Programming in HTML5 with JavaScript and CSS3.
Although a lot of developers think that JavaScript is a poor programming language compared to Java or C#, mainly due to it’s weak typing and limited IDE support, it is impressive to see what you can do with it. The main key to understanding is to abandon the notion that JavaScript is an OO language. The name JavaScript is really misleading as it implies that JavaScript is close to Java. But beside the curly braces there is not much common ground.

By passing the exam I achieved the additional certification Programming in HTML5 with JavaScript and CSS3 Specialist

HTML5 Geolocation

Recently I’ve been playing with HTML5 features just to see what it can do in the area of Rich Internet Applications (RIA).

Especially geolocation, local storage and application caching got my attention.
As I don’t think privacy is a concept of the past, I thought it would be a nice use case to track a persons location and store it locally.
So I created a little Location Tracker App to show those features in action.

The required browser features are not supported on all desktop browsers. But due to the fact that most mobile webbrowsers are based on Webkit, it runs on almost any mobile device. (Using a location tracker on a fixed PC seems to be of limited use anyway ;-))

It is amazing to see what you can do with HTML5, Modernizr, KnockoutJS, jQuery and a few lines of JavaScript. For me HTML5 is an interesting option especially for mobile devices.