JointJS+ and GoJS are diagramming frameworks you can use to craft high-tech products. They have similar purposes and share common functionalities. Although these two seem similar, one should not assume they are the same.

Here, we will explore the similarities and differences between GoJS and JointJS+ in terms of their performance in the real-life use case.

The following example shows the case of the shopfloor monitoring system, which is aimed at fast diagramming performance with thousands of objects on one screen. The client has struggled with prolonged rendering time and poor object readability while showcasing a heavy data load. The client wanted to get the visual libraries' comparison in terms of performance. That's why we decided to prepare the JointJS+ and GoJS comparison, especially for the client's request.

GoJS and JointJS+ – the Comparison of the Two Diagramming Frameworks

When choosing the most appropriate diagramming framework for creating your tool, select the one that meets your technical requirements and removes the limitations.

Looking at the two popular frameworks: GoJS and JointJS+, you can see the differences starting from the simple descriptions:

1. GoJS is a JavaScript library that enables the creation of interactive diagrams in modern web browsers quickly and easily. It supports graphical templates and data-binding of visual object properties to model data.
2. JointJS+ is the extended version of the JointJS library (Rappid), offering a wide range of customizable features, ready-to-implement demo apps, and white-glove support. It's based on a commercial license and source code. JointJs+ enables more than 40 UI features, over 100 ready-to-use demo applications, and dedicated developer support.

Similarities and differences between the GoJS and JointJS+

There are plenty of similarities between GoJS and JointJs+. Both are Javascript Libraries useful in quickly and easily creating interactive diagrams in modern web browsers. They offer essential UI features, graphical templates, and data binding.

GoJS is the JavaScript library provided by Northwoods Software for SaaS and Web-based clients. It's mainly made for JavaScript and TypeScript developers looking for diagramming libraries. JointJS+ directs its features to SaaS and Web-based clients. However, its audience is primarily developers and companies of any size.

JointJS+ allows developers to create diagrams and flowcharts using a flexible and extensible API. It is based on the popular Raphael JavaScript library and supports various diagram types, including UML, BPMN, and flowcharts. JointJS+ also provides a wide variety of tools and features for creating and editing diagrams, including snapping, alignment, and automatic routing.

GoJS is a commercial library that allows developers to create diagrams and flowcharts. It provides various features for creating and editing diagrams, including automatic layout, data binding, and a large selection of built-in shapes. GoJS also includes many advanced features, such as support for real-time collaboration and automatic diagram generation from data.

Both libraries provide various types of support: business hours and online. They also offer API as the interface for using the library and the library documentation. You can count on live online training and documentation when deciding on GoJS. JointJS+ provides its clients with two types of paid support: standard and premium, including support hours, dedicated top-tier engineers, and quick response. Also, you can use an online ticketing system or discuss on Github when having essential support.

We can't forget about pricing. When choosing JointJS+, you get the free version and trial. The price per developer is $2900. For GoJS, it's $3495 with a possible free trial.

What makes the two libraries similar are:

1. Purpose, i.e., building all kinds of interactive diagrams such as flowcharts, org charts, SCADA, genograms, and more.
2. Scalability, i.e., introducing the new add-ons, is accessible regardless of the framework, so both technologies are suitable for writing fully scalable applications.
3. Software Architectural Pattern, i.e., they both use the MVC model (Model-View-Controller), so the developer takes care of how the application logic looks and integrates. Apps built in the MVC pattern have a greater security level because the responsibility is split into three roles which enables finding possible mistakes faster.
4. Pre-made components, i.e., both libraries, enable ready-made features for building custom diagrams. They accelerate the development process.

There are also some differences:

1. Rendering engine, where GoJS uses HTML5 canvas and JointJS+ relies on SVG.
2. Performance, where Canvas performs better with large numbers of objects than SVGs.
3. If you use JointJS+, thanks to being based on SVG, it's easier to style the elements, especially if someone knows SVG before.
4. In GoJS, styling is library-specific, and you must learn it repeatedly.
5. Knowledge base, where GoJS provides more examples of apps and features. However, JointJS+ provides more tutorials.

Performance Check with the Shopfloor Monitoring System Use Case

Which JavaScript library is better – GoJS or JointJS+? Let's check out the use case showing interesting performance capabilities outcomes.

Problem Overview – Presenting Thousands of Data Objects on Canvas

A world-leading car company struggled with a performance issue with its diagram application. It's made for monitoring the status of sensors and machines on a canvas. Synergy Codes was responsible for developing an appropriate and primary POC for the client.

The primary assumption of the project is the ability to display data downloaded from the backend via WebSocket as quickly as possible. This data is presented in a diagram, and the goal is to avoid slowing down its operation when downloading and displaying a large amount of data.

Additionally, the client requested a smooth update of the data on the diagram, whereby the more data displayed, the more frequent data rendering is required. If you need regular rendering, you encounter a performance problem: a drop in FPS and responsiveness.

The client also asked for a solution to graphically present the processing of signals from thousands of sensors on a canvas. Our team has also developed advanced diagram animations for the client's requirements.

Solution – Delivering GoJS Features

The development team prepared two PoCs for the client to prove they could render many elements on a workspace in less than a few seconds.

As part of the first PoC, we presented the power of GoJS:

• We created our own backend that sent signals to the front end.

• Data were displayed on the front end.

• We added a custom layout according to the client's guidelines.

• We used virtualization, which allows you to smoothly animate the data on the visible part of the canvas while freezing those not covered by the canvas view.

The second PoC was to show the smooth operation of tens of thousands of objects on the screen.

Results – Faster Diagram Rendering

The project aimed to compare the rendering speed of two popular visual libraries when 10,000 objects were included in the diagram. The client wanted to compare the capabilities of GoJS and JointJS+ to get the best possible solutions and address the need to speed up the performance of the diagram.

Note that the name Rappid is used for JointJS+ (as JointJS+ used to be Rappid).

To test this, our developers experimented. They built a series of objects that resembled the diagram and added a timer to determine how long it took for all entities to load.

Here are the results:

The GoJS diagram loaded in less than two seconds at 60 fps. As you can see, 204 ms is 0.2 seconds, and the human eye blinks at 330 ms.

The diagram in JointJS+ loaded in more than two seconds at about 20 fps., which is 4.8 seconds. That is a huge difference.

Benefits – Fast Performance of the Tool

In this case, the choice of GoJS as a library for building diagrams was justified. The tool we provided to the client as part of PoC met the basic assumptions and convinced him of the possibilities offered by GoJS as a powerful visual framework.

The client delivered the well-operating tool faster, so the teams could manage their tasks more smoothly. Moreover, the data display enabled faster and better work thanks to the intuitive UX and well-designed UI.

The question is still: what to choose: GoJS or JointJS+ for your application?

Let's summarize the concept with key points of comparison, except performance range:

1. User Interface
   GoJS can surprise you with a more modern and polished user interface with a broader range of built-in shapes and layout options.
   JointJS+, on the other hand, delivers a rather primary yet more flexible and customizable user interface.
2. Data binding
   GoJS has a more powerful and flexible data binding system, allowing for easy diagram data synchronization with external data resources.
   JointJS+ is simpler, but still, it is sufficient for most projects.
3. Interaction and editing
   GoJS offers many built-in tools for editing and interacting with diagrams. These features are: undo/redo, copy/paste, etc.
   JointJS+ is also a rich visual library for creating custom and scalable features. It works well with popular frameworks and web browsers.
4. Ease of use
   GoJS is known to be easy to learn and use. It has a rich set of APIs and a lot of examples.
   JointJS may be more complex to use and requires more knowledge of JavaScript.

It's worth mentioning that both libraries are well-documented, have good community support, and have a variety of examples and demos available on their websites. The choice between the two libraries will depend on the specific needs of your project and the available budget.

For more GoJS possibilities, you can go to our YouTube channel to watch the video about preparing a diagramming app in a few minutes (Polish only).

https://youtu.be/LiOEQp-Y2kI

Check out the GoJS consultancy possibilities, too, or look at the front-end services we provide to bring your data to the next level.