Mats Bryntse
25 April 2019

Announcing Bryntum Gantt 1.0

After almost three years of planning, designing and implementing we are absolutely thrilled to announce the 1.0 version of our […]

After almost three years of planning, designing and implementing we are absolutely thrilled to announce the 1.0 version of our brand new Bryntum Gantt. It is built from the ground up with ES6+ and TypeScript, no third party code or framework has been used. As a result – it integrates seamlessly with Angular, React and Vue or any other framework for that matter. In this blog post we will give you an introduction to our latest addition to our JavaScript component suite.

[vc_row][vc_column][vc_raw_js el_id=”gantt-container” el_class=”image”]JTNDc2NyaXB0JTNFJTBBdmFyJTIwbGluayUyMCUzRCUyMGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQlMjglMjdsaW5rJTI3JTI5JTNCJTBBbGluay5yZWwlM0QlMjdzdHlsZXNoZWV0JTI3JTNCJTBBbGluay5ocmVmJTIwJTNEJTIwJTIyLi4lMkYuLiUyRmRpc3QlMkZnYW50dCUyRmJ1aWxkJTJGZ2FudHQuc3RvY2tob2xtLmNzcyUyMiUzQiUwQWRvY3VtZW50LmhlYWQuYXBwZW5kQ2hpbGQlMjhsaW5rJTI5JTNCJTBBJTBBd2luZG93LmxvYWRTYW1wbGUlMjAlM0QlMjBmdW5jdGlvbiUyOCUyOSUyMCU3QiUwQSUyMCUyMCUyMCUyMHZhciUyMHNjcmlwdCUyMCUzRCUyMGRvY3VtZW50LmNyZWF0ZUVsZW1lbnQlMjglMjdzY3JpcHQlMjclMjklM0IlMEElMjAlMjAlMjAlMjBzY3JpcHQuc3JjJTNEJTIwJTI3JTJGZXhhbXBsZXMlMkZsaXZlJTJGZ2FudHQlMkZiYXNpYyUyRmFwcC51bWQuanMlMjclM0IlMEElMjAlMjAlMjAlMjBkb2N1bWVudC5ib2R5LmFwcGVuZENoaWxkJTI4c2NyaXB0JTI5JTNCJTBBJTdEJTNCJTBBJTBBdmFyJTIwc2NyaXB0JTIwJTNEJTIwZG9jdW1lbnQuY3JlYXRlRWxlbWVudCUyOCUyN3NjcmlwdCUyNyUyOSUzQiUwQXNjcmlwdC5hc3luYyUyMCUzRCUyMHRydWUlM0IlMEFzY3JpcHQuZGVmZXIlMjAlM0QlMjB0cnVlJTNCJTBBc2NyaXB0Lm9ubG9hZCUzRGxvYWRTYW1wbGUlM0IlMEFzY3JpcHQuc3JjJTNEJTIyLi4lMkYuLiUyRmRpc3QlMkZnYW50dCUyRmJ1aWxkJTJGZ2FudHQudW1kLmpzJTIyJTNCJTBBZG9jdW1lbnQuYm9keS5hcHBlbmRDaGlsZCUyOHNjcmlwdCUyOSUzQiUwQSUzQyUyRnNjcmlwdCUzRQ==[/vc_raw_js][vc_column_text]

Background

It is now over 10 years since we announced the first version of Ext Gantt, built on Ext JS 3. See below for a view into the past:


A few years ago, we saw a massive rise in popularity of frameworks like React, Angular and Vue. At Bryntum, we then made an internal strategic decision to have first class support for these. Supporting those frameworks with our existing Ext JS based suite was not really an option due to the size of Ext JS and the reluctance of developers to add another framework just to get a Gantt or scheduler component into their application. This of course meant we had to roll our own lightweight version of all the nice Ext JS components and classes used by Ext Scheduler and Ext Gantt, such as text field, date picker and so on. If you have tried our new pure JS Grid or Scheduler then you have probably seen these new supporting “framework” widgets in action already.

Architecture Overview

Bryntum Gantt and Scheduler both build on top of our new Grid component which provides columns, multiple sections, virtual high performance rendering and so much more. Under the hood of the Grid you also find our new light weight framework (in the “Common” namespace) which provides a lot of the core infrastructure such as Model, Store and date manipulation functionality. The Gantt chart adds to this its own UI layer with task bars, task editor and dependencies and so on. But perhaps the most interesting improvements compared to Ext Gantt is the new scheduling engine and the easy integration with React, Angular and Vue.

Integration with Vue / Angular / React

One of the major goals we had with the new component suite is first class integration of Bryntum Gantt with all the popular JavaScript frameworks. It is now not only possible but also very easy. Take a look at our Integration examples group and click on the example for the framework you use.

All examples use the pure JS Gantt chart component and creates a wrapping container and when the container is mounted in the DOM, the examples render the Gantt and a Toolbar into the resulting container.

All events such as drag & drop, button clicks, undo/redo and task editing are handled within the Gantt and Toolbar classes internally. There are already more examples being written to demonstrate all the features using each framework and to make your integration as smooth as can be.

A Brand New Scheduling Engine

A notable difference compared to Ext Gantt is that all the data and business logic has been moved to a separate project, which we call the “scheduling engine”. It is based on our open source Bryntum Labs project “ChronoGraph” which is a reactive, graph-based, computation engine written in TypeScript.

In Ext Gantt, all the logic for task scheduling was kept inside the Store and Model classes. This had a big disadvantage in that the scheduling engine relied on Ext JS classes, and Ext JS itself is tied to the DOM. This prevented anyone from running the scheduling engine on the server side with Node. The new engine is written as “isomorphic” code, which runs equally well in browsers and Node.js.In the upcoming releases, we will be adding support for running it on the server-side.

When you update a task, the Gantt engine will propagate the change and recompute all dependent tasks asynchronously and this results in a delta that the Gantt chart then animates (configurable).

Fast and ubiquitous computational core

ChronoGraph has been designed from the ground up to suit our specific needs of recomputing really big data sets, with complex internal dependencies between data entries. The computation needs to be interruptible to allow intermediate user input and of course it has be very performant. The new scheduling engine is already twice as fast as the old version, with more performance tuning in the pipeline.

Extensibility in the core

Another important improvement is the design of the scheduling engine. It is now much easier to customize its logic. Every scheduling feature is isolated in a separate TypeScript mixin, so one can plug a new feature, change or completely replace the existing ones, all without interfering with the remaining system. In future releases we will extend the docs and provide guides with examples how this is done.

No limits

In the old Ext JS version there was a fixed limitation of how many tasks could be connected in one chain, due to the recursive nature of the algorithm used. In the new version there is no such limit and the engine handles projects of any size very well.

Improved Design

The new Gantt chart is much easier to theme since it’s now “just” about styling Bryntum components using our SASS files (whereas earlier you had to apply your theme to both Ext JS and Ext Gantt). Here’s a preview of our five included themes:[/vc_column_text][vc_row_inner][vc_column_inner][vc_gallery interval=”3″ images=”18209,18208,18207,18206,18205″ img_size=”full” css=”.vc_custom_1556176976623{margin-right: 20% !important;margin-left: 20% !important;}”][/vc_column_inner][/vc_row_inner][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]

Performance

A huge advantage of having made our own Gantt chart including all Grid infrastructure is that we now have full control over the render loop. It has been optimized to perform the absolute minimum inside it to ensure a smooth scrolling experience aiming for 60 FPS. The Ext JS Gantt used the Ext JS Classic grid which is amazingly full of features but it doesn’t perform very well when using large data sets. We measured the scroll performance with 10k tasks and 7k dependencies in both Gantt charts and here is the result in FPS:[/vc_column_text][vc_line_chart style=”modern” x_values=” ;Gantt for Ext JS; ;Bryntum Gantt ; ” values=”%5B%7B%22title%22%3A%22Scrolling%20FPS%22%2C%22y_values%22%3A%22%20%3B36%3B%20%3B56%3B%20%22%2C%22color%22%3A%22blue%22%7D%5D” el_class=”fps-chart”][vc_column_text]The performance is pretty good already but we already have more performance tuning work in the pipeline.

Bryntum Gantt vs Ext Gantt

Ext Gantt still has more features than Bryntum Gantt, as it is almost 10 years old, but we will continue to fill the feature gap until we reach feature parity. To learn more about which features have been ported, please see this comparison page. We very much encourage you to tell us which features you want us to prioritize. Please send us a message or write a comment on this blog post.

Migrating from Ext Gantt to Bryntum Gantt

If you are using Ext JS as your application framework you won’t benefit much from migrating unless you need the extra performance boost. If you are using Ext Gantt in applications based on React, Angular or Vue you could definitely benefit from migrating to the new version to get a more seamless integration and better performance. We will publish migration guides for the new Scheduler and Gantt in the coming months.

Summing Up

Over the coming weeks, we will publish additional posts covering features, integration and performance of the Bryntum Gantt. We encourage you to provide us feedback on the existing feature set and which missing features are important to you. To try the new Gantt chart, please click the button below and fill out the form.

Download Free Trial[/vc_column_text][/vc_column][/vc_row]

Mats Bryntse

Bryntum Gantt Company updates