[{"cw_etype": "BlogEntry", "eid": 20471791, "title": "Refine vs React Admin: Recherche de la technologie pour l\u2019interface d\u2019administration de CubicWeb", "content": "Temps de lecture estim\u00e9 \u00e0 5 minutes.\r\n\r\nCet article explique notre reflexion sur le choix de la technologie la plus adapt\u00e9e entre React Admin et Refine pour refaire l'interface de notre cadriciel CubicWeb.\r\n\r\nLe stage d'Arnaud Vergnet s'est d\u00e9roul\u00e9 sur le premier semestre 2022 et son objectif \u00e9tait de r\u00e9aliser une interface d'administration pour CubicWeb en React, en remplacement de l'interface web g\u00e9n\u00e9r\u00e9e par CubicWeb.\r\n\r\nLa communaut\u00e9 React est tr\u00e8s active et on trouve de de nombreuses biblioth\u00e8ques pour r\u00e9soudre des probl\u00e8mes r\u00e9currents, dont la r\u00e9alisation d'interfaces d'administration. La premi\u00e8re \u00e9tape consistait donc \u00e0 faire un \u00e9tat de l'art des diff\u00e9rentes technologies disponibles pour r\u00e9aliser de telles interfaces.\r\n\r\nDe nombreuses technologies sont disponibles, mais deux se sont d\u00e9marqu\u00e9es par la richesse de leurs fonctionnalit\u00e9s et leur communaut\u00e9 active: **[Refine](https://refine.dev)** et **[React Admin](https://marmelab.com/react-admin)**. Cet article va donc pr\u00e9senter et comparer ces deux biblioth\u00e8ques ainsi que pr\u00e9senter le choix qui a \u00e9t\u00e9 fait pour la suite du stage.\r\n\r\n\r\n### [Refine](https://refine.dev)\r\n\r\nCette technologie est r\u00e9cente (cr\u00e9\u00e9e en 2021). C'est une biblioth\u00e8que sans affichage (headless) de cr\u00e9ation d'interface d'administration. Cette technologie est donc ind\u00e9pendante de la biblioth\u00e8que de composants graphique utilis\u00e9e et s'occupe seulement de la phase de r\u00e9cup\u00e9ration et modification de donn\u00e9es gr\u00e2ce \u00e0 des [hooks React](https://reactjs.org/docs/hooks-intro.html). L'avantage de cette m\u00e9thode est qu'elle permet de cr\u00e9er plus que des interfaces d'administration car elle ne s'occupe que de la gestion des donn\u00e9es. Il est donc possible de cr\u00e9er une interface compl\u00e8tement customis\u00e9e.\r\n\r\nMalgr\u00e9 le fait d'\u00eatre d\u00e9coupl\u00e9e d'une biblioth\u00e8que graphique, cette technologie propose tout de m\u00eame une int\u00e9gration *out-of-the-box* avec la biblioth\u00e8que [Ant Design](https://ant.design). Ces composants sont donc directement utilisables avec Refine sans avoir \u00e0 construire une couche de compatibilit\u00e9. Ant Design propose de nombreux composants de haute qualit\u00e9 et poss\u00e8de une communaut\u00e9 tr\u00e8s active.\r\n\r\n### [React Admin](https://marmelab.com/react-admin)\r\n\r\nCette technologie est bien \u00e9tablie (cr\u00e9\u00e9e en 2016) et propose une solution centr\u00e9e sur la cr\u00e9ation d'interface d'administration. Ici de nombreux composants utilisant la biblioth\u00e8que [MUI](https://mui.com) sont propos\u00e9s, ainsi que de nombreux hooks React pour cr\u00e9er ses propres composants. MUI est une autre biblioth\u00e8que de composants React tr\u00e8s populaire suivant les r\u00e8gles Material Design de Google. Gr\u00e2ce \u00e0 cette int\u00e9gration avec une biblioth\u00e8que de composants, il est possible de cr\u00e9er une interface d'administration en peu de temps et de lignes de code. \r\n\r\n### Comparaison\r\n\r\nLes deux biblioth\u00e8ques reposent sur le m\u00eame principe: l'utilisateur doit \u00e9crire un objet appel\u00e9 **Data Provider** d\u00e9crivant les m\u00e9thodes pour interagir avec le serveur de donn\u00e9es, r\u00e9alisant ainsi une couche d'abstraction sur les donn\u00e9es. Les figures 1 et 2 pr\u00e9sentent 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\u00e9utiliser tout ou une partie de cet objet entre les deux technologies, am\u00e9liorant ainsi leur interop\u00e9rabilit\u00e9.\r\n\r\n**Figure 1 : Data Provider de React Admin**\r\n![Data Provider de React Admin](https://www.logilab.fr/file/20471724/raw/fig1.png)\r\n\r\n**Figure 2 : Data Provider de Refine**\r\n![Data Provider de Refine](https://www.logilab.fr/file/20471730/raw/fig2.png)\r\n\r\nComme 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\u00e9soudre le probl\u00e8me de g\u00e9n\u00e9ration d'interface, simplifiant encore leur interop\u00e9rabilit\u00e9. La diff\u00e9rence r\u00e9side principalement dans les biblioth\u00e8ques de composants graphiques compatibles et donc leur utilisation finale.\r\n\r\n**Figure 3 : Comparaison de Refine et React Admin**\r\n![Comparaison de Refine et React Admin](https://www.logilab.fr/file/20471740/raw/fig3.png)\r\n\r\nDans les deux cas il est possible de g\u00e9rer les permissions et l'authentification. Les deux supportent aussi TypeScript pour avoir un typage fort afin de d\u00e9tecter les erreurs rapidement. Ant Design et Material design sont tout deux des biblioth\u00e8ques matures avec une grande richesse de composants.\r\n\r\nCes points communs rendent le choix de technologie non-trivial et expliquent pourquoi il a \u00e9t\u00e9 d\u00e9cid\u00e9 de se concentrer principalement sur ces deux biblioth\u00e8ques. Malgr\u00e9 toutes ces similarit\u00e9s, certaines diff\u00e9rences ont fait pencher la balance vers une des deux technologies.\r\n\r\nLa premi\u00e8re diff\u00e9rence est le support de ces biblioth\u00e8ques. React Admin a \u00e9t\u00e9 cr\u00e9\u00e9 en 2016 (React lui-m\u00eame datant de 2013) et les d\u00e9veloppeurs (l'entreprise [Marmelab](https://marmelab.com)) le maintiennent et ajoutent toujours des fonctionnalit\u00e9s. La version 4 est sortie pendant le stage d'Arnaud et le support r\u00e9agit dans de courts d\u00e9lais. Refine est aussi activement maintenu par l'entreprise [Pankod](https://pankod.com), mais le projet est beaucoup plus r\u00e9cent (d\u00e9but 2021), il est donc plus difficile d'estimer si le projet durera dans le temps. React Admin est donc un choix plus adapt\u00e9 en termes de stabilit\u00e9.\r\n\r\nUne autre diff\u00e9rence majeure est sur l'utilisation de biblioth\u00e8ques de composants d'interface. React Admin est fait pour marcher avec MUI et il serait difficile d'utiliser une autre biblioth\u00e8que sans tout r\u00e9\u00e9crire. Refine quand \u00e0 lui fonctionne par d\u00e9faut avec Ant Design mais peut fonctionner avec n'importe quelle biblioth\u00e8que de composants. Cette libert\u00e9 peut \u00eatre utile pour s'adapter \u00e0 n'importe quelle situation et client. En revanche il devient alors plus complexe de r\u00e9aliser de simples interfaces compar\u00e9 \u00e0 React Admin. Pour faire une interface d'administration moderne sans besoins particuliers de design, React Admin offre alors une plus grande facilit\u00e9 et rapidit\u00e9 de d\u00e9veloppement.\r\n\r\nSuite \u00e0 cet \u00e9tat de l'art, il a \u00e9t\u00e9 choisi d'utiliser React Admin pour r\u00e9aliser l'interface d'administration de CubicWeb auto-g\u00e9n\u00e9r\u00e9e. Refine n'est tout de m\u00eame pas abandonn\u00e9. Gr\u00e2ce au syst\u00e8me de data provider adopt\u00e9 par les deux technologies, il sera possible d'adapter la logique utilis\u00e9e pour React Admin \u00e0 Refine. Il sera ainsi possible d'utiliser Refine pour d\u00e9velopper des applications utilisateurs plus complexes si le besoin se fait sentir.\r\n\r\n### Suite ?\r\n\r\nTous ces d\u00e9veloppements sont Open-Source et vous pouvez retrouver le code permettant d'adapter React Admin \u00e0 CubicWeb sur [la forge de Logilab](https://forge.extranet.logilab.fr/cubicweb/react-admin-cubicweb/-/boards).", "content_format": "text/markdown", "heading": "Temps de lecture estim\u00e9 \u00e0 5 minutes.\r\n\r\nCet article explique notre reflexion sur le choix de la technologie la plus adapt\u00e9e entre React Admin et Refine pour refaire l'interface de notre cadriciel CubicWeb.", "word_count": 899, "creation_date": "2022/07/12 15:18:15", "modification_date": "2022/07/12 15:26:03", "cwuri": "https://www.logilab.fr/20471791"}, {"cw_etype": "BlogEntry", "eid": 18554761, "title": "Nouveaux patrons Gitlab CI pour JavaScript", "content": "Temps de lecture 2 min (400 mots)\r\n\r\nDans le cadre de son stage de fin d'\u00e9tude \u00e0 Logilab, Arnaud \u00e0 \u00e9t\u00e9 amen\u00e9 \u00e0 travailler avec des projets JavaScript ([CubicWebJS](https://forge.extranet.logilab.fr/cubicweb/cubicwebjs) et [react-admin-cubicweb](https://forge.extranet.logilab.fr/cubicweb/react-admin-cubicweb)) n\u00e9cessitant un processus d'int\u00e9gration continue (CI) qui s'ex\u00e9cute sur notre forge [heptapod](https://heptapod.net/).\r\n\r\nPour \u00e9viter de r\u00e9p\u00e9ter le code d\u00e9crivant la CI, Arnaud a \u00e9crit plusieurs scripts \u00e0 utiliser comme patrons dans les projets JavaScript. Ces scripts sont int\u00e9gr\u00e9s au projet [gitlab-ci-templates](https://forge.extranet.logilab.fr/open-source/gitlab-ci-templates). Ils supposent l'utilisation de [nodejs](https://nodejs.org) et sont compatibles avec [yarn](https://yarnpkg.com/) et [npm](https://github.com/npm/cli). La d\u00e9tection se fait automatiquement : si le fichier `yarn.lock` est pr\u00e9sent \u00e0 la racine du projet, yarn est utilis\u00e9, sinon c'est npm. L'image de base utilis\u00e9e pour tous ces scripts est `node:latest`, si vous avez besoin d'une version sp\u00e9cifique, vous pouvez remplacer `latest` par la version de votre choix en surchargeant le script dans votre projet.\r\n\r\nVoici un bref descriptif des diff\u00e9rents scripts disponibles :\r\n\r\n- **js-install** : installe les d\u00e9pendances list\u00e9es dans le fichier `package.json` et g\u00e9n\u00e8re un *artifact* avec le dossier `node_modules` (ou les dossiers si on est dans le cas d'un *workspace* *yarn*). Cette installation est utilisable par les \u00e9tapes suivantes si elles incluent `js-install` en tant que d\u00e9pendance.\r\n- **js-lint** : lance la commande `lint` sp\u00e9cifi\u00e9e dans le fichier `package.json`.\r\n- **js-test** : lance la commande `test` sp\u00e9cifi\u00e9e dans le fichier `package.json`.\r\n- **js-build** : construit le projet avec la commande `build` sp\u00e9cifi\u00e9e dans le fichier `package.json`. Il peut \u00eatre utile de g\u00e9n\u00e9rer un *artifact* avec le r\u00e9sultat du *build* pour le rendre utilisable lors d'une autre \u00e9tape.\r\n- **npm-publish** : publie le projet sur [npmjs.com](https://npmjs.com). Ce script n'est lanc\u00e9 que lorsqu'un *tag* est d\u00e9tect\u00e9 et seulement si les scripts de *test*, *lint* et *build* pr\u00e9c\u00e9dents ont r\u00e9ussi (ces scripts \u00e9tant optionnels). Si vous avez g\u00e9n\u00e9r\u00e9 un *artifact* avec le r\u00e9sultat du *build*, il sera disponible ici pour publication. Ce script consid\u00e8re qu'il existe une variable d'enrivonnement `NPM_TOKEN` contenant le token de connexion pour la publication. Il est possible de sp\u00e9cifier ce token comme variable cach\u00e9e dans GitLab (et donc dans Heptapod).\r\n- **webpack-publish** : compile le projet en utilisant [webpack](https://webpack.js.org/) et g\u00e9n\u00e8re un *artifact* avec le dossier `public` pour pr\u00e9parer le d\u00e9ploiement sur les *Gitlab* *pages*. Ce script n'est execut\u00e9 que sur la branche `default` et seulement si les scripts de *test*, *lint* et *build* pr\u00e9c\u00e9dents ont r\u00e9ussi (ces scripts \u00e9tant optionnels). Si vous avez g\u00e9n\u00e9r\u00e9 un *artifact* avec le r\u00e9sultat du *build*, il sera disponible ici pour publication.\r\n- **gitlab-pages** : Publie le contenu du dossier `public` sur les [Gitlab pages](https://docs.gitlab.com/ee/user/project/pages/index.html) du projet. Ce script n'est execut\u00e9 que sur la branche `default`. Pour l'utiliser dans vos projets, vous aurez besoin de d\u00e9finir vous-m\u00eame ses d\u00e9pendances pour pouvoir publier les r\u00e9sultats de compilation.\r\n\r\nVoici un exemple de l'utilisation de ces scripts dans le projet [react-admin-cubicweb](https://forge.extranet.logilab.fr/cubicweb/react-admin-cubicweb) :\r\n\r\n![](https://www.logilab.fr/file/18554732/raw/e852cfbe7238489c4ae60251b.png)\r\n\r\nN'h\u00e9sitez pas \u00e0 utiliser ces scripts dans vos projets JavaScript, ils sont faits pour \u00e7a !", "content_format": "text/markdown", "heading": "Nous mutualisons nos scripts d'int\u00e9gration continue GitLab au sein du projet libre gitlab-ci-templates. Voici ceux de nos projets javascript.", "word_count": 464, "creation_date": "2022/05/30 07:40:10", "modification_date": "2022/05/30 07:40:53", "cwuri": "https://www.logilab.fr/18554761"}, {"cw_etype": "BlogEntry", "eid": 17787720, "title": "Logilab au JDLL 2022", "content": "Temps de lecture 4min (~800 mots)\r\n\r\nNous poursuivons notre participation au libre en envoyant deux nouveaux logilabiens, Yoelis et Arnaud aux [JDLL de Lyon](https://www.jdll.org/histoire), le rendez-vous annuel de celles et ceux qui sont curieux\u00b7ses et passionn\u00e9\u00b7e\u00b7s de num\u00e9rique libre et \u00e9mancip\u00e9.\r\nIls y ont d\u00e9couvert l'actualit\u00e9 \u00e9conomique et les enjeux politiques inh\u00e9rents \u00e0 la pratique du libre. Ils ont \u00e9galement \u00e9t\u00e9 surpris par la richesse de l'innovation qui se d\u00e9ploie dans ces espaces.\r\n\r\nCe week-end f\u00fbt riche en id\u00e9es et les r\u00e9sumer en quelques lignes n'est pas t\u00e2che ais\u00e9e. Nous nous sommes concentr\u00e9s sur quelques conf\u00e9rences, mais vous trouverez la liste compl\u00e8te de [toutes les conf\u00e9rences](https://pretalx.jdll.org/jdll2022/schedule/#2022-04-03/).\r\nLes diff\u00e9rentes discussions auxquelles ont particip\u00e9 nos Logilabiens tournent autour de trois grandes questions.\r\n\r\n## Comment d\u00e9fendre nos droits et s'organiser en dehors des structures verticales et traditionnelle du pouvoir ? \r\n\r\nLe collectif des chatons avait des choses \u00e0 en dire. Les [CHATONS](https://www.chatons.org/), l'acronyme de Collectif des H\u00e9bergeurs Alternatifs, Transparents, Ouverts, Neutres et Solidaires, est un collectif d'h\u00e9bergeurs citoyens. Ils permettent \u00e0 chacun d'acc\u00e9der \u00e0 diff\u00e9rents services h\u00e9berg\u00e9s (email, sites web, outils collaboratifs) pr\u00e8s de chez eux afin que chacun puisse se r\u00e9approprier ses donn\u00e9es et r\u00e9duire sa d\u00e9pendance aux GAFAM.\r\n\r\nLes \u00e9tudiants de Compi\u00e8gne qui ont lanc\u00e9 [Picasoft](https://picasoft.net/) ont parl\u00e9 de leur exp\u00e9rience de mise en \u0153uvre d'un CHATONS et de la fa\u00e7on qu'ils ont eu de d\u00e9construire progressivement au cours de cette exp\u00e9rience les structures classiques de l'organisation d'une association. Ils sont parvenus, non sans peine, \u00e0 un mode de fonctionnement organique o\u00f9 celles et ceux qui font sont les d\u00e9cideurs, dans la bienveillance et l'\u00e9coute mutuelle. \r\n\r\n## Comment promouvoir la notion de commun, l'open-data et la r\u00e9appropriation des donn\u00e9es par les collectifs ?\r\n\r\nLe langage n'est pas neutre et les dictionnaires sont impr\u00e9gn\u00e9s de la vision du monde de leurs auteurs et affect\u00e9s par leurs conditions de production. S'il est le fruit d'un travail institutionnel, il y a un risque qu'il soit stopp\u00e9 si les financements devaient s'arr\u00eater ou si la situation politique changeait. La communaut\u00e9 est moins impliqu\u00e9e et le travail laiss\u00e9 \u00e0 quelques sachants. La ligne \u00e9ditoriale encourt un risque de censure et le contenu peut-\u00eatre dat\u00e9 ou anachronique. M\u00eame si les projets issus de communaut\u00e9s ne sont pas concern\u00e9s par ces probl\u00e8mes, ils ont souvent du mal \u00e0 atteindre les communaut\u00e9s \u00e9rudites et ne sont pas toujours \u00e0 la pointe en ergonomie et design.\r\n\r\nLe [Dictionnaire Des Francophones](https://www.dictionnairedesfrancophones.org/) (DDF) a ainsi essay\u00e9 de lier ces deux mondes. Bas\u00e9 sur les donn\u00e9es du projet ouvert du Wiktionnaire (projet de la Fondation Wikimedia), le DDF est une initiative du minist\u00e8re de la Culture pour repr\u00e9senter la diversit\u00e9 de la langue Fran\u00e7aise \u00e0 travers toute la francophonie. Compar\u00e9 au Wiktionnaire, le DDF poss\u00e8de une meilleure ergonomie et est plus facilement utilisable par d'autres applications gr\u00e2ce \u00e0 la publication de ses donn\u00e9es aux formats du Web S\u00e9mantique comme le RDF.\r\n\r\n\r\nLa m\u00e9tropole de Lyon a bien compris l'enjeu d'impliquer la communaut\u00e9 et m\u00e8ne un projet ambitieux d'ouverture de ses donn\u00e9es. Cette initiative multiplie ainsi les possibilit\u00e9s de valorisation des donn\u00e9es par les scientifiques et les journalistes. En revanche, contrairement au DDF, les donn\u00e9es publi\u00e9es ne sont pas au format du Web S\u00e9mantique, limitant les possibles utilisations. La perspective est tout de m\u00eame envisag\u00e9e sur le long terme.\r\n\r\n\r\n## Quels outils innovants pour l'ing\u00e9nierie logicielle ?\r\n\r\nEn parall\u00e8le des conf\u00e9rences, nos logilabiens ont assist\u00e9 \u00e0 des ateliers techniques, tels que l'atelier d'initiation \u00e0 [Rust](https://www.rust-lang.org/) et \u00e0 la conception d'un jeu avec Rust.\r\n\r\nRust est un langage de programmation \u00e0 typage fort, garantissant l'absence d'erreurs de m\u00e9moire au moment de la compilation. Il est fortement inspir\u00e9 de la famille du C avec une syntaxe moderne. Il permet diff\u00e9rents styles de programmation, notamment fonctionnel. Contrairement au C et au C++, Rust utilise le gestionnaire de d\u00e9pendances Cargo, similaire \u00e0 Pip pour Python et NPM pour JavaScript. Rust est donc un langage syst\u00e8me moderne poss\u00e9dant de nombreuses qualit\u00e9s pour simplifier le travail de ses utilisateurs, expliquant sa popularit\u00e9 en hausse.\r\n\r\n[Pijul](https://pijul.org/) est un nouveau syst\u00e8me de contr\u00f4le de version ayant pour objectif de r\u00e9soudre de multiples probl\u00e8mes existants dans les solutions actuelles. Contrairement \u00e0 [Git](https://git-scm.com/) et [Mercurial](https://www.mercurial-scm.org/) qui se basent sur la th\u00e9orie des *snapshots*, Pijul suit les pas de [Darcs](http://darcs.net/) en s'appuyant sur la th\u00e9orie des *patchs*. Historiquement, l'approche par *snapshot* poss\u00e8de de bien meilleures performances que celle par *patchs*, mais poss\u00e8de de nombreux probl\u00e8mes lors d'op\u00e9rations complexes (*merge* ambigus). L'objectif de Pijul est de r\u00e9soudre les probl\u00e8mes de performances pr\u00e9sents chez Darcs pour cr\u00e9er un syst\u00e8me performant \u00e0 la Git, fiable et simple \u00e0 utiliser \u00e0 la Darcs.\r\n\r\n## Bilan\r\n\r\nParticiper \u00e0 de tels \u00e9v\u00e9nements est toujours une source d'inspiration pour nos logilabiens. La d\u00e9couverte de nouvelles technologies et de nouveaux projets libres est ce qui nourrit notre activit\u00e9 au quotidien. Gr\u00e2ce aux JDLL, Logilab sera s\u00fbrement amen\u00e9e \u00e0 utiliser une de ces technologies lors de projets. Nous avons h\u00e2te de retrouver tout ce joli monde \u00e0 la prochaine \u00e9dition !", "content_format": "text/markdown", "heading": "Deux personnes de Logilab ont assist\u00e9 aux JDLL2022. Nous vous faisons un petit retour des pr\u00e9sentations qui nous ont le plus marqu\u00e9s parmi les innombrables pr\u00e9sentations passionnantes de la conf\u00e9rence.", "word_count": 819, "creation_date": "2022/05/13 14:48:00", "modification_date": "2022/05/17 09:14:46", "cwuri": "https://www.logilab.fr/17787720"}]