Intégrer une librairie complexe dans un projet React.js : Étude de cas Bryntum Scheduler

En développement web, la sélection et l’intégration de librairies peuvent présenter de véritables défis, mais aussi de réelles opportunités. C’est l’histoire que nous raconte Vincent, un développeur de l’équipe NetDevices, à propos d’un projet récent pour Quantic Dream, un studio renommé dans le développement de jeux vidéo (Beyond : Two Souls, Heavy Rain, Detroit : Become Human). Ce dernier a euu un fort besoin de coordination entre les différentes équipes et de visibilité globale sur le projet. Étant donné que les outils de JIRA n’ont pas suffit, Quantic Dream a fait la commande d’une roadmap.

Une nouvelle roadmap pour Quantic Dream

Le projet a consisté à améliorer la visibilité et la coordination entre toutes les tâches des projets de la roadmap de Quantic Dream. Pour cela, un projet frontend a été mis en place. Il a consisté à récupérer les données des projets à partir d’une API (développée en Node.js par Hoang, CTO de l’agence). Les données récupérées ont permis ainsi à Vincent de présenter les informations de la façon souhaitée. Le choix s’est porté sur la combinaison de Javascript (React), pour sa souplesse et son efficacité, et la librairie Bryntum Scheduler, pour sa capacité à gérer et présenter des plannings complexes.

Voici une capture d’écran réalisée sur le site. Elle démontre ce que leur outil permet de faire :

L’art d’intégrer une librairie complexe

L’intégration d’une librairie complexe comme Bryntum Scheduler nécessite une lecture approfondie de la documentation. Comprendre comment se servir de la librairie est crucial pour anticiper ce qu’on peut faire et ne pas faire. C’est un travail important d’équilibrage entre l’utilisation d’une solution clé en main, qui peut répondre rapidement aux attentes, et le développement d’un projet fait main, qui permet une plus grande personnalisation. Si certaines demandes du client ne sont pas réalisables, il est nécessaire de discuter avec lui d’alternatives. Notamment celles qui sont offertes par la librairie.

Challenges : Documentation et compréhension

La mise en œuvre d’une librairie majeure comme Bryntum Scheduler requiert une bonne compréhension de la documentation. Le premier piège est de se précipiter sur une librairie. Même si celle-ci semble résoudre tous les problèmes, elle peut en poser d’autres une fois qu’on essaie de la mettre en œuvre. La capacité à anticiper ces problèmes est fondamentale pour éviter un engrenage difficile à dénouer une fois le projet lancé.

Alternatives techniques : Peser le pour et le contre

La programmation offre souvent plusieurs voies pour aborder un sujet. Dans ce cas, la question s’est posée. Doit-on développer un outil de planification en interne ou utiliser une librairie existante ? Le développement interne ne nécessite pas de lire une documentation, permet de contrôler l’ensemble du code (une partie du fonctionnement d’une librairie complexe est un peu une “boîte noire” qu’il est difficile voire impossible de changer) et d’offrir une personnalisation totale.

Toutefois le choix s’est orienté sur l’utilisation d’une librairie comme Bryntum Scheduler. Celle-ci nous permet en effet un gain de temps considérable sur la mise en œuvre de l’outil de planification.

Un exemple de code

Dans ce projet, la librairie Bryntum Scheduler est utilisée comme un composant React majeur, fournissant une représentation visuelle complète de la roadmap du projet. Ce composant encapsule une grande partie de la logique de planification, rendant la gestion de la roadmap à la fois simple et efficace.

Voyons comment cela fonctionne dans le code :

Dans ce bloc de code, nous passons un certain nombre de paramètres à notre composant BryntumScheduler. Les données du projet (ressources, événements, dépendances et jalons) sont fournies, de même que les limites du projet, définies par les dates de début et de fin du projet, ajustées par une certaine marge.

Le composant prend ensuite ces paramètres et les présente visuellement selon les configurations spécifiées : nous voulons telle mise en forme, présenter telles infos, que la période s’étende de telle date à telle date, etc. . Le composant se charge ensuite de nous offrir une présentation spécifique (voir l’image ci-dessous). Notez que certaines configurations, comme columns, eventRenderer et eventTooltipFeature, nécessitent l’utilisation de fonctions pour être générées correctement.

Cet exemple démontre l’efficacité et la flexibilité d’une librairie complexe comme Bryntum Scheduler. Avec une configuration adéquate, elle peut transformer un ensemble de données complexes en une présentation visuelle claire et intuitive.

En résumé : le juste équilibre

L’expérience de Vincent souligne ainsi la richesse et la complexité des choix technologiques dans le développement web. L’intégration d’une librairie complexe comme Bryntum Scheduler dans un projet React.js nécessite une compréhension approfondie de la documentation, une anticipation des problèmes potentiels et une évaluation précise des avantages et des inconvénients par rapport aux alternatives.

La clé de la réussite réside alors dans l’équilibre entre la rapidité de mise en œuvre et la possibilité de personnalisation, sans oublier la capacité à rester flexible face aux défis inattendus qui peuvent surgir.

Chez NetDevices, nous excellons dans la navigation au sein de ces défis et nous nous engageons à transformer les complexités en solutions optimisées pour nos clients. Que vous soyez à la recherche d’une solution clé en main ou que vous souhaitiez développer un outil sur mesure, notre équipe de développeurs expérimentés est prête à vous aider.

Si vous êtes confronté à un défi de développement similaire, ou si vous voulez simplement discuter des possibilités, n’hésitez pas à nous contacter. Nous sommes impatients de travailler avec vous pour transformer vos projets en réalités concrètes et réussies.

NetDevices, votre partenaire de confiance pour les solutions de développement web. 

[wpforms id="9980" title="false"]
<div class="wpforms-container wpforms-container-full" id="wpforms-9980"><form id="wpforms-form-9980" class="wpforms-validate wpforms-form wpforms-ajax-form" data-formid="9980" method="post" enctype="multipart/form-data" action="/integrer-une-librairie-complexe-dans-un-projet-react-js-etude-de-cas-bryntum-scheduler/" data-token="607587a15350725325afead1ba950707"><noscript class="wpforms-error-noscript">Veuillez activer JavaScript dans votre navigateur pour remplir ce formulaire.</noscript><div class="wpforms-field-container"><div id="wpforms-9980-field_3-container" class="wpforms-field wpforms-field-layout" data-field-id="3"><label class="wpforms-field-label wpforms-label-hide" for="wpforms-9980-field_3">Layout</label><div class="wpforms-field-layout-columns wpforms-field-layout-preset-50-50"><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_0-container" class="wpforms-field wpforms-field-name" data-field-id="0"><label class="wpforms-field-label" for="wpforms-9980-field_0">Résumé / Pitch du projet <span class="wpforms-required-label">*</span></label><input type="text" id="wpforms-9980-field_0" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][0]" required></div><div id="wpforms-9980-field_16-container" class="wpforms-field wpforms-field-radio wpforms-conditional-trigger" data-field-id="16"><label class="wpforms-field-label" for="wpforms-9980-field_16">J&#039;ai une description détaillée du projet</label><ul id="wpforms-9980-field_16"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_16_1" name="wpforms[fields][16]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_16_2" name="wpforms[fields][16]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_16_2">Non</label></li></ul></div><div id="wpforms-9980-field_18-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="18" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_18">Vous avez des technos en tête ?</label><ul id="wpforms-9980-field_18"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_18_1" name="wpforms[fields][18][]" value="fullstackJS / python" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_1">fullstackJS / python</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_18_2" name="wpforms[fields][18][]" value="nocode bubble" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_2">nocode bubble</label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_18_3" name="wpforms[fields][18][]" value="autre" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_18_3">autre</label></li></ul></div><div id="wpforms-9980-field_19-container" class="wpforms-field wpforms-field-checkbox wpforms-conditional-field wpforms-conditional-show" data-field-id="19" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_19">Type de projet</label><ul id="wpforms-9980-field_19"><li class="choice-1 depth-1"><input type="checkbox" id="wpforms-9980-field_19_1" name="wpforms[fields][19][]" value="Applications web / mobiles" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_1">Applications web / mobiles</label></li><li class="choice-2 depth-1"><input type="checkbox" id="wpforms-9980-field_19_2" name="wpforms[fields][19][]" value="Projet data, IA " ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_2">Projet data, IA </label></li><li class="choice-3 depth-1"><input type="checkbox" id="wpforms-9980-field_19_3" name="wpforms[fields][19][]" value="Site vitrine / e-commerce" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_19_3">Site vitrine / e-commerce</label></li></ul></div><div id="wpforms-9980-field_12-container" class="wpforms-field wpforms-field-textarea wpforms-conditional-field wpforms-conditional-show" data-field-id="12" style="display:none;"><label class="wpforms-field-label" for="wpforms-9980-field_12">Description détaillée de votre projet </label><textarea id="wpforms-9980-field_12" class="wpforms-field-medium" name="wpforms[fields][12]" ></textarea></div></div><div class="wpforms-layout-column wpforms-layout-column-50"><div id="wpforms-9980-field_1-container" class="wpforms-field wpforms-field-email wpforms-one-third" data-field-id="1"><label class="wpforms-field-label" for="wpforms-9980-field_1">Votre e-mail <span class="wpforms-required-label">*</span></label><input type="email" id="wpforms-9980-field_1" class="wpforms-field-small wpforms-field-required" name="wpforms[fields][1]" required></div><div id="wpforms-9980-field_17-container" class="wpforms-field wpforms-field-radio" data-field-id="17"><label class="wpforms-field-label" for="wpforms-9980-field_17">Signer un accord de confidentialité ?</label><ul id="wpforms-9980-field_17"><li class="choice-1 depth-1"><input type="radio" id="wpforms-9980-field_17_1" name="wpforms[fields][17]" value="Oui" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_1">Oui</label></li><li class="choice-2 depth-1"><input type="radio" id="wpforms-9980-field_17_2" name="wpforms[fields][17]" value="Non" ><label class="wpforms-field-label-inline" for="wpforms-9980-field_17_2">Non</label></li></ul></div></div></div></div><div id="wpforms-9980-field_22-container" class="wpforms-field wpforms-field-checkbox" data-field-id="22"><ul id="wpforms-9980-field_22"><li class="choice-1 depth-1 wpforms-selected"><input type="checkbox" id="wpforms-9980-field_22_1" name="wpforms[fields][22][]" value="Recevoir les newsletters personnalisées" checked='checked'><label class="wpforms-field-label-inline" for="wpforms-9980-field_22_1">Recevoir les newsletters personnalisées</label></li></ul></div></div><div class="wpforms-submit-container"><input type="hidden" name="wpforms[id]" value="9980"><input type="hidden" name="wpforms[author]" value="8"><input type="hidden" name="wpforms[post_id]" value="11876"><button type="submit" name="wpforms[submit]" id="wpforms-submit-9980" class="wpforms-submit" data-alt-text="Envoi..." data-submit-text="Envoyer" aria-live="assertive" value="wpforms-submit">Envoyer</button><img src="https://www.netdevices.fr/wp-content/plugins/wpforms/assets/images/submit-spin.svg" class="wpforms-submit-spinner" style="display: none;" width="26" height="26" alt="Chargement en cours"></div></form></div> <!-- .wpforms-container -->