HTML5 web app: ARIS ModelViewer
I’m very glad the folks of HTML 5 Tutorials give me the chance to show you the HTML5-based model viewer app my company developed. I work for Software AG (in business since 1969!), which you might know from the SOA infrastructure market with our webMethods and CentraSite products. We also market a complete suite for business process analysis under the ARIS brand. Customers use ARIS to document and analyze their internal processes and organization.
Before I bore you with a long explanation about enterprise modeling, let’s take a look at an example and see our HTML5-based model viewer at work:
An organizational chart is normally used to document the formal structure of your company. In the example above, I created a family tree of the British Royals. After visualizing them, I analyzed the model and marked those spots where we can still become part of it I created the model using our free modeling tool ARIS Express and uploaded it to the belonging community page. Of course, you can do more serious stuff with the tool like documenting the Scrum process.
At the heart of model viewer, we use HTML5’s canvas to do all the drawing directly in the browser. Besides panning and zooming, you can also enlarge the model to your browser window or embed it in your blog. Our lead developer posted a complete feature overview of model viewer.
While developing the viewer, we faced many challenges like those models should look the same as in the ARIS Express tool. Also, we have to support Microsoft Internet Explorer as it is still the default browser in many corporations. To solve this, we added a browser switch so that Flash gets used in case of Internet Explorer. This Flash version renders much slower, which seems to be a clear indication that with the advent of HTML5, Flash is a technology of the past. If you wish to do some benchmarking between the HTML5 canvas and Flash, take a look at this remake of the complete first level of Super Mario. We also experimented with SVG, but it seems it has the same future as Flash does.
I think our model viewer proves that HTML5 is not just ready to create visually appealing websites, but also the web apps of tomorrow.