We're excited to announce v4.0 of JointJS and JointJS+, the first no-dependency edition of our diagramming library! 🎉 We've listened to your feedback and concerns and have finally launched a stable version that does not use jQuery, Backbone, and Lodash. Among other benefits, this update makes our library leaner without changing the core functionality.
The latest release brings more improvements, and we will briefly go through them in this blog post. If you want to dig into all the technical details of this release, we encourage you to read the full changelog.
"Version 4.0 is a milestone we have all been waiting for. We were aware of the counterintuitive parts of our code base and the dependency on legacy libraries—the latest version addresses these issues. We refined the API to improve onboarding and eliminated external dependencies to enhance performance and gain complete control over our library," adds Roman Brückner, the company's CTO.
⚠️ Important: Version 4.0 introduces breaking changes. Therefore, JointJS+ customers should read the migration guide from 3.7 to 4.0 to ensure smooth transition to the latest version.
As stated earlier, we now introduce a dependency-free edition that does not rely on jQuery, Lodash, and Backbone. This long-awaited improvement makes our library leaner (decreases the package size as demonstrated below) and empowers us to fully control the core functionality, and make adjustments to our customers' specific needs. The level of customizability of JointJS and JointJS+ is one of our prides, and version 4.0 enables us (and you) to adjust the library without making any compromise.
Let's sum up the key benefits of this update:
On the topic of the decreased package size, below is a visual example illustrating the structure of a simple visual application built with JointJS. Before version 4.0, the total size of the application, including external JointJS dependencies, was 1.94MB. With the release of version 4.0, the application size was reduced to 1.1MB, achieving a 44% improvement.
BPMN, standing for Business Process Model and Notation, is a standardized modeling language and notation system extensively utilized by corporations to graphically depict their business processes. It enables companies to document, analyze, and optimize their workflows in a comprehensive manner. BPMN models can be serialized into an XML format, known as BPMN XML, facilitating the easy exchange and storage of business process diagrams across various BPMN-compliant tools, such as BPMN editors and automation engines. In JointJS+ 4.0, a BPMN diagram can be seamlessly imported from or exported to XML, enhancing collaboration across the entire BPMN tool suite.
We have eliminated obsolete code, aiming not only to enhance performance but also to make your interaction with our codebase more intuitive. Debugging becomes easier with improved error messaging; all diagrams are, by default, faster and visually more appealing. Moreover, specific parts of the package were separated, further reducing the package size. This is evident in the case of shapes that can still be copied from our examples and used in your project but are not included in the package.
Additionally, with version 4.0, we are taking another significant step towards becoming a fully modular diagramming library and building an ecosystem that benefits from our core functionalities and other widely used technologies. The result will be a plethora of advanced features in the form of modules that combine the strengths of our core functionality and other technologies such as D3, Cytoscape, or Graphviz and can optionally be used in your project but are not part of the JointJS and JointJS+ core by default. In our backlog (feel free to add your ideas on what to do next, by the way), there are lots of useful features that you can expect in the upcoming weeks! 🙌
The source code of a recently published demo application, the Image Processor, is now part of the JointJS+ package, helping you to copy and paste our work and reuse it for your own project as a boilerplate. The Image Processor application enables you to manipulate images using filters and transformation tools in a node-based manner. To access the source code, download the latest version of JointJS+ in our customer portal, or start a free trial.
You can get a complete overview of what's new by reading our full changelog. If you're ready to start building with JointJS+ 4.0, choose one of these paths:
Excited to shape the future of diagramming with us? Share your ideas for new features and improvements on our GitHub and influence what the next JointJS and JointJS+ versions will look like.