Refine vs React Admin: Recherche de la technologie pour l’interface d’administration de CubicWeb

<p>Temps de lecture estimé à 5 minutes.</p> <p>Cet article explique notre reflexion sur le choix de la technologie la plus adaptée entre React Admin et Refine pour refaire l'interface de notre cadriciel CubicWeb.</p> <p>Le stage d'Arnaud Vergnet s'est déroulé sur le premier semestre 2022 et son objectif était de réaliser une interface d'administration pour CubicWeb en React, en remplacement de l'interface web générée par CubicWeb.</p> <p>La communauté React est très active et on trouve de de nombreuses bibliothèques pour résoudre des problèmes récurrents, dont la réalisation d'interfaces d'administration. La première étape consistait donc à faire un état de l'art des différentes technologies disponibles pour réaliser de telles interfaces.</p> <p>De nombreuses technologies sont disponibles, mais deux se sont démarquées par la richesse de leurs fonctionnalités et leur communauté active: <strong><a href="https://refine.dev">Refine</a></strong> et <strong><a href="https://marmelab.com/react-admin">React Admin</a></strong>. Cet article va donc présenter et comparer ces deux bibliothèques ainsi que présenter le choix qui a été fait pour la suite du stage.</p> <h3><a href="https://refine.dev">Refine</a></h3> <p>Cette technologie est récente (créée en 2021). C'est une bibliothèque sans affichage (headless) de création d'interface d'administration. Cette technologie est donc indépendante de la bibliothèque de composants graphique utilisée et s'occupe seulement de la phase de récupération et modification de données grâce à des <a href="https://reactjs.org/docs/hooks-intro.html">hooks React</a>. L'avantage de cette méthode est qu'elle permet de créer plus que des interfaces d'administration car elle ne s'occupe que de la gestion des données. Il est donc possible de créer une interface complètement customisée.</p> <p>Malgré le fait d'être découplée d'une bibliothèque graphique, cette technologie propose tout de même une intégration <em>out-of-the-box</em> avec la bibliothèque <a href="https://ant.design">Ant Design</a>. Ces composants sont donc directement utilisables avec Refine sans avoir à construire une couche de compatibilité. Ant Design propose de nombreux composants de haute qualité et possède une communauté très active.</p> <h3><a href="https://marmelab.com/react-admin">React Admin</a></h3> <p>Cette technologie est bien établie (créée en 2016) et propose une solution centrée sur la création d'interface d'administration. Ici de nombreux composants utilisant la bibliothèque <a href="https://mui.com">MUI</a> sont proposés, ainsi que de nombreux hooks React pour créer ses propres composants. MUI est une autre bibliothèque de composants React très populaire suivant les règles Material Design de Google. Grâce à cette intégration avec une bibliothèque de composants, il est possible de créer une interface d'administration en peu de temps et de lignes de code. </p> <h3>Comparaison</h3> <p>Les deux bibliothèques reposent sur le même principe: l'utilisateur doit écrire un objet appelé <strong>Data Provider</strong> décrivant les méthodes pour interagir avec le serveur de données, réalisant ainsi une couche d'abstraction sur les données. Les figures 1 et 2 présentent l'interface de ces objets pour Refine et React Admin et nous pouvons remarquer que ces interfaces sont similaires. Il serait donc possible de réutiliser tout ou une partie de cet objet entre les deux technologies, améliorant ainsi leur interopérabilité.</p> <p><strong>Figure 1 : Data Provider de React Admin</strong> <img alt="Data Provider de React Admin" src="https://www.logilab.fr/file/20471724/raw/fig1.png"/></p> <p><strong>Figure 2 : Data Provider de Refine</strong> <img alt="Data Provider de Refine" src="https://www.logilab.fr/file/20471730/raw/fig2.png"/></p> <p>Comme nous pouvons le voir en figure 3, en plus de cette ressemblance pour le Data Provider, Refine et React Admin gardent une approche semblable pour résoudre le problème de génération d'interface, simplifiant encore leur interopérabilité. La différence réside principalement dans les bibliothèques de composants graphiques compatibles et donc leur utilisation finale.</p> <p><strong>Figure 3 : Comparaison de Refine et React Admin</strong> <img alt="Comparaison de Refine et React Admin" src="https://www.logilab.fr/file/20471740/raw/fig3.png"/></p> <p>Dans les deux cas il est possible de gérer les permissions et l'authentification. Les deux supportent aussi TypeScript pour avoir un typage fort afin de détecter les erreurs rapidement. Ant Design et Material design sont tout deux des bibliothèques matures avec une grande richesse de composants.</p> <p>Ces points communs rendent le choix de technologie non-trivial et expliquent pourquoi il a été décidé de se concentrer principalement sur ces deux bibliothèques. Malgré toutes ces similarités, certaines différences ont fait pencher la balance vers une des deux technologies.</p> <p>La première différence est le support de ces bibliothèques. React Admin a été créé en 2016 (React lui-même datant de 2013) et les développeurs (l'entreprise <a href="https://marmelab.com">Marmelab</a>) le maintiennent et ajoutent toujours des fonctionnalités. La version 4 est sortie pendant le stage d'Arnaud et le support réagit dans de courts délais. Refine est aussi activement maintenu par l'entreprise <a href="https://pankod.com">Pankod</a>, mais le projet est beaucoup plus récent (début 2021), il est donc plus difficile d'estimer si le projet durera dans le temps. React Admin est donc un choix plus adapté en termes de stabilité.</p> <p>Une autre différence majeure est sur l'utilisation de bibliothèques de composants d'interface. React Admin est fait pour marcher avec MUI et il serait difficile d'utiliser une autre bibliothèque sans tout réécrire. Refine quand à lui fonctionne par défaut avec Ant Design mais peut fonctionner avec n'importe quelle bibliothèque de composants. Cette liberté peut être utile pour s'adapter à n'importe quelle situation et client. En revanche il devient alors plus complexe de réaliser de simples interfaces comparé à React Admin. Pour faire une interface d'administration moderne sans besoins particuliers de design, React Admin offre alors une plus grande facilité et rapidité de développement.</p> <p>Suite à cet état de l'art, il a été choisi d'utiliser React Admin pour réaliser l'interface d'administration de CubicWeb auto-générée. Refine n'est tout de même pas abandonné. Grâce au système de data provider adopté par les deux technologies, il sera possible d'adapter la logique utilisée pour React Admin à Refine. Il sera ainsi possible d'utiliser Refine pour développer des applications utilisateurs plus complexes si le besoin se fait sentir.</p> <h3>Suite ?</h3> <p>Tous ces développements sont Open-Source et vous pouvez retrouver le code permettant d'adapter React Admin à CubicWeb sur <a href="https://forge.extranet.logilab.fr/cubicweb/react-admin-cubicweb/-/boards">la forge de Logilab</a>.</p>
12/07/202212/07/2022

Nouveaux patrons Gitlab CI pour JavaScript

<p>Temps de lecture 2 min (400 mots)</p> <p>Dans le cadre de son stage de fin d'étude à Logilab, Arnaud à été amené à travailler avec des projets JavaScript (<a href="https://forge.extranet.logilab.fr/cubicweb/cubicwebjs">CubicWebJS</a> et <a href="https://forge.extranet.logilab.fr/cubicweb/react-admin-cubicweb">react-admin-cubicweb</a>) nécessitant un processus d'intégration continue (CI) qui s'exécute sur notre forge <a href="https://heptapod.net/">heptapod</a>.</p> <p>Pour éviter de répéter le code décrivant la CI, Arnaud a écrit plusieurs scripts à utiliser comme patrons dans les projets JavaScript. Ces scripts sont intégrés au projet <a href="https://forge.extranet.logilab.fr/open-source/gitlab-ci-templates">gitlab-ci-templates</a>. Ils supposent l'utilisation de <a href="https://nodejs.org">nodejs</a> et sont compatibles avec <a href="https://yarnpkg.com/">yarn</a> et <a href="https://github.com/npm/cli">npm</a>. La détection se fait automatiquement : si le fichier <code>yarn.lock</code> est présent à la racine du projet, yarn est utilisé, sinon c'est npm. L'image de base utilisée pour tous ces scripts est <code>node:latest</code>, si vous avez besoin d'une version spécifique, vous pouvez remplacer <code>latest</code> par la version de votre choix en surchargeant le script dans votre projet.</p> <p>Voici un bref descriptif des différents scripts disponibles :</p> <ul> <li><strong>js-install</strong> : installe les dépendances listées dans le fichier <code>package.json</code> et génère un <em>artifact</em> avec le dossier <code>node_modules</code> (ou les dossiers si on est dans le cas d'un <em>workspace</em> <em>yarn</em>). Cette installation est utilisable par les étapes suivantes si elles incluent <code>js-install</code> en tant que dépendance.</li> <li><strong>js-lint</strong> : lance la commande <code>lint</code> spécifiée dans le fichier <code>package.json</code>.</li> <li><strong>js-test</strong> : lance la commande <code>test</code> spécifiée dans le fichier <code>package.json</code>.</li> <li><strong>js-build</strong> : construit le projet avec la commande <code>build</code> spécifiée dans le fichier <code>package.json</code>. Il peut être utile de générer un <em>artifact</em> avec le résultat du <em>build</em> pour le rendre utilisable lors d'une autre étape.</li> <li><strong>npm-publish</strong> : publie le projet sur <a href="https://npmjs.com"/><a href="http://npmjs.com">npmjs.com</a>. Ce script n'est lancé que lorsqu'un <em>tag</em> est détecté et seulement si les scripts de <em>test</em>, <em>lint</em> et <em>build</em> précédents ont réussi (ces scripts étant optionnels). Si vous avez généré un <em>artifact</em> avec le résultat du <em>build</em>, il sera disponible ici pour publication. Ce script considère qu'il existe une variable d'enrivonnement <code>NPM_TOKEN</code> contenant le token de connexion pour la publication. Il est possible de spécifier ce token comme variable cachée dans GitLab (et donc dans Heptapod).</li> <li><strong>webpack-publish</strong> : compile le projet en utilisant <a href="https://webpack.js.org/">webpack</a> et génère un <em>artifact</em> avec le dossier <code>public</code> pour préparer le déploiement sur les <em>Gitlab</em> <em>pages</em>. Ce script n'est executé que sur la branche <code>default</code> et seulement si les scripts de <em>test</em>, <em>lint</em> et <em>build</em> précédents ont réussi (ces scripts étant optionnels). Si vous avez généré un <em>artifact</em> avec le résultat du <em>build</em>, il sera disponible ici pour publication.</li> <li><strong>gitlab-pages</strong> : Publie le contenu du dossier <code>public</code> sur les <a href="https://docs.gitlab.com/ee/user/project/pages/index.html">Gitlab pages</a> du projet. Ce script n'est executé que sur la branche <code>default</code>. Pour l'utiliser dans vos projets, vous aurez besoin de définir vous-même ses dépendances pour pouvoir publier les résultats de compilation.</li> </ul> <p>Voici un exemple de l'utilisation de ces scripts dans le projet <a href="https://forge.extranet.logilab.fr/cubicweb/react-admin-cubicweb">react-admin-cubicweb</a> :</p> <p><img alt="" src="https://www.logilab.fr/file/18554732/raw/e852cfbe7238489c4ae60251b.png"/></p> <p>N'hésitez pas à utiliser ces scripts dans vos projets JavaScript, ils sont faits pour ça !</p>
30/05/202230/05/2022

Logilab au JDLL 2022

<p>Temps de lecture 4min (~800 mots)</p> <p>Nous poursuivons notre participation au libre en envoyant deux nouveaux logilabiens, Yoelis et Arnaud aux <a href="https://www.jdll.org/histoire">JDLL de Lyon</a>, le rendez-vous annuel de celles et ceux qui sont curieux·ses et passionné·e·s de numérique libre et émancipé. Ils y ont découvert l'actualité économique et les enjeux politiques inhérents à la pratique du libre. Ils ont également été surpris par la richesse de l'innovation qui se déploie dans ces espaces.</p> <p>Ce week-end fût riche en idées et les résumer en quelques lignes n'est pas tâche aisée. Nous nous sommes concentrés sur quelques conférences, mais vous trouverez la liste complète de <a href="https://pretalx.jdll.org/jdll2022/schedule/#2022-04-03/">toutes les conférences</a>. Les différentes discussions auxquelles ont participé nos Logilabiens tournent autour de trois grandes questions.</p> <h2>Comment défendre nos droits et s'organiser en dehors des structures verticales et traditionnelle du pouvoir ?</h2> <p>Le collectif des chatons avait des choses à en dire. Les <a href="https://www.chatons.org/">CHATONS</a>, l'acronyme de Collectif des Hébergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires, est un collectif d'hébergeurs citoyens. Ils permettent à chacun d'accéder à différents services hébergés (email, sites web, outils collaboratifs) près de chez eux afin que chacun puisse se réapproprier ses données et réduire sa dépendance aux GAFAM.</p> <p>Les étudiants de Compiègne qui ont lancé <a href="https://picasoft.net/">Picasoft</a> ont parlé de leur expérience de mise en œuvre d'un CHATONS et de la façon qu'ils ont eu de déconstruire progressivement au cours de cette expérience les structures classiques de l'organisation d'une association. Ils sont parvenus, non sans peine, à un mode de fonctionnement organique où celles et ceux qui font sont les décideurs, dans la bienveillance et l'écoute mutuelle. </p> <h2>Comment promouvoir la notion de commun, l'open-data et la réappropriation des données par les collectifs ?</h2> <p>Le langage n'est pas neutre et les dictionnaires sont imprégnés de la vision du monde de leurs auteurs et affectés par leurs conditions de production. S'il est le fruit d'un travail institutionnel, il y a un risque qu'il soit stoppé si les financements devaient s'arrêter ou si la situation politique changeait. La communauté est moins impliquée et le travail laissé à quelques sachants. La ligne éditoriale encourt un risque de censure et le contenu peut-être daté ou anachronique. Même si les projets issus de communautés ne sont pas concernés par ces problèmes, ils ont souvent du mal à atteindre les communautés érudites et ne sont pas toujours à la pointe en ergonomie et design.</p> <p>Le <a href="https://www.dictionnairedesfrancophones.org/">Dictionnaire Des Francophones</a> (DDF) a ainsi essayé de lier ces deux mondes. Basé sur les données du projet ouvert du Wiktionnaire (projet de la Fondation Wikimedia), le DDF est une initiative du ministère de la Culture pour représenter la diversité de la langue Française à travers toute la francophonie. Comparé au Wiktionnaire, le DDF possède une meilleure ergonomie et est plus facilement utilisable par d'autres applications grâce à la publication de ses données aux formats du Web Sémantique comme le RDF.</p> <p>La métropole de Lyon a bien compris l'enjeu d'impliquer la communauté et mène un projet ambitieux d'ouverture de ses données. Cette initiative multiplie ainsi les possibilités de valorisation des données par les scientifiques et les journalistes. En revanche, contrairement au DDF, les données publiées ne sont pas au format du Web Sémantique, limitant les possibles utilisations. La perspective est tout de même envisagée sur le long terme.</p> <h2>Quels outils innovants pour l'ingénierie logicielle ?</h2> <p>En parallèle des conférences, nos logilabiens ont assisté à des ateliers techniques, tels que l'atelier d'initiation à <a href="https://www.rust-lang.org/">Rust</a> et à la conception d'un jeu avec Rust.</p> <p>Rust est un langage de programmation à typage fort, garantissant l'absence d'erreurs de mémoire au moment de la compilation. Il est fortement inspiré de la famille du C avec une syntaxe moderne. Il permet différents styles de programmation, notamment fonctionnel. Contrairement au C et au C++, Rust utilise le gestionnaire de dépendances Cargo, similaire à Pip pour Python et NPM pour JavaScript. Rust est donc un langage système moderne possédant de nombreuses qualités pour simplifier le travail de ses utilisateurs, expliquant sa popularité en hausse.</p> <p><a href="https://pijul.org/">Pijul</a> est un nouveau système de contrôle de version ayant pour objectif de résoudre de multiples problèmes existants dans les solutions actuelles. Contrairement à <a href="https://git-scm.com/">Git</a> et <a href="https://www.mercurial-scm.org/">Mercurial</a> qui se basent sur la théorie des <em>snapshots</em>, Pijul suit les pas de <a href="http://darcs.net/">Darcs</a> en s'appuyant sur la théorie des <em>patchs</em>. Historiquement, l'approche par <em>snapshot</em> possède de bien meilleures performances que celle par <em>patchs</em>, mais possède de nombreux problèmes lors d'opérations complexes (<em>merge</em> ambigus). L'objectif de Pijul est de résoudre les problèmes de performances présents chez Darcs pour créer un système performant à la Git, fiable et simple à utiliser à la Darcs.</p> <h2>Bilan</h2> <p>Participer à de tels événements est toujours une source d'inspiration pour nos logilabiens. La découverte de nouvelles technologies et de nouveaux projets libres est ce qui nourrit notre activité au quotidien. Grâce aux JDLL, Logilab sera sûrement amenée à utiliser une de ces technologies lors de projets. Nous avons hâte de retrouver tout ce joli monde à la prochaine édition !</p>
13/05/202213/05/2022