Integrating a complex library into a React.js project: Bryntum Scheduler case study

In web development, the selection and integration of libraries can present real challenges, but also real opportunities. Vincent, a developer on the NetDevicestells us an anecdote about a recent project for Quantic Dream. This is the renowned video game development studio (Beyond: Two Souls, Heavy Rain, Detroit: Become Human). The latter had a strong need for coordination between the various teams and for global visibility on the project. Since JIRA's tools were not enough, Quantic Dream commissioned a roadmap.

A new roadmap for Quantic Dream

The project improves visibility and coordination between all project tasks on Quantic Dream's roadmap. To achieve this, we had to set up a front-end project. Its aim was to retrieve project data from an API (developed in Node.js by Hoang, the agency's CTO). The data thus retrieved enables Vincent to present the information in the desired way. The choice fell on a combination of Javascript (React), for its flexibility and efficiency, and the Bryntum Scheduler library, for its ability to manage and present complex schedules.

Here's a screenshot taken from the site. It demonstrates the capabilities of their tool:

The art of integrating a complex library

Integrating a complex library like Bryntum Scheduler requires a thorough reading of the documentation. Understanding how to use the library is crucial to anticipating what you can and can't do. It's an important balancing act between using a turnkey solution, which can quickly meet expectations, and developing a hand-crafted project, which allows for greater customization. If certain customer requests are not feasible, it is necessary to discuss alternatives with them. In particular, those offered by the bookshop.

Challenges: Documentation and understanding

Implementing a major library like Bryntum Scheduler requires a good understanding of the documentation. The first trap is to rush into a library. Even if it seems to solve every problem, it may pose others once you try to implement it. The ability to anticipate these problems is fundamental to avoid a spiral that is difficult to unravel once the project has been launched.

Technical alternatives: Weighing the pros and cons

Programming often offers several ways of approaching a subject. In this case, the question arose. Should we develop a planning tool in-house, or use an existing library? In-house development does not require reading documentation. This means you can control all the code. In other words, part of the operation of a complex library is a kind of "black box" that is difficult, if not impossible, to change. The added advantage is total customizability.


The choice ist then turned to the use of a library such as Bryntum Scheduler. It saves a considerable amount of time in implementing the planning tool.

An example of code

In this project, the Bryntum Scheduler library is used as a major component React . It provides a complete visual representation of the project roadmap. This component encapsulates much of the planning logic, making roadmap management both simple and efficient.

Let's see how it works in the code:

In this block of code, we pass a number of parameters to our BryntumScheduler component. Project data (resources, events, dependencies and milestones) are supplied. We also include the project limits, defined by the project start and end dates. These are adjusted by a certain margin.

The component then takes these parameters and presents them visually according to the specified configurations. For example: we want this layout, we want to present this information, we want the period to run from this date to that date, etc... . In addition, some configurations, such as columns, eventRenderer and eventTooltipFeature, require the use of functions to be generated correctly.

This example demonstrates the efficiency and flexibility of a complex library like Bryntum Scheduler. With the right configuration, it can transform a complex data set into a clear and intuitive visual presentation.

In short: the right balance

Vincent's experience underlines the richness and complexity of technological choices in web development. Integrating a complex library such as Bryntum Scheduler into a React.js project requires a number of conditions. It requires a thorough understanding of the documentation, anticipation of potential problems and a precise evaluation of the advantages and disadvantages of the alternatives.

The key to success lies in the balance between speed of implementation and customizability. You must not not forgetting the ability to remain flexible in the face of unexpected challenges.

At NetDevices, we excel at navigating these challenges. We are committed to transforming complexities into optimized solutions for our customers. Whether you're looking for a turnkey solution or want to develop a custom tool, our team of experienced developers is ready to help.

If you're facing a similar development challenge, or just want to discuss the possibilities, Contact Us. We look forward to working with you to turn your projects into concrete, successful realities.

NetDevicesyour trusted partner for web development solutions.