[{"data":1,"prerenderedAt":2411},["ShallowReactive",2],{"category-others":3},[4,313,635,1827],{"id":5,"title":6,"alt":7,"authors":8,"body":30,"date":286,"description":287,"extension":288,"image":289,"meta":290,"navigation":291,"ogImage":289,"path":292,"published":291,"reviewers":293,"seo":305,"stem":306,"tags":307,"__hash__":312},"blogs\u002Fblogs\u002F2024-08-27-retour-sur-le-devfest\u002Findex.md","Retour sur le DevFest","Les 6 et 7 Juin dernier s'est déroulée la 7ᵉ édition du DevFest Lille. Toute l'équipe HoppR était présente à l'événement. Retour sur cette journée riche en découvertes techniques et humaines",[9,15,20,25],{"id":10,"name":11,"image":12,"linkedin":13,"x":14},"e8163b24-7e01-41c5-adbf-0dc655f929d0","Nicolas Zago",".\u002Fassets\u002Fauthor-nicolas-zago.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fnicolaszago\u002F",null,{"id":16,"name":17,"image":18,"linkedin":19,"x":14},"70a8663a-742d-4937-a6d4-5cef079b12c8","Théo Lanord",".\u002Fassets\u002Fauthor-tho-lanord.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fth%C3%A9o-lanord\u002F",{"id":21,"name":22,"image":23,"linkedin":24,"x":14},"44e68e06-deec-41b6-87a4-833fec8c9953","Sébastien Jaupart",".\u002Fassets\u002Fauthor-sbastien-jaupart.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fsebastien-jaupart\u002F",{"id":26,"name":27,"image":28,"linkedin":29,"x":14},"f09c2e62-135b-40c0-a141-b239e8e1e761","Elisa Degobert",".\u002Fassets\u002Fauthor-elisa-degobert.webp","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fdegobert\u002F",{"type":31,"value":32,"toc":276},"minimark",[33,38,42,49,52,55,60,63,76,82,88,93,96,100,105,108,111,114,117,120,123,126,129,132,135,146,150,153,156,159,162,165,168,171,174,188,191,212,215,224,228,231,234,237,240,243,246,249,258,262,265,273],[34,35,37],"h2",{"id":36},"devfest-lille-saison-7","DevFest Lille, saison 7 !",[39,40,41],"p",{},"Les 6 et 7 Juin dernier s'est déroulée la 7ᵉ édition du DevFest Lille au Grand Palais. Pour la première fois sur un format de 2 jours avec une soirée organisée à Grand Scène (on y reviendra plus tard). \nUne édition plus riche, plus dense avec 56 conférences et Talks, 1500 participants et une quarantaine de sponsors dont HoppR.",[39,43,44],{},[45,46],"img",{"alt":47,"src":48},"Photo de l’équipe HoppR","\u002Fcontent-assets\u002F2024-08-27-retour-sur-le-devfest\u002Fassets\u002Fimg1.webp",[39,50,51],{},"Toute l'équipe HoppR était présente à l'événement. Retour sur cette journée riche en découvertes techniques et humaines d'Emma, Elisa, Edouard, Théo, Nicolas G & Z, Anthony, Guillaume !",[39,53,54],{},"D’ailleurs, certains en ont profité pour compiler leur retour d’expérience et prendre des notes sur les talks qui les ont interpellés !\nAlors si vous n’avez pas pu y participer ou tout voir, la suite devrait vous intéresser !",[56,57,59],"h3",{"id":58},"petit-détour-sur-lengagement-du-devfest-lille","Petit détour sur l'engagement du DevFest Lille",[39,61,62],{},"Depuis quelques années, l'équipe du DevFest a fait un gros effort pour réduire l'impact de la conférence, notamment sur les déchets. Avec pour mot d'ordre, supprimer, réutiliser ou recycler et plusieurs initiatives déjà en place :",[64,65,66,70,73],"ul",{},[67,68,69],"li",{},"Fin des goodies (souvent inutiles) et thématique pour réutiliser les kakemonos et stand des années précédentes (organisation et sponsors).",[67,71,72],{},"Partenariat avec la Consignerie pour proposer aux participants des boissons dans des bouteilles en verre et des gobelets consignés.",[67,74,75],{},"Repas zéro déchet.",[39,77,78],{},[45,79],{"alt":80,"src":81},"Consigne boissons du Devfest","\u002Fcontent-assets\u002F2024-08-27-retour-sur-le-devfest\u002Fassets\u002Fimg2.webp",[39,83,84],{},[45,85],{"alt":86,"src":87},"Stand déjeuner avec lunch bag du Devfest","\u002Fcontent-assets\u002F2024-08-27-retour-sur-le-devfest\u002Fassets\u002Fimg3.webp",[39,89,90],{},[45,91],{"alt":86,"src":92},"\u002Fcontent-assets\u002F2024-08-27-retour-sur-le-devfest\u002Fassets\u002Fimg4.webp",[39,94,95],{},"À noter aussi leur travail sur l'accessibilité avec le sous-titrage réalisé par le Messageur, pour que les conférences puissent être accessible à tous les publics en situation de handicap 👏",[56,97,99],{"id":98},"retour-sur-les-conférences","Retour sur les conférences",[101,102,104],"h4",{"id":103},"survivre-dans-la-js-jungle-des-outils-de-tests-lise-quesnel-par-théo-lanord","Survivre dans la JS-jungle des outils de tests  (Lise Quesnel) par  Théo Lanord",[39,106,107],{},"Je tiens à faire un retour sur la conférence de Lise QUESNEL pour la remercier de m'avoir aider à voir plus clair dans la JS-jungle des outils de tests !",[39,109,110],{},"Avant tout, est-ce que tester, c'est douter ? Et oui, pourquoi tester ?",[39,112,113],{},"Tester manuellement est une activité chronophage avec des résultats non répétables. La force des tests automatisés est leur rapidité et leur répétabilité.\nCes deux qualités diminuent les boucles de feedback que soit en local, en pipeline de CI\u002FCD ou même en recette.",[39,115,116],{},"En quoi réduire la boucle de feedback est intéressant ?",[39,118,119],{},"Plus l'erreur est détectée tard dans la chaîne de valeur, plus elle sera coûteuse à réparer (Localisation, recontextualisation, etc).\nAssocié à de petites incrémentations, tester permet de délivrer de la valeur plus rapidement tout en augmentant la qualité.\nCe qui me tient à cœur, c'est d'augmenter la confiance entre les différentes parties prenantes (développeurs, PO, QA, etc) pour, à terme, diminuer la pression au quotidien.",[39,121,122],{},"Choisir ses outils en fonction du contexte",[39,124,125],{},"De nombreuses typologies d'outils existent (lanceurs, structurateurs, utilitaires, mocks, etc). Certains outils implémenteront tout ou partie de ces typologies.\nLe choix des outils varie en fonction de votre besoin et contexte.\nDans de nombreux cas, ils vous donneront des modèles de test sur lesquels poser vos premiers tests. Il est important de votre côté d'avoir un nommage de test explicite qui pourra déboucher vers un langage commun compréhensible par les développeurs et le métier.",[39,127,128],{},"Classifier les tests : Equilibre entre coût, rapidité et confiance",[39,130,131],{},"Vous trouverez dans la JS-Jungle de nombreux noms de tests (unitaire, intégration, bout en bout, acceptance, composants, contracts, etc). Je ne peux que vous conseiller d'en discuter avec vos collègues pour vous approprier ces notions au sein de votre équipe.",[39,133,134],{},"La question final sera donc lesquels utiliser et en quelle proportion ?",[39,136,137,138,145],{},"Si j'ai touché votre curiosité, n'hésitez à regarder mon ",[139,140,144],"a",{"href":141,"rel":142},"https:\u002F\u002Fblog.hoppr.tech\u002Fretour_%22survivre_dans_la_JS-jungle_des_outils_de_tests%22_de_lise_quesnel_au_devfest_2024",[143],"nofollow","retour plus complet sur cette même conférence",".\nEncore un grand merci et fécilitations pour la qualité de rédaction (métaphores, images, etc) et de narration de sa conférence !",[101,147,149],{"id":148},"de-lexclusion-à-linclusion-laccessibilité-numérique-pour-tous-et-toutes-emmanuelle-aboaf-par-elisa-degobert","De l'exclusion à l'inclusion : l'accessibilité numérique pour tous et toutes (Emmanuelle Aboaf) par Elisa Degobert",[39,151,152],{},"En France, 1 personne sur 6 est atteinte d’un handicap et il est la plupart du temps invisible. Pourtant, la majorité des sites web ne sont PAS accessibles.",[39,154,155],{},"Au-delà de l'enjeu moral de l'inclusion, ne pas rendre son site accessible, c'est réduire sa cible d'utilisateurs potentiels.",[39,157,158],{},"L'accessibilité nous profite à tous",[39,160,161],{},"On peut penser que les problèmes d'accessibilité ne nous touchent pas mais tout le monde bénéficie au quotidien d'inventions pensées pour des personnes atteintes de handicap: les SMS, la télécommande ou encore les livres audio en sont des exemples.",[39,163,164],{},"S'il s'agit d'une problématique permanente pour de nombreuses personnes, nous subissons tous à un moment de notre vie ce manque d’accessibilité, que ce soit de manière permanente, temporaire ou situationnelle.",[39,166,167],{},"En effet un rhume peut affecter notre capacité à parler, un bras cassé à utiliser nos mains (handicaps temporaires) ou des situations peuvent altérer nos capacités: lorsque nous sommes dans des endroits bruyants notre ouïe est impactée, lorsque l'on doit garder un bébé à bras tout en naviguant sur l'ordinateur notre motricité est impactée, etc.",[39,169,170],{},"Les erreurs que l'on fait tous et toutes…",[39,172,173],{},"La majorité des erreurs relèvent d'un usage imparfait du langage HTML :",[64,175,176,179,182,185],{},[67,177,178],{},"textes alternatifs manquants (alt dans les images et les boutons contenant qu'une image),",[67,180,181],{},"étiquettes manquantes dans les formulaires (un label doit avoir l'attribut for défini avec le même nom que l'attribut id de l'input correspondant),",[67,183,184],{},"liens vides (les urls ne suffisent pas toujours à savoir quel lien correspond à quoi, utilisez l'attribut title)",[67,186,187],{},"langue manquante du site (l'attribut lang dans la balise html définit la langue du site).\nPar exemple, en définissant la langue de votre site, les lecteurs d'écran vont savoir quel accent utiliser\n(pour ne pas lire du texte français avec un accent anglais) et votre navigateur évitera de faire des traductions surprenantes\n(comme traduire le prénom Jimmy par pied-de-biche !).",[39,189,190],{},"Comment savoir si votre site est accessible ?",[39,192,193,194,199,200,205,206,211],{},"👉 Vous pouvez retrouver plein de ressources sur le sujet de l'accessibilité sur le ",[139,195,198],{"href":196,"rel":197},"https:\u002F\u002Fwww.a11yproject.com\u002F",[143],"projet a11y","\net la liste des règles d'accessibilité sur ",[139,201,204],{"href":202,"rel":203},"https:\u002F\u002Fwcag.com\u002F",[143],"WCAG",", avec des exemples concrets.\n",[139,207,210],{"href":208,"rel":209},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Flighthouse\u002Foverview",[143],"Lighthouse"," peut aussi vous aider à auditer l'accessibilité de votre site.",[39,213,214],{},"L'important est de sensibiliser à l'accessibilité autour de soi mais il est difficile de savoir si notre site est accessible.\navant de l'avoir confronté aux utilisateurs concernés.\nComme l'a conclu E. Aboaf, l'important est d'inclure des personnes handicapées dans les process : \"Nothing with us without us\" !",[39,216,217,218,223],{},"Je vous encourage vivement à aller voir le replay de son talk 🎤 pour en savoir plus et d'explorer ",[139,219,222],{"href":220,"rel":221},"https:\u002F\u002Fbento.me\u002Feaboaf",[143],"son site"," pour consulter ses articles sur le sujet.",[101,225,227],{"id":226},"maîtrisez-la-hype-passion-versus-raison-william-leemans-par-sébastien-jaupart","Maîtrisez la Hype : Passion versus Raison (William Leemans) par Sébastien Jaupart",[39,229,230],{},"La passion nous pousse parfois à tester les nouveautés de notre secteur. Parfois un peu trop...",[39,232,233],{},"S'exercer sur de nouvelles technologies contribue grandement à l'apprentissage et développent notre capacité à nous adapter. Néanmoins, les contraintes temporelles et financières d'un projet peuvent rapidement nous rattraper. Adopter une technologie trop tôt (par \"effet de mode\") ou s'entêter sur des technologies inadaptées à nos besoins peut avoir des effets néfastes pour nos projets.",[39,235,236],{},"William Leemans nous alertent face au \"chant des sirènes de la Hype\" et nous proposent un ensemble de bonnes pratiques, astuces et concepts pour s'y prémunir et faire les bons choix.",[39,238,239],{},"La notion de spike (que j'avoue avoir un peu oublié avec le temps) nous impose de timeboxer les essais d'une technologie pour, in fine, documenter et partager les découvertes et résultats obtenus et juger de la pertinence de son usage sur le projet.",[39,241,242],{},"Les choix éclairés d'une personne ou d'une équipe ne le sont pas toujours par d'autres. Généralement pris sur la base d'un contexte, ils peuvent être tracés par le biais d'un ADR (Architecture Decision Record), document retraçant un choix (architectural, de technologie, etc) incluant le contexte, les raisons de ce choix et ses potentielles alternatives. Ils encouragent la réflexion critique, améliorent la communication au sein des équipes et facilitent l'apprentissage continu. Très utile également pour onboarder de nouveaux collaborateurs sur un projet.",[39,244,245],{},"Quels que soient nos choix, les intérêts du projet doivent primer. Pour éviter de choisir un framework inadapté à nos contraintes, il est impératif d'analyser les besoins de nos projets. Pour cela, il est nécessaire de se documenter un maximum, s'imprégner de la philosophie de l'outil et appliquer directement les bonnes pratiques préconisées par la documentation officielle. La sobriété est de mise. Plus la stack est simple, moins il y aura de maintenance.",[39,247,248],{},"Bref, un équilibre à trouver entre innovation et stabilité.",[39,250,251,252,257],{},"Le ",[139,253,256],{"href":254,"rel":255},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=TPhRprV2L24",[143],"replay de la conférence"," est disponible sur Youtube.",[56,259,261],{"id":260},"rattrapage","Rattrapage",[39,263,264],{},"Avec 3 salles et plus d'une cinquantaine de sujets, il est impossible de suivre tous les sujets et c'est parfois difficile de faire son choix.",[39,266,267,268],{},"No stress, l'équipe a tout prévu et des replays sont disponibles sur la ",[139,269,272],{"href":270,"rel":271},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=eDCmfZUmsUA&list=PLuZ_sYdawLiXf92Uq5iE5LlYKrOv1IUvx&pp=iAQB",[143],"chaine Youtube du GDG France",[39,274,275],{},"Allez on se voit l’année prochaine 😄",{"title":277,"searchDepth":278,"depth":278,"links":279},"",2,[280],{"id":36,"depth":278,"text":37,"children":281},[282,284,285],{"id":58,"depth":283,"text":59},3,{"id":98,"depth":283,"text":99},{"id":260,"depth":283,"text":261},"2024-08-27T10:22:46.143Z","Les 6 et 7 Juin dernier s'est déroulée la 7ᵉ édition du DevFest Lille au Grand Palais. Pour la première fois sur un format de 2 jours avec une soirée organisée à Grand Scène (on y reviendra plus tard","md",".\u002Fassets\u002Fcover-image.webp",{},true,"\u002Fblogs\u002F2024-08-27-retour-sur-le-devfest",[294,300],{"id":295,"name":296,"image":297,"linkedin":298,"x":299},"838dec96-f9fc-404f-a302-07719225d785","Maxime Deroullers","https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002Fc69d0b59-558d-4e48-879f-bea3fec1fdef\u002FLinkedin_Profile.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240827%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240827T102245Z&X-Amz-Expires=3600&X-Amz-Signature=11e2bdc81f73ae453331fd5d334bb1e97c35bc5f075ccbf072c6d349e83108d4&X-Amz-SignedHeaders=host&x-id=GetObject","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmaxime-deroullers-1b5791137\u002F","https:\u002F\u002Fx.com\u002Fmderoullers",{"id":301,"name":302,"image":303,"linkedin":304,"x":14},"0bb914a6-f882-4951-bee6-53e8e8abb807","Emmanuelle Gouvart","https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002Fc88f5dfa-16db-4e6f-acf1-34dd80ee8766\u002Femma_hoppr.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20240827%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20240827T102244Z&X-Amz-Expires=3600&X-Amz-Signature=15fc0a4d1e4645500844a19498b80c1d868a04913c404520471b3a6a00be86a0&X-Amz-SignedHeaders=host&x-id=GetObject","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Femmanuellegouvart-182b6ab2\u002F",{"title":6,"description":287},"blogs\u002F2024-08-27-retour-sur-le-devfest\u002Findex",[308,309,310,311],"veille tech","événement","devfest","others","NHhS1rnkpsYM4lLGQTZWyP69bnNmRzUkilh5QGSTdTs",{"id":314,"title":315,"alt":316,"authors":317,"body":319,"date":616,"description":617,"extension":288,"image":289,"meta":618,"navigation":291,"ogImage":289,"path":619,"published":291,"reviewers":620,"seo":628,"stem":629,"tags":630,"__hash__":634},"blogs\u002Fblogs\u002F2024-10-11-retour-survivre-dans-la-js-jungle-des-outils-de-tests-de-lise-quesnel-au-devfest-2024\u002Findex.md","Retour \"Survivre dans la JS-jungle des outils de tests\" de Lise QUESNEL au Devfest 2024","Conférence de Lise QUESNEL au DevFest 2024",[318],{"id":16,"name":17,"image":18,"linkedin":19,"x":14},{"type":31,"value":320,"toc":602},[321,325,334,337,341,344,347,351,354,358,361,369,373,376,397,404,408,411,418,422,425,432,436,439,442,465,469,472,504,508,511,514,517,564,568,571,574,583,587,590,593],[56,322,324],{"id":323},"introduction","Introduction",[39,326,327,328,333],{},"Cet article fait suite au ",[139,329,332],{"href":330,"rel":331},"https:\u002F\u002Fblog.hoppr.tech\u002Fblogs\u002F2024-08-27-retour-sur-le-devfest",[143],"retour de HoppR sur le DevFest 2024"," et se concentre sur la conférence de Lise QUESNEL qui aborde les outils de tests JavaScript.",[39,335,336],{},"Pour être concis, je vous résume les points qui m'ont le plus intéressés et ne reprendrai pas toutes les métaphores utilisées dans sa conférence.\nBref ! Re-déroulons le chemin de JS-Jungle ensemble !",[56,338,340],{"id":339},"tester-cest-douter","Tester, c'est douter ?",[39,342,343],{},"Avant de rentrer véritablement dans la JS-Jungle, répondons au pourquoi ? Et oui, pourquoi tester ?\nTester manuellement est une activité chronophage avec des résultats non répétables. Les forces des tests automatisés sont leur rapidité et leur répétabilité.\nCes deux qualités diminuent la longueur des boucles de feedback que ce soit en local, en pipeline de CI\u002FCD ou même en recette.",[39,345,346],{},"Et en quoi réduire la longueur des boucles de feedback est intéressant ?\nPlus l'erreur est détectée tard dans la chaîne de valeur, plus elle sera coûteuse à réparer (Localisation, recontextualisation, etc).\nAssocié à de petites incrémentations, tester permet de délivrer de la valeur plus rapidement toute en augmentant la qualité.\nDe mon point de vue, il est aussi l'occasion d'augmenter la confiance entre les différentes parties prenantes (développeurs, PO, QA, etc) pour, à terme, diminuer la pression au quotidien.",[56,348,350],{"id":349},"les-typologies-doutils-de-test","Les typologies d'outils de test",[39,352,353],{},"Il est nécessaire de comprendre les différentes typologies car elles ne doivent pas être utilisées toutes en même temps. Chaque contexte a son besoin.",[56,355,357],{"id":356},"les-lanceurs-test-runner","Les lanceurs (Test runner)",[39,359,360],{},"Leur but est d'exécuter les tests et d'exporter leurs résultats.",[39,362,363,364],{},"Exemple: ",[139,365,368],{"href":366,"rel":367},"https:\u002F\u002Fkarma-runner.github.io\u002Flatest\u002Findex.html",[143],"Karma",[56,370,372],{"id":371},"les-structurateurs","Les structurateurs",[39,374,375],{},"Leur but est de structurer l'écriture des tests pour facilité leur lisibilité, écriture et maintenance.",[39,377,378,379,384,385,390,391,396],{},"Les deux syntaxes, aussi appelées modèles de tests ou patterns, les plus connues sont AAA (",[139,380,383],{"href":381,"rel":382},"https:\u002F\u002Fwiki.c2.com\u002F?ArrangeActAssert=",[143],"Arrange Act Assert",") et Gerkhin (",[139,386,389],{"href":387,"rel":388},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FGiven-When-Then",[143],"Given When Then",").\nToutes les deux expriment un contexte, une action puis des conséquences. Gerkhin se distingue par son approche ",[139,392,395],{"href":393,"rel":394},"https:\u002F\u002Ffr.wikipedia.org\u002Fwiki\u002FProgrammation_pilot%C3%A9e_par_le_comportement",[143],"comportementale"," des sujets métiers.\nCela permet notamment d'obtenir un nommage\u002Flangage commun compréhensible par les développeurs et le métier.",[39,398,363,399],{},[139,400,403],{"href":401,"rel":402},"https:\u002F\u002Fgithub.com\u002Fcucumber\u002Fcucumber-js",[143],"Cucumber",[56,405,407],{"id":406},"les-utilitaires","Les utilitaires",[39,409,410],{},"Leur but est de vérifier les attendus et de lever des exceptions claires. Cette notion est appelé \"Assertion\".",[39,412,363,413],{},[139,414,417],{"href":415,"rel":416},"https:\u002F\u002Fwww.chaijs.com\u002F",[143],"Chai",[56,419,421],{"id":420},"les-spies-stubs-et-mocks","Les spies, stubs et mocks",[39,423,424],{},"Leur but est d'isoler la partie du code testée par la simulation du fonctionnement de ces dépendances ou encore l'analyse à l'appel de ces dépendances.",[39,426,363,427],{},[139,428,431],{"href":429,"rel":430},"https:\u002F\u002Fsinonjs.org\u002F",[143],"Sinon",[56,433,435],{"id":434},"les-multi-typologies","Les multi-typologies",[39,437,438],{},"Si vous ne vous sentez pas d'avoir trop de dépendances dans votre projet, il existe aussi des outils couvrants toutes ces typologies :",[39,440,441],{},"Exemples:",[64,443,444,451,458],{},[67,445,446],{},[139,447,450],{"href":448,"rel":449},"https:\u002F\u002Fjestjs.io\u002Ffr\u002F",[143],"Jest",[67,452,453],{},[139,454,457],{"href":455,"rel":456},"https:\u002F\u002Fvitejs.dev\u002F",[143],"Vite",[67,459,460],{},[139,461,464],{"href":462,"rel":463},"https:\u002F\u002Fjasmine.github.io\u002F",[143],"Jasmine",[56,466,468],{"id":467},"les-contrôleurs-de-navigateurs","Les contrôleurs de navigateurs",[39,470,471],{},"La typologie des contrôleurs de navigateurs est à part dans le sens où leur but est de simuler un comportement utilisateur au plus proche du navigateur.\nIl y a 3 manières de contrôler un navigateur :",[64,473,474,482,490],{},[67,475,476,477],{},"Via ces drivers : ",[139,478,481],{"href":479,"rel":480},"https:\u002F\u002Fwww.selenium.dev\u002Fselenium\u002Fdocs\u002Fapi\u002Fjavascript\u002Findex.html",[143],"Selenium",[67,483,484,485],{},"Via script JS : ",[139,486,489],{"href":487,"rel":488},"https:\u002F\u002Fwww.cypress.io\u002F",[143],"Cypress",[67,491,492,493,498,499],{},"Via API Native : ",[139,494,497],{"href":495,"rel":496},"https:\u002F\u002Fplaywright.dev\u002F",[143],"Playwright"," ou ",[139,500,503],{"href":501,"rel":502},"https:\u002F\u002Fpptr.dev\u002F",[143],"Puppeteer",[56,505,507],{"id":506},"les-tests-bancals","Les tests bancals",[39,509,510],{},"Si vous avez déjà commencé vos premiers tests, vous tomberez sur des tests bancals (Flaky en anglais) dont le résultat n'est pas répétable de manière certaine. Un jour il passe, l'autre non...",[39,512,513],{},"Un élément de réponse pour comprendre pourquoi il ne passe pas tout le temps est que le test est basé sur “quelque chose” de variable. Dans certains cas, pour contourner cette variabilité, nous pouvons simuler (mocker) ou remplacer l’élément variant.",[39,515,516],{},"Exemple:",[64,518,519,522,525,528,537,540,543],{},[67,520,521],{},"Lecture d'un tableau de données dans un ordre non déterministe",[67,523,524],{},"Modification des données par un test précédent",[67,526,527],{},"Appel à une date relative (Aujourd'hui, demain, hier)",[67,529,530,531,536],{},"Sélecteur CSS non sûr (Vous pouvez utiliser les rôles: ",[139,532,535],{"href":533,"rel":534},"https:\u002F\u002Ftesting-library.com\u002F",[143],"Testing-library",")\nDes conseils pour garder une base de tests saine et, en conséquence, une confiance envers vos tests:",[67,538,539],{},"\"N'hésitez pas à mettre vos tests bancals en quarantaine\"",[67,541,542],{},"\"Mettez des règles sur vos quarantaines (Nombre de jours maximums en quarantaine, nombre de tests maximum, etc)\"",[67,544,545,546,551,552,557,558,563],{},"“De manière générale, respectez les principes ",[139,547,550],{"href":548,"rel":549},"https:\u002F\u002Fdzone.com\u002Farticles\u002Ffirst-principles-solid-rules-for-tests",[143],"FIRST","”\nIl existe des questions ouvertes que sont l'unité d'un test unitaire, la sociabilité des tests ou l'utilité d'un test qui sont en fait des sujets exploratoires.\nSi vous êtes totalement perdu, les langages front étant orientés composant, il est plus simple de prendre comme unité par défaut le composant (attention, ",[139,553,556],{"href":554,"rel":555},"https:\u002F\u002Fwww.entropywins.wtf\u002Fblog\u002F2017\u002F01\u002F02\u002Fsimple-is-not-easy\u002F",[143],"simple n'est pas facile",").\nPour explorer ces notions, vous pouvez essayer ",[139,559,562],{"href":560,"rel":561},"https:\u002F\u002Fmedium.com\u002F@imenezzine\u002Ftdd-vs-test-first-development-quelle-est-la-diff%C3%A9rence-ccbea4771484",[143],"le test-first ou encore le test driven developement",".",[56,565,567],{"id":566},"les-stratégies-de-tests","Les stratégies de tests",[39,569,570],{},"Vous trouverez dans la JS-Jungle de nombreux noms de tests (unitaire, intégration, bout en bout, acceptance, composants, contracts, etc).\nLeurs significations varient en fonction des équipes, ce sont vos collègues qui vous expliquerons, au mieux, leur vision.",[39,572,573],{},"De manière simplifiée, nous dirons que nous avons des tests unitaires pour les fonctions utilitaires, des tests d’intégration pour les composants et des tests de bout en bout pour simuler le comportement utilisateur.\nPlus vous vous rapprochez des tests unitaires, plus vos unités de test sont fines et rapides mais moins vous pouvez avoir confiance en ceux-ci seules.",[39,575,576,577,582],{},"La question finale sera donc lesquels utiliser et en quelle proportion ?\nVous trouverez de nombreuses distributions de tests : ",[139,578,581],{"href":579,"rel":580},"https:\u002F\u002Fthetestingarchitect.substack.com\u002Fp\u002Ftest-pyramid-test-honeycomb-test",[143],"la pyramide, l'alvéole, le trophée",".\nL'orientation des langages front modernes pousse vers l'utilisation de la distribution en trophée (Plus de tests de bout en bout que de tests unitaires et moins de tests de bout en bout que de tests d'intégration).",[56,584,586],{"id":585},"ouverture","Ouverture",[39,588,589],{},"J'aimerais insister sur l'analyse statique de votre langage. Même si ce n'est pas un test en soit, le fait de typer, de créer des interfaces pour vos échanges, cela vous aidera à donner de la confiance en votre code et même à visualiser les sujets métiers.",[39,591,592],{},"Enfin, les tests manuels ne sont pas à bannir. Ils ne sont pas adaptés pour garantir la non-régression. Par contre, leur flexibilité est avantageuse pour des sujets exploratoires (Nouvelles erreurs, cas à la marge, etc). Peut-être devrions nous les appeler “tests exploratoires” ? A vous d'y répondre et de continuer de délivrer de la valeur pour vos utilisateurs et clients !",[39,594,595,596,601],{},"Merci de votre lecture et merci aussi à Lise QUESNEL pour son talk !\nJ'en profite pour la féliciter pour la qualité de la narration et de son écriture.\nN'hésitez pas à regarder la ",[139,597,600],{"href":598,"rel":599},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=LqwfhxyiwXU&list=PLuZ_sYdawLiXf92Uq5iE5LlYKrOv1IUvx&index=7",[143],"rediffusion"," de cette conférence.",{"title":277,"searchDepth":278,"depth":278,"links":603},[604,605,606,607,608,609,610,611,612,613,614,615],{"id":323,"depth":283,"text":324},{"id":339,"depth":283,"text":340},{"id":349,"depth":283,"text":350},{"id":356,"depth":283,"text":357},{"id":371,"depth":283,"text":372},{"id":406,"depth":283,"text":407},{"id":420,"depth":283,"text":421},{"id":434,"depth":283,"text":435},{"id":467,"depth":283,"text":468},{"id":506,"depth":283,"text":507},{"id":566,"depth":283,"text":567},{"id":585,"depth":283,"text":586},"2024-10-11T12:52:42.324Z","Cet article fait suite au [retour de HoppR sur le DevFest 2024](https:\u002F\u002Fblog.hoppr.tech\u002Fblogs\u002F2024-08-27-retour-sur-le-devfest) et se concentre sur la conférence de Lise QUESNEL qui aborde les outils",{},"\u002Fblogs\u002F2024-10-11-retour-survivre-dans-la-js-jungle-des-outils-de-tests-de-lise-quesnel-au-devfest-2024",[621,626],{"id":622,"name":623,"image":624,"linkedin":625,"x":14},"67adfd77-4b84-4496-b55d-3391541f59c5","Michaël Bernasinski","https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002F82ebd0fe-de28-43f3-ab7b-0431af41baad\u002FPhoto_HoppR.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20241011%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20241011T125242Z&X-Amz-Expires=3600&X-Amz-Signature=dfeb6b874b089d1b0802df82a5a3f85d6ab5167b870d244e384d1c65947e1aca&X-Amz-SignedHeaders=host&x-id=GetObject","https:\u002F\u002Fwww.linkedin.com\u002Fin\u002Fmichael-bernasinski",{"id":301,"name":302,"image":627,"linkedin":304,"x":14},"https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002Fc88f5dfa-16db-4e6f-acf1-34dd80ee8766\u002Femma_hoppr.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45HZZMZUHI%2F20241011%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20241011T125242Z&X-Amz-Expires=3600&X-Amz-Signature=a0d7333f5bdeefc5c004ae47d547f6548bfe142cd76f8676bc5bbf202d4f08d3&X-Amz-SignedHeaders=host&x-id=GetObject",{"title":315,"description":617},"blogs\u002F2024-10-11-retour-survivre-dans-la-js-jungle-des-outils-de-tests-de-lise-quesnel-au-devfest-2024\u002Findex",[310,631,308,632,633,311],"2024","js","testing","FPenvAfjSeiSnJY2IW4Rq8v5wtg1U-1XvtHA0BjM4Hk",{"id":636,"title":637,"alt":638,"authors":639,"body":647,"date":1813,"description":1814,"extension":288,"image":289,"meta":1815,"navigation":291,"ogImage":289,"path":1816,"published":291,"reviewers":1817,"seo":1822,"stem":1823,"tags":1824,"__hash__":1826},"blogs\u002Fblogs\u002F2025-04-15-dbrief-react-paris-2025\u002Findex.md","Débrief React Paris 2025","Photographie de la salle de conférence de React Paris. Le décor est luxueux mêlant moulures en bois et tons beiges pour la décoration",[640,644],{"id":641,"name":642,"image":643,"linkedin":14,"x":14},"188f4462-cd38-80d5-b9e6-ec28a94d11e5","Bastien Dufour","\u002Fdefault-author-image.webp",{"id":645,"name":646,"image":643,"linkedin":14,"x":14},"197f4462-cd38-801b-859a-c33742e0ed0d","Pierre-Emmanuel Denys",{"type":31,"value":648,"toc":1799},[649,652,655,658,665,669,681,688,708,715,724,750,763,769,784,793,796,799,802,818,823,826,832,837,840,849,856,896,903,908,911,976,979,1019,1042,1046,1055,1066,1071,1074,1111,1116,1123,1134,1148,1158,1161,1190,1201,1210,1213,1218,1221,1230,1236,1239,1248,1254,1257,1260,1269,1275,1282,1287,1293,1299,1302,1305,1310,1313,1316,1357,1361,1370,1382,1385,1388,1391,1396,1402,1407,1414,1419,1422,1429,1434,1437,1440,1445,1452,1456,1462,1480,1483,1487,1496,1499,1512,1515,1520,1523,1556,1561,1564,1646,1649,1659,1662,1706,1711,1714,1717,1745,1748,1751,1755,1764,1795],[34,650,637],{"id":651},"débrief-react-paris-2025",[39,653,654],{},"React Paris est un événement organisé par BeJs, association d’origine belge déjà à l’origine des événements React Brussels, React Africa et BeJS Conf. BeJS a été fondée en 2019 avec pour mission de présenter des conférences JavaScript dans des régions sous-représentées comme la Tunisie et le Maroc.",[39,656,657],{},"React Paris, comme les autres conférences BeJs, met en avant la diversité des intervenants grâce à des appels à propositions anonymisés, avec des règles privilégiant les speakers internationaux intervenants pour la première fois tout en faisant la part belle à la représentation locale.",[39,659,660,661,563],{},"En outre, les talks sponsorisés y sont interdits et sont ",[662,663,664],"em",{},"single-track",[56,666,668],{"id":667},"les-speakers-et-les-sujets","Les speakers et les sujets",[39,670,671,672,676,677,680],{},"React Paris 2024 nous avait offert le plaisir de voir des talks de Josh W. Comeau et d’Anthony Fu. S’étalant sur deux jours, React Paris 2025 promettait de belles conférences avec notamment la participation de Kent C. Dodds, TkDodo (maintainer ",[673,674,675],"code",{},"TanStack\u002Fquery",") et David Khourshid (créateur de ",[673,678,679],{},"XState","). En outre, des talks sur l’accessibilité (Kateryna Porshnieva), les d_esign systems_ (Yu Ling Cheng, Jean Burellier), les React Server Components (Aurora Scharff), le testing côté frontend (Violina Popova, Kate Marshalkina) mais aussi la clean architecture dans un projet Remix (Antoine Chalifour) ainsi que le rôle de l'IA dans l'écosystème React (Tejas Kumar) étaient au menu de ces deux jours.",[39,682,683,684,687],{},"La grande majorité des conférences étaient de qualité et faisaient la part belle à des sujets et des approches variés. Pour cette année, nous vous proposons d’entrer dans le détail de quelques conférences relatives à l’écosystème front ",[662,685,686],{},"(bien que mon cœur t’appartiendra toujours cher petit framework au logo de molécule ⚛︎)"," :",[64,689,690,693,696,699,702,705],{},[67,691,692],{},"les dernières nouveautés CSS",[67,694,695],{},"l’accessibilité",[67,697,698],{},"les React Server Components",[67,700,701],{},"la naissance d’une nouvelle stratégie de tests incluant des champignons",[67,703,704],{},"comment mal utiliser un framework front",[67,706,707],{},"les mathématiques à la rescousse des développeurs front",[56,709,711],{"id":710},"csss-not-dead",[712,713,714],"strong",{},"CSS’s not dead",[39,716,717],{},[139,718,721],{"href":719,"rel":720},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=h_tMtyvVPY0",[143],[662,722,723],{},"I Can’t Believe It’s Not JavaScript",[39,725,726,727,732,733,732,738,743,744,749],{},"Depuis quelques années les conférences mettant en avant les nouvelles fonctionnalités CSS fleurissent. Jemima Abu revient dans son talk sur quelques unes de ces avancées qui permettront, quand la feature ne sera pas disponible depuis seulement 3 mois ou expérimentale, d’implémenter des ",[139,728,731],{"href":729,"rel":730},"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FHTML\u002FGlobal_attributes\u002Fpopover",[143],"pop-over",", des ",[139,734,737],{"href":735,"rel":736},"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fdialog#compatibilit%C3%A9_des_navigateurs",[143],"modal",[139,739,742],{"href":740,"rel":741},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FHTML\u002FElement\u002Fsummary#browser_compatibility",[143],"accordéons"," voire des ",[139,745,748],{"href":746,"rel":747},"https:\u002F\u002Fscroll-driven-animations.style\u002F",[143],"animations de scroll"," sans avoir à écrire de JavaScript.",[39,751,752,753,758,759,762],{},"C’est une bonne nouvelle, les implémentations en JavaScript pour ces éléments UI étant souvent impératives et assez bancales. Heureusement, Jemina Abu nous rappelle que ",[139,754,757],{"href":755,"rel":756},"https:\u002F\u002Fdeveloper.mozilla.org\u002Ffr\u002Fdocs\u002FWeb\u002FCSS\u002F:has#compatibilit%C3%A9_des_navigateurs",[143],"dès maintenant"," il est possible d’utiliser le fantastique sélecteur CSS ",[673,760,761],{},":has"," pour, notamment, cibler un parent en fonction de ses enfants 🤯.",[39,764,765],{},[45,766],{"alt":767,"src":768},"mème de la peluche Elmo en enfer disant en anglais “OMG AMAZING”","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fimg1.webp",[56,770,772,775,776,775,781],{"id":771},"i-lt3-html",[712,773,774],{},"I"," ",[712,777,778],{},[673,779,780],{},"<3",[712,782,783],{},"HTML",[39,785,786],{},[139,787,790],{"href":788,"rel":789},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=tFO0-aMxitY",[143],[662,791,792],{},"Demystifying Accessibility in React Apps",[39,794,795],{},"L'accessibilité est un aspect crucial du développement web moderne, garantissant que les applications peuvent être utilisées par tous, y compris les personnes en situation de handicap. L’accessibilité ça n’est pas que pour les autres, c’est aussi pour soi plus tard.",[39,797,798],{},"Soyons donc un peu égoïste et ne demandons pas la permission pour écrire du code accessible, après tout le faisons-nous pour écrire du code propre ?",[39,800,801],{},"Lors de sa conférence, Kateryna Porshnieva rappelle les outils courants utilisés par les personnes en situation de handicap (lecteurs d’écran, voice control, etc.) et présente plusieurs outils et techniques pour améliorer l'accessibilité des applications React. Elle insiste notamment sur :",[64,803,804,807],{},[67,805,806],{},"l’importance du HTML et de sa sémantique",[67,808,809,810,813,814,817],{},"le recours à ",[673,811,812],{},"ARIA","  (",[662,815,816],{},"Accessible Rich Internet Applications"," soit« un ensemble de rôles et d’attributs qui définissent comment rendre le contenu et les applications web accessibles pour les personnes avec des handicaps ») lequel peut parfois poser plus de problèmes qu’il n’en résout s’il est mal utilisé",[39,819,820],{},[712,821,822],{},"L'importance de l'HTML",[39,824,825],{},"Tout commence avec le HTML. La structure HTML se transforme en arbre DOM, puis en interface utilisateur visuelle. L'arbre d'accessibilité, exposé aux technologies d'assistance et accessible aux dev tools, est également créé à partir de cette structure.",[39,827,828],{},[45,829],{"alt":830,"src":831},"Schéma avec de gauche à droite : le HTML avec une flèche pointant vers l’arbre du DOM, l’arbre du DOM avec deux flèches dont l’une pointe vers le rendu visuel et l’autre vers l’arbre d’accessibilité","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fimg2.webp",[39,833,834],{},[712,835,836],{},"Sémantique et ARIA",[39,838,839],{},"La sémantique HTML joue un rôle essentiel en transmettant le sens des éléments. Cependant, dans les interfaces modernes, les balises HTML peuvent ne pas suffire. La boîte à outils d’ARIA vient en aide en modifiant la signification des éléments HTML.",[39,841,842,843,848],{},"Prudence toutefois car la spécification ARIA recommande son utilisation uniquement lorsque la sémantique HTML ne permet pas de répondre à un besoin spécifique car, paradoxalement, les sites qui utilisent ARIA ont 34 % d'erreurs d'accessibilité en plus par rapport à ceux qui n'en font pas usage (",[139,844,847],{"href":845,"rel":846},"https:\u002F\u002Fwebaim.org\u002Fprojects\u002Fmillion\u002F#:~:text=74.6%25%20of%20the%20one%20million%20home%20pages%20used%20ARIA%20(excluding%20ARIA%20landmark%20roles).%20Home%20pages%20with%20ARIA%20present%20averaged%2034.2%25%20more%20detected%20errors%20than%20those%20without%20ARIA",[143],"source",").",[39,850,851,852,855],{},"Ainsi, transformer une ⁠",[673,853,854],{},"\u003Cdiv>"," en bouton en lui ajoutant le rôle adéquat :",[857,858,862],"pre",{"className":859,"code":860,"language":861,"meta":277,"style":277},"language-html shiki shiki-themes github-dark","\u003Cdiv role=\"button\">click\u003C\u002Fdiv>\n","html",[673,863,864],{"__ignoreMap":277},[865,866,869,873,877,881,884,888,891,893],"span",{"class":867,"line":868},"line",1,[865,870,872],{"class":871},"s95oV","\u003C",[865,874,876],{"class":875},"s4JwU","div",[865,878,880],{"class":879},"svObZ"," role",[865,882,883],{"class":871},"=",[865,885,887],{"class":886},"sU2Wk","\"button\"",[865,889,890],{"class":871},">click\u003C\u002F",[865,892,876],{"class":875},[865,894,895],{"class":871},">\n",[39,897,898,899,902],{},"n’est pas une solution miracle : appliquer ⁠",[673,900,901],{},"role=\"button\""," à une div implique de fournir les fonctionnalités attendues d'un bouton à cet élément en plus de la simple indication de son rôle.",[39,904,905],{},[712,906,907],{},"Quelques éléments de la boîte à outils d’ARIA",[39,909,910],{},"Parmi les bonnes pratiques évoqués par Kateryna Porshnieva, on compte :",[64,912,913,928,939,949],{},[67,914,915,916,919,920,923,924,927],{},"l’attribut ⁠",[673,917,918],{},"aria-hidden",", utile pour masquer les éléments décoratifs, évitant qu'ils ne perturbent l'expérience utilisateur des lecteurs d'écran. Attention toutefois au recours à ",[673,921,922],{},"aria-label"," pour les boutons en forme d’icône puisque ces labels ne peuvent être traduits automatiquement. On préférera cacher visuellement le label (",[673,925,926],{},".sr"," avec Tailwind par exemple)",[67,929,930,931,934,935,938],{},"une bonne gestion du focus en ayant recours à ",[673,932,933],{},":focus-visible"," plutôt qu’au destructeur ⁠",[673,936,937],{},"*:focus { outline: none; }"," — le navigateur se chargeant de gérer intelligemment le focus visible ou non",[67,940,941,944,945,948],{},[673,942,943],{},":not(:has(:focus-visible))"," pour la gestion des éléments apparaissant au ",[662,946,947],{},"hover"," associé à l’utilisation de media queries ciblant les écrans tactiles",[67,950,951,952,955,956,959,960,967,968,971,972,975],{},"pour les formulaires, les recommendations sont nombreuses et de bon sens. On citera la génération d’",[673,953,954],{},"id"," unique avec le hook ",[673,957,958],{},"useId"," de React, l’utilisation astucieuse de ",[139,961,964],{"href":962,"rel":963},"https:\u002F\u002Fdeveloper.mozilla.org\u002Fen-US\u002Fdocs\u002FWeb\u002FAccessibility\u002FARIA\u002FReference\u002FAttributes\u002Faria-describedby",[143],[673,965,966],{},"aria-describedby"," pour contrebalancer le support hésitant de ",[673,969,970],{},"aria-errormessage"," et un peu de politesse avec les notifications dynamiques grâce à ",[673,973,974],{},"aria-live=\"polite\""," pour les notifications non urgentes.",[39,977,978],{},"Enfin, Kateryna Porshnieva rappelle qu’un code accessible, c’est aussi des tests front plus robustes !",[857,980,984],{"className":981,"code":982,"language":983,"meta":277,"style":277},"language-javascript shiki shiki-themes github-dark","const usernameError = screen.getByRole(\"alert\", {\n  name: \u002Fusername is too short\u002Fi\n});\n\nexpect(usernameError).toBeInTheDocument();\nexpect(username).toBeInvalid();\n","javascript",[673,985,986,991,996,1001,1007,1013],{"__ignoreMap":277},[865,987,988],{"class":867,"line":868},[865,989,990],{},"const usernameError = screen.getByRole(\"alert\", {\n",[865,992,993],{"class":867,"line":278},[865,994,995],{},"  name: \u002Fusername is too short\u002Fi\n",[865,997,998],{"class":867,"line":283},[865,999,1000],{},"});\n",[865,1002,1004],{"class":867,"line":1003},4,[865,1005,1006],{"emptyLinePlaceholder":291},"\n",[865,1008,1010],{"class":867,"line":1009},5,[865,1011,1012],{},"expect(usernameError).toBeInTheDocument();\n",[865,1014,1016],{"class":867,"line":1015},6,[865,1017,1018],{},"expect(username).toBeInvalid();\n",[39,1020,1021,1022,1027,1028,1032,1033,1036,1037,563],{},"Concernant le test de l’accessibilité en elle-même, Il existe plusieurs outils comme ",[139,1023,1026],{"href":1024,"rel":1025},"https:\u002F\u002Fwww.deque.com\u002Faxe\u002Fdevtools\u002F",[143],"axe DevTools",", ",[139,1029,210],{"href":1030,"rel":1031},"https:\u002F\u002Fdeveloper.chrome.com\u002Fdocs\u002Flighthouse\u002Faccessibility\u002Fscoring?hl=fr",[143]," et le plugin ESLint ",[673,1034,1035],{},"jsx-a11y",". Enfin, des testeurs spécialisés peuvent être recrutés sur des plateformes comme ",[139,1038,1041],{"href":1039,"rel":1040},"https:\u002F\u002Fmakeitfable.com\u002F?utm_source=https%3A%2F%2Fblog.hoppr.tech",[143],"Fable",[56,1043,1045],{"id":1044},"rsc-pas-de-client-pas-de-problème","RSC : pas de client, pas de problème",[39,1047,1048],{},[139,1049,1052],{"href":1050,"rel":1051},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=dA-8FY5xlbk",[143],[662,1053,1054],{},"React Server Components: Elevating speed, interactivity, and user experience",[39,1056,1057,1058,1061,1062,1065],{},"Voilà une démo impressionnante d'une application Todo réalisée par Aurora Scharff avec les composants serveur de React (RSC) – sans utiliser ⁠",[673,1059,1060],{},"useEffect"," ni ",[673,1063,1064],{},"⁠useState",". L'application finale s'affiche rapidement et répond rapidement, malgré des temps de réponse simulés côté backend vraiment très longs.",[39,1067,1068],{},[712,1069,1070],{},"Présentation de RSC",[39,1072,1073],{},"Les RSC s'exécutent côté serveur ou au moment de la compilation, sans dépendre des API du navigateur, de l'état ou des effets. Brièvement, ses avantages sont les suivants :",[64,1075,1076,1082,1088,1094],{},[67,1077,1078,1081],{},[712,1079,1080],{},"Réduction de la taille du bundle."," La taille du bundle envoyé au client est réduite, ce qui améliore les performances lors du chargement des pages",[67,1083,1084,1087],{},[712,1085,1086],{},"Récupération asynchrone des données."," Les données sont récupérées de manière asynchrone depuis le composant lui-même, sans attendre que le composant soit monté côté client et sans devoir gérer un état local",[67,1089,1090,1093],{},[712,1091,1092],{},"Accès direct aux ressources du backend."," Les ressources du backend sont accessibles directement puisque les appels sont exécutés côté serveur.",[67,1095,1096,775,1099,1104,1106,1107,1110],{},[712,1097,1098],{},"Report du rendu et",[662,1100,1101],{},[712,1102,1103],{},"progressive enhancement",[712,1105,563],{}," Les composants non essentiels au chargement de la page sont rendus au besoin, avec une UI de chargement (",[673,1108,1109],{},"⁠\u003CSuspense>","), divisant le coût des requêtes réseau et du rendu entre client et serveur.",[39,1112,1113],{},[712,1114,1115],{},"Et côté code ?",[39,1117,1118,1119,1122],{},"Disponible depuis React 19, le hook ",[673,1120,1121],{},"⁠use"," est utilisé pour rendre de manière asynchrone un composant client qui prend une promesse en propriété, utile lorsque le composant a besoin d'accéder à des API du navigateur (et doit donc être un composant client) mais que le parent est un composant serveur qui ne doit pas bloquer le rendu pour des données dépendantes.",[39,1124,1125,1126,1129,1130,1133],{},"React 19 introduit également ",[673,1127,1128],{},"⁠useOptimistic"," pour rendre l'interface utilisateur sans attendre la réponse asynchrone. Aurora Scharff insiste également sur la pertinence d’utiliser ",[673,1131,1132],{},"⁠cache"," (toujours en canary au premier semestre 2025) :",[64,1135,1136,1145],{},[67,1137,1138,1139,1144],{},"pour mettre en cache des requêtes\u002Fcoûteux calculs, permettant le pré-chargement de données côté serveur (cf. ",[139,1140,1143],{"href":1141,"rel":1142},"https:\u002F\u002Ffr.react.dev\u002Freference\u002Freact\u002Fcache#preload-data",[143],"la documentation de React"," à ce sujet)",[67,1146,1147],{},"et, plus important encore, pour conserver le caractère composable des composants : deux composants peuvent appeler le même service API, sans redondance, les données récupérées par le premier seront réutilisables pour le deuxième",[39,1149,1150,1151,1153,1154,1157],{},"L'amélioration progressive (",[662,1152,1103],{},") est également possible via le composant ⁠",[673,1155,1156],{},"\u003CForm>"," de Next.js, qui repose sur HTML plutôt que sur JavaScript.",[39,1159,1160],{},"Enfin, le talk se termine sur quelques bonnes pratiques liées à l’utilisation des RSC :",[64,1162,1163,1170,1181],{},[67,1164,1165,1166,1169],{},"résoudre les promesses le plus profondément possible dans l'arbre de composants et non au plus haut niveau de la page (👉 ",[673,1167,1168],{},"getServerSideProps",") → ne bloque plus le rendu",[67,1171,1172,1173,1180],{},"les indicateurs de chargement avec interface utilisateur adaptée deviennent capitaux pour le ",[139,1174,1177],{"href":1175,"rel":1176},"https:\u002F\u002Fweb.dev\u002Farticles\u002Fcls?hl=fr",[143],[662,1178,1179],{},"cumulative layout shift"," et par extension pour une meilleure expérience utilisateur",[67,1182,1183,1184,1189],{},"utiliser l'URL comme source de vérité de l'état de l'application (cf. l’excellent talk de François Best ",[139,1185,1188],{"href":1186,"rel":1187},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=U__Rwsp8v78",[143],"« Type-Safe URL State Management in React with nuqs »",")",[56,1191,1193,775,1198],{"id":1192},"champignon-testing-de-paris",[662,1194,1195],{},[712,1196,1197],{},"Champignon testing de",[712,1199,1200],{},"Paris",[39,1202,1203],{},[139,1204,1207],{"href":1205,"rel":1206},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=OYZNTPp04hw",[143],[662,1208,1209],{},"At the top of the pyramid: Playwright testing at scale",[39,1211,1212],{},"Kate Marshalkina fait un chouette retour d’expérience sur une codebase chaotique, très partiellement écrite en TypeScript et avec des tests peu efficaces.",[39,1214,1215],{},[712,1216,1217],{},"Une petite histoire des stratégies de test",[39,1219,1220],{},"Kate revient d’abord sur les patterns pratiqués dans l’industrie :",[39,1222,1223,1224,1229],{},"La ",[139,1225,1228],{"href":1226,"rel":1227},"https:\u002F\u002Fmartinfowler.com\u002Fbliki\u002FTestPyramid.html",[143],"pyramide de test"," proposée par Mike Cohn et revue par Martin Fowler :",[39,1231,1232],{},[45,1233],{"alt":1234,"src":1235},"Schéma représentant une pyramide de test dont la base au sol est constitué des tests unitaires, le sommet des tests UI et le milieu des tests de service \u002F d’intégration","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fimg3.webp",[39,1237,1238],{},"Soulignant la fragilité des tests UI (si l’UI change, le test est obsolète), cette stratégie mise la plupart des efforts sur les tests unitaires afin d’assurer que le core de l’application est protégé par la batterie de test.",[39,1240,1241,1242,1247],{},"Malheureusement, certaines applications continuent de renverser cette pyramide pour finir par donner naissance au ",[139,1243,1246],{"href":1244,"rel":1245},"https:\u002F\u002Falisterscott.github.io\u002FTestingPyramids.html",[143],"software testing ice-cream cone","  :",[39,1249,1250],{},[45,1251],{"alt":1252,"src":1253},"Schéma représentant une pyramide de test inversé dont le sommet est au sol. Le sommet comprend les tests unitaires, le milieu les tests d’intégration et la base les tests automatisés e2e. Au-dessus de la base est représenté une forme ovale indiquant les tests de régression manuels. Le tout ressemble à un cornet de glace avec la pyramide formant le cornet et la forme ovale la boule de glace","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fimg4.webp",[39,1255,1256],{},"Dans cette situation, les tests de régression manuels sont nombreux, soumis aux variables humaines (erreur, imprécision, omission, lenteur) et bien souvent les tests fonctionnels automatisés (e2e) trop nombreux, lents et fragiles. La part des tests unitaires est réduite à peau de chagrin.",[39,1258,1259],{},"Cet anti-pattern se manifeste dans les codebases où la condition pour appliquer la pyramide de test n’est pas remplie : un code suffisamment découpé pour obtenir des tests unitaires pertinents et utiles.",[39,1261,1262,1263,1268],{},"Une stratégie plus , popularisée sous la forme du ",[139,1264,1267],{"href":1265,"rel":1266},"https:\u002F\u002Fkentcdodds.com\u002Fblog\u002Fwrite-tests",[143],"Testing Trophy"," de Kent C. Dodds, est le testing diamond :",[39,1270,1271],{},[45,1272],{"alt":1273,"src":1274},"Schéma représentant un diamant sous forme de losange. En bas en haut on trouve : les tests unitaires, les tests d’intégration (au centre, couvrant la plus grande surface du losange), les tests automatisés e2e et les tests manuels. Les tests unitaires d’un côté et l’ensemble formé par les tests automatisés e2e + les test manuels occupent une surface identique du losange, l’un en bas sous les tests d’intégration, l’autre en haut au-dessus des tests d’intégration","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fdiamond-testing.webp",[39,1276,1277,1278,1281],{},"Avec le ",[662,1279,1280],{},"testing diamond",", la confiance générée par les tests provient principalement des tests d’intégration (scope le plus large) auxquels s’ajoute le test du cœur critique de l’application (tests unitaires) et du happy flow ou smoke testing via des tests e2e automatisés ou des scripts manuels pour les scripts tiers.",[39,1283,1284],{},[712,1285,1286],{},"Tester c’est douter ? Tester c’est cueillir un champignon",[39,1288,1289,1290,563],{},"Étant donné l’état de la codebase et les délais du projet sur lequel est intervenue Kate Marshalkina, aucune de ces stratégies ne pouvait s’appliquer. Il a donc fallu établir une stratégie davantage personnalisée pour parvenir à une barrière de tests utile et maintenable : le ",[662,1291,1292],{},"testing mushroom",[39,1294,1295],{},[45,1296],{"alt":1297,"src":1298},"Schéma représentant un champignon formé par un rectangle ouvert à son sommet et une forme ovale qui coiffe le rectangle. En bas du rectangle se trouve les tests unitaires, au sommet du rectangle on trouve les tests d’intégration qui sont mélangés avec les tests automatisés e2e ","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fimg5.webp",[39,1300,1301],{},"Au premier abord, cette stratégie semble identique à l’anti-pattern de l’ice-cream cone mais la différence se situe principalement dans l’imbrication des tests d’intégration, difficiles ou peu utiles dans le cadre d’un frontend, avec les tests e2e.",[39,1303,1304],{},"Il y a quelques années encore les tests snapshot de composants étaient courants et occasionnaient une perte de temps et un grand nombre de faux-positifs. Ce temps perdu est réinjecté dans une plus grande attention portée à la solidité et pertinence des tests e2e. En effet, l’avantage de cette stratégie est que, loin d’être une panacée, elle est un compromis entre toutes les stratégies historiques, adaptée à un contexte particulier et s’appuyant sur le fait qu’aujourd’hui les tests fonctionnels automatisés en manipulant l’UI ne sont plus difficiles et coûteux… à condition de les exécuter correctement.",[39,1306,1307],{},[712,1308,1309],{},"La performance des tests e2e",[39,1311,1312],{},"Ne crions pas victoire trop vite car la performance des tests e2e est encore un problème. La trop longue durée des pipelines, la mauvaise conception des scénarios, leur multiplication et la fragilité des tests demeure fréquentes.",[39,1314,1315],{},"Ainsi, Kate Marshalkina termine son talk en présentant les bonnes pratiques que son équipe et elle ont appliqué afin de rendre les tests e2e écrits avec Playwright performants, rapides, utiles et lisibles par tous :",[64,1317,1318,1329,1335,1354],{},[67,1319,1320,1324,1325,1328],{},[139,1321,1322],{"href":1322,"rel":1323},"https:\u002F\u002Fgithub.com\u002Fvitalest\u002Fplaywright-network-cache",[143]," pour consommer depuis un cache local les appels API similaires exécutés dans les tests précédents, d’où l’inclusion des tests intégrations dans la partie E2E (le chapeau du champignon). Tout comme la ",[662,1326,1327],{},"mushroom strategy"," elle-même, c’est un trade-off entre des tests e2e demandant de maintenir de fastidieux mocks d’API au risque de se retrouver avec de faux-positifs et de ne pas capturer de vrais bugs et ceux attaquant directement l’API.",[67,1330,1331,1334],{},[673,1332,1333],{},"eslint-plugin-playwright"," pour corriger les mauvaises pratiques",[67,1336,1337,1338,1343,1344,1347,1348,1353],{},"utilisation du ",[139,1339,1342],{"href":1340,"rel":1341},"https:\u002F\u002Fplaywright.dev\u002Fdocs\u002Fpom",[143],"Page Object Model"," et du décorateur ",[673,1345,1346],{},"@step()"," pour exposer de manière claire les actions possible sur une page et grouper les actions haut niveau de l’utilisateur En combinaison avec ",[139,1349,1352],{"href":1350,"rel":1351},"https:\u002F\u002Fgithub.com\u002Fallure-framework",[143],"Allure",", les tests E2E, leurs résultats et leurs itérations sont compréhensibles pour les individus non techniques de l’équipe",[67,1355,1356],{},"lancement en parallèle des tests et augmentation du nombre de workers",[56,1358,1360],{"id":1359},"remixer-remix","Remixer Remix",[39,1362,1363],{},[139,1364,1367],{"href":1365,"rel":1366},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=i1cVfJz4Vlw",[143],[662,1368,1369],{},"Remix The Wrong (?) way",[39,1371,1372,1373,1376,1377,563],{},"Dans cette conférence, Antoine Chalifour nous fait part de ce qui l’a poussé à s’éloigner des opinions de Remix afin de modeler le framework selon ",[662,1374,1375],{},"ses"," besoins, celui de son produit ",[139,1378,1381],{"href":1379,"rel":1380},"https:\u002F\u002Fwww.geckosocial.app\u002F?utm_source=https%3A%2F%2Fblog.hoppr.tech",[143],"Geckosocial",[39,1383,1384],{},"Le projet d’Antoine permet de gérer ses publications de manière automatisée sur LinkedIn et d'autres plateformes. Il est composé d’un éditeur de texte, d’une fonctionnalité de mentions d'utilisateurs, d’une vue calendrier, de capacités d'édition de texte enrichi et d’une intégration d'IA.",[39,1386,1387],{},"Ok mais… c’est quoi déjà Remix ?",[39,1389,1390],{},"Remix c’est un méta-framework React web full-stack particulièrement puissant et offrant un ensemble de fonctionnalités côté serveur solides. Une des particularités de Remix est qu’il couple fortement le routage et la récupération de données, ce qui peut influencer la manière dont il est utilisé dans un projet.",[39,1392,1393],{},[712,1394,1395],{},"Qu’est ce qui a mené à « utiliser Remix de la mauvaise manière » ?",[39,1397,1398],{},[45,1399],{"alt":1400,"src":1401},"Mème d’internet représentant un agriculteur disant en anglais “Ce n’est pas grand chose mais au moins c’est un travail honnête”. Le haut de l’image précise “quand tu utilises Remix uniquement pour le routing après avoir abandonné ses features principales”","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fimg6.webp",[39,1403,1404],{},[712,1405,1406],{},"1. Limitations du Rendu Côté Serveur",[39,1408,1409,1410,1413],{},"Certains composants comme ceux avec rendu de date rendent difficile l’utilisation du SSR. De plus, l'éditeur de texte enrichi utilisant ",[662,1411,1412],{},"Lexical"," a besoin des nœuds DOM et fonctionne uniquement côté client. Ainsi, le SSR a été désactivé pour l'expérience utilisateur connecté.",[39,1415,1416],{},[712,1417,1418],{},"2. Données Non Plus Couplées aux Routes",[39,1420,1421],{},"Les données non plus couplées aux routes sont un autre facteur qui a contribué à l'utilisation inappropriée de Remix dans le cas d’Antoine.",[39,1423,1424,1425,1428],{},"Les exigences de données sont devenues plus complexes pour chaque écran, et les données sont réutilisées entre les composants qui ne correspondent pas aux routes. De plus, certains ",[662,1426,1427],{},"dialog"," nécessitent des données asynchrones mais ne sont pas liés à des routes spécifiques. Cela a rendu la revalidation coûteuse car les routes parentes chargeaient trop de données",[39,1430,1431],{},[712,1432,1433],{},"3. Formulaires Complexes",[39,1435,1436],{},"Enfin, les formulaires complexes sont également à l’origine de l'utilisation détournée de Remix.",[39,1438,1439],{},"Au fil du projet, les formulaires ont évolué au-delà de simples entrées, demandant une validation conditionnelle. Il a fallu également compter avec les difficultés liées aux tableaux d'objets dans les formulaires et aux actions n’étant pas toujours déclenchées par des boutons de soumission.",[39,1441,1442],{},[712,1443,1444],{},"Est-ce que Remix a encore sa place dans sa stack techno, est-ce toujours utile ?",[39,1446,1447,1448,1451],{},"Sa réponse est un grand OUI ! Remix fournit une excellente DX (",[662,1449,1450],{},"developer experience",") grâce à Vite, incluant la mise en page et le routing imbriqué, le rendu côté serveur (SSR) avec amélioration progressive pour des pages spécifiques, des redirections d'authentification côté serveur ainsi que l'intégration avec des serveurs Node existants.",[101,1453,1455],{"id":1454},"les-points-clés-a-retenir-de-son-talk","Les points clés a retenir de son talk ?",[39,1457,1458],{},[45,1459],{"alt":1460,"src":1461},"Mème d’internet en deux lignes. La première ligne représente le chanteur Drake faisant un geste de dégoût associé au texte “Utiliser Remix comme prévu par ses créateurs”. La deuxième ligne représente également le chanteur Drake faisant un signe d’approbation et associé au texte “Utiliser Remix de la mauvaise façon mais qui fonctionne pour ton projet”","\u002Fcontent-assets\u002F2025-04-15-dbrief-react-paris-2025\u002Fassets\u002Fimg7.webp",[64,1463,1464,1471,1474,1477],{},[67,1465,1466,1467,1470],{},"Les frameworks ne sont que des outils ",[712,1468,1469],{},":"," rien n’oblige à utiliser toutes ses fonctionnalités (👉 edge middleware)",[67,1472,1473],{},"Migrer progressivement pour ne pas tout réécrire d’un coup",[67,1475,1476],{},"Continuer à déployer en production pendant la migration",[67,1478,1479],{},"Utiliser ce qui fonctionne pour les besoins spécifiques du produit – amen",[39,1481,1482],{},"En résumé, Antoine a proposé un excellent talk montrant que la tech est au service des développeurs et non l’inverse !",[56,1484,1486],{"id":1485},"un-mathématicien-et-un-développeur-entrent-dans-un-foo-bar","Un mathématicien et un développeur entrent dans un foo bar…",[39,1488,1489],{},[139,1490,1493],{"href":1491,"rel":1492},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=ULTiZDTNeyI",[143],[662,1494,1495],{},"From Chaos to Clarity: Mathematical Foundations for Maintainable React Applications",[39,1497,1498],{},"Cette conférence étonnante d’Héla Ben Khalfallah porte sur la façon d'optimiser une codebase React grâce à un trio de concepts mathématiques :",[64,1500,1501,1504,1507],{},[67,1502,1503],{},"la théorie des graphes",[67,1505,1506],{},"la théorie des catégories",[67,1508,1509],{},[662,1510,1511],{},"lambda-calculus",[39,1513,1514],{},"L’objectif derrière ces concepts intimidants est clair : produire du code robuste et performant.",[39,1516,1517],{},[712,1518,1519],{},"Théorie des graphes : visualiser et structurer notre code react",[39,1521,1522],{},"Même si l'idée de représenter une application comme un graph est familière, Héla rappelle les caractéristiques nécessaires du graph afin que la représentation soit pertinente :",[64,1524,1525,1528,1541],{},[67,1526,1527],{},"modéliser les fichiers comme des nœuds et les imports comme des arêtes pour repérer immédiatement les dépendances circulaires pouvant perturber la maintenance et le bundling",[67,1529,1530,1531,1534,1535,1540],{},"identifier les communities : les algorithmes de ",[662,1532,1533],{},"community detection"," (e.g. ",[139,1536,1539],{"href":1537,"rel":1538},"https:\u002F\u002Ffr.wikipedia.org\u002Fwiki\u002FM%C3%A9thode_de_Louvain",[143],"Louvain",") montrent comment regrouper les fichiers pour maximiser la cohésion interne et minimiser les dépendances extérieures. C'est un outil objectif pour organiser les dossiers et les packages de manière optimale.",[67,1542,1543,1544,1547,1548,1551,1552,1555],{},"mesurer l'influence de chaque fichier : les métriques comme la ",[662,1545,1546],{},"centrality",", la ",[662,1549,1550],{},"density"," ou le ",[662,1553,1554],{},"sparsing"," permettent de repérer rapidement les zones à réfactoriser, les fichiers critiques à tester en priorité et les morceaux de code spaghetti pénalisant l'évolution du projet",[39,1557,1558],{},[712,1559,1560],{},"Catégorie théorie ou comment revenir à des fonctions pures et des transformations unifiées",[39,1562,1563],{},"Et une petite plongée dans la théorie des catégories pour la conception fonctionnelle en compagnie d’Héla. L'objectif est de passer des mutations et des effets secondaires aux transformations. Quelques principes :",[64,1565,1566,1569,1615],{},[67,1567,1568],{},"préférer le morphisme à la mutation : au lieu de muter les données, appliquer une suite de transformations qui maintiendra la structure de départ et minimisera les effets de bord",[67,1570,1571,1578,1579,1586,1588,1589,1592,1593,1596,1597,1600,1601,1604,1605,1610,1611,1614],{},[139,1572,1575],{"href":1573,"rel":1574},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FFunctor",[143],[662,1576,1577],{},"Functors"," et ",[139,1580,1583],{"href":1581,"rel":1582},"https:\u002F\u002Fen.wikipedia.org\u002Fwiki\u002FMonad_(functional_programming)",[143],[662,1584,1585],{},"Monads",[662,1587,563],{}," Concrètement, en JavaScript, les ",[673,1590,1591],{},"Array","s sont naturellement des functors via le ",[673,1594,1595],{},".map",", tandis que les structures comme ",[673,1598,1599],{},"Promise"," fonctionnent comme des monades via le ",[673,1602,1603],{},".then",". Ces concepts rappellent simplement à quel point découper son code en transformations pures peut simplifier les tests et la lisibilité. Ou encore ",[139,1606,1609],{"href":1607,"rel":1608},"https:\u002F\u002Fwww.npmjs.com\u002Fpackage\u002Fneverthrow",[143],"neverthrow"," qui est un package npm qui propose une Monad ",[673,1612,1613],{},"Result"," i.e la meilleure manière de gérer un résultat qui peut être en erreur 😎_._",[67,1616,1617,1620,1621,1027,1624,1578,1627,1630,1631,1634,1635,1637,1638,1641,1642,1645],{},[712,1618,1619],{},"Transducers","\nL'optimisation de ",[673,1622,1623],{},"map",[673,1625,1626],{},"filter",[673,1628,1629],{},"reduce"," en une seule itération, sans créer d'intermédiaire superflu, reste un incontournable pour les ensembles de données volumineux.\nConcrètement, faire un ",[673,1632,1633],{},".filter"," suivi d’un ",[673,1636,1595],{}," puis d’un ",[673,1639,1640],{},".reduce",", même si la complexité algorithmique reste la même (potentiellement ",[673,1643,1644],{},"O(n)","), sur un gros volume de données, il peut être intéressant de les regrouper afin d’éviter 2 tours de boucle superflus.",[39,1647,1648],{},"On voit ici à quel point les bonnes pratiques côté code s’inspirent de la théorie des catégories et traduisent ses principes… comme le montre parfaitement la composition !",[39,1650,1651,775,1654],{},[712,1652,1653],{},"Lambda calculus : optimiser grâce à la composition et aux",[662,1655,1656],{},[712,1657,1658],{},"lazy evaluations",[39,1660,1661],{},"Le Lambda calculus fournit un éventail d’outils qui sont déjà bien connus des développeurs :",[64,1663,1664,1671,1686,1692],{},[67,1665,1666,1667,1670],{},"le ",[662,1668,1669],{},"currying"," pour transformer les fonctions à multiples arguments en une chaîne de fonctions à un seul argument. Loin d’être accessoire ou superficiel, c'est un moyen efficace de réutiliser les sous-ensemble d’une logique",[67,1672,1673,1674,1677,1678,1681,1682,1685],{},"les ",[662,1675,1676],{},"Higer-Order Functions"," (HOFs), importantes pour la composition, par exemple d’un ",[662,1679,1680],{},"debounce"," et d’un ",[662,1683,1684],{},"throttle",". Mieux on segmente les responsabilités dans nos HOFs, plus c'est réutilisable et clair",[67,1687,1688,1691],{},[662,1689,1690],{},"lazy evaluation et memoization"," : deux grands classiques ! D’une part n'évaluer que ce dont on a besoin quand on en a besoin, d’autre part conserver le résultat pour éviter de répéter des opérations coûteuses",[67,1693,1694,1695,1698,1699,1702,1703],{},"le pattern du trampoline pour gérer la récursivité en JavaScript sans causer de ",[662,1696,1697],{},"stack overflow."," L’idée du trampoline est de retourner une fonction exécutée par le trampoline (appelée ",[662,1700,1701],{},"continuation",") plutôt que d’ajouter sempiternellement un niveau à la stack jusqu’à l’overflow_._ C’est le trampoline, la fonction wrapper, qui se charge d’appeler la fonction récursive à la fin de son traitement plutôt que la fonction récursive qui s’appelle elle-même. C’est un pattern indispensable dans un contexte de code récursif puisqu’à date JavaScript ne supporte malheureusement pas les ",[662,1704,1705],{},"Tail Recursive Functions.",[39,1707,1708],{},[712,1709,1710],{},"Pourquoi ce talk est un précieux rappel ?",[39,1712,1713],{},"Toutes ces bonnes pratiques pour un code robuste ne devraient pas être surprenantes pour beaucoup de développeurs. Mais cette conférence est la bienvenue car de la théorie à la pratique il y a parfois un abysse. Même en tant que développeur senior, la tentation de laisser s'installer quelques entorses à la pureté des fonctions est fréquente.",[39,1715,1716],{},"Héla a donc rappelé de manière concise et claire pourquoi ces outils et techniques sont utiles :",[64,1718,1719,1725],{},[67,1720,1721,1722,1724],{},"Une meilleure maintenabilité ",[712,1723,1469],{}," des fonctions pures et un code bien modulaire se manipulent et se refactorisent plus facilement",[67,1726,1727,1728,1730,1731,1734,1735,1578,1738,1027,1741,1744],{},"Une plus grande performance ",[712,1729,1469],{}," la ",[662,1732,1733],{},"lazy evaluation,"," la bonne organisation des imports et l’utilisation des outils de la théorie des catégories (morphisme, ",[662,1736,1737],{},"functors",[662,1739,1740],{},"monads",[662,1742,1743],{},"transducers",") afin d’éviter les side-effects peuvent se révéler réellement determinants pour un projet React ou front de grande envergure",[39,1746,1747],{},"Ces techniques sont déjà au cœur de la plupart des bonnes pratiques et les voir présentées ensemble dans un format clair et méthodique est un rappel utile pour garder un projet propre et évolutif.",[39,1749,1750],{},"Bref, un indispensable à intégrer ou réintégrer dans les équipes souhaitant maintenir un standard de qualité élevé sur leurs applications React.",[56,1752,1754],{"id":1753},"les-autres-conférences","Les autres conférences",[39,1756,1757,1758,1763],{},"C’est tout pour nous cette année, n’hésitez pas à consulter sur ",[139,1759,1762],{"href":1760,"rel":1761},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=nYOAWjcRuBY&list=PL53Z0yyYnpWitP8Zv01TSEQmKLvuRh_Dj",[143],"YouTube"," ces conférences et les autres pour ne pas manquer notamment :",[64,1765,1766,1774,1784],{},[67,1767,1666,1768,1773],{},[139,1769,1772],{"href":1770,"rel":1771},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=-W3_dxNDHVw",[143],"cours d’histoire"," de Kent C. Dodds “des origines obscures et un peu sales du web aux RSC” (nom non officiel) ;",[67,1775,1776,1783],{},[139,1777,1780],{"href":1778,"rel":1779},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=LzCEfzHh8Eo",[143],[662,1781,1782],{},"A Tale of Two Components: Mastering A\u002FB Testing in React"," de Violina Popova sur sujet un peu niche mais pointu et brillamment exposé ;",[67,1785,1786,1787,1794],{},"la petite leçon de bon sens de TkDodo avec ",[139,1788,1791],{"href":1789,"rel":1790},"https:\u002F\u002Fwww.youtube.com\u002Fwatch?v=l3PxErcKeAI",[143],[662,1792,1793],{},"React Query API Design - Lessons Learned"," qui, sans être hélas très surprenante, offre quelques retours d’expérience sur la difficulté de humaine et technique de produire du code pour l’Open Source.",[1796,1797,1798],"style",{},"html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .s95oV, html code.shiki .s95oV{--shiki-default:#E1E4E8}html pre.shiki code .s4JwU, html code.shiki .s4JwU{--shiki-default:#85E89D}html pre.shiki code .svObZ, html code.shiki .svObZ{--shiki-default:#B392F0}html pre.shiki code .sU2Wk, html code.shiki .sU2Wk{--shiki-default:#9ECBFF}",{"title":277,"searchDepth":278,"depth":278,"links":1800},[1801],{"id":651,"depth":278,"text":637,"children":1802},[1803,1804,1805,1807,1808,1810,1811,1812],{"id":667,"depth":283,"text":668},{"id":710,"depth":283,"text":714},{"id":771,"depth":283,"text":1806},"I <3 HTML",{"id":1044,"depth":283,"text":1045},{"id":1192,"depth":283,"text":1809},"Champignon testing de Paris",{"id":1359,"depth":283,"text":1360},{"id":1485,"depth":283,"text":1486},{"id":1753,"depth":283,"text":1754},"2025-04-15T07:20:37.563Z"," React Paris est un événement organisé par BeJs, association d’origine belge déjà à l’origine des événements React Brussels, React Africa et BeJS Conf. BeJS a été fondée en 2019 avec pour mission de p",{},"\u002Fblogs\u002F2025-04-15-dbrief-react-paris-2025",[1818,1820],{"id":16,"name":17,"image":1819,"linkedin":19,"x":14},"https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002F53946b9e-3bb9-45bd-a8b4-429c51156179\u002FT04PC176TGB-U05EW3YF61Z-5e129f612df3-512.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466S2JJIBLE%2F20250415%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20250415T072037Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJ%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIQCRKK2GX8ZGlbk7tJJGQY5hZdbx3fEoIk1h%2FLudLPyD7AIgGXvLeISbp35lBICj1oFdN%2BoUTJmFn%2BzLSkkGVOfXu0Uq%2FwMIKBAAGgw2Mzc0MjMxODM4MDUiDMX9alt9PW7E4t30XyrcA5ahO2V8DBPmczeLmpnoxnA68tp5PIMBYLPUHJ4aw6mrECxXXu1KEU6dqBzsTsSrd6QTRHWjcBT69uyeLwLrYYeoaV1XAvaoRxy78zc6ehbpuRw0rRP79%2FKADKkQ2X%2BIQrOcz%2Fog3MArYcPINO%2F%2BzQYHTQwsk428aET9cXvX%2BQw3v1g7jsXsASPVU8rc6Xm7TTfDgmvveBixLCjRqNEbnOseI4esrMtmYb5NvcZdsbNXxEbVYpJM0d83qUm8kJGPN78Sb%2FVdl7L69Hs4PyvTmYXPOcgYp%2BCwUsQehcR0FoGAAwum1va%2Bn1mpF%2FTe9tMMfDhgdP9uYC0ITvojIWQ3DOMHFKqVSuHiQrbVd0CHopQdOcpWhtisuutwmyAmP6SvymYTPorlsaiSmpCxkMsEtjNaceBfg9Dp%2FsueGnCYIfVxkR%2Bn8LY%2BNv00BXYFg8Lu%2B3bWe4MbVioYTHJ8N2Ld2UL8tbJZ0WwQpgAwcrynqBtmSyzWdX63Wstqik8Yo2Grnq3im4kI4v9lzg4APZVASr9ZvGtku%2BQKD0%2BQE64y5k1cJwM8uIhKmdtYcFs8nKXFyi4CRUYfuHKQM5LtiL8ZBUtCMtpRGbdHXIz%2FVubEbMA5wTd2oj%2F2kz89SzuWMICA%2BL8GOqUB9FRt1kzYEMIHw7nNJ6bsbc2cIQVUJoxOHfmn8GkCihLQj0HLUyuxeYldcfkeBLe3qUSevJyamAgcdOoGN7QyRqkZT0nVZzN%2FZglozy8qiEBOXkj23Pa5TRx5YcgAhBjha8xnznicwV1covjlrkMu%2Fogppz7wmIBeWrAZRhe3kFZArhjMN8tjQUy%2F4VGBdeNZ6lJ%2FfhN44%2FRwg1%2BHCZVxBrUyorNA&X-Amz-Signature=bcab8d8364d2bc7b4b9c0db3da5f06866bce409576051747590078b3ad494e71&X-Amz-SignedHeaders=host&x-id=GetObject",{"id":10,"name":11,"image":1821,"linkedin":13,"x":14},"https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002Ff8f82a79-9d41-4302-b1a5-37882985167f\u002Fnicoz_hoppr.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466267U6E46%2F20250415%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20250415T072034Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjEJ%2F%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQCnrM%2Bk5Sk%2F11pBLISFJydtzvTUs5KhMkh7tlOFgNr4yQIhAK8VJ7yK9YuXc%2Fczuzn3EgtiMGQrUQs5opBS2CNTX%2FrJKv8DCCgQABoMNjM3NDIzMTgzODA1Igz%2BNwZ5qQF1hkqm%2BIAq3AMtCS%2BcPyJkN%2Farh%2F%2BEeLzsnvLnNAYye7qH3Wm6bkWmcMG7dgAEM%2BRAyCJnuZbwBIs8D2%2FkDWNpFSvjqqWZqX6JiMFY5ruxGXqNZ%2B441PgJVEuMZVZ0zUsnHhbSWGikOOrblcTlQiaf71WK0AcARvV9HKNHH3ZTfUpAJd87UzDcrrkLRNKJGas4L%2Bp5i%2FhH6jmX%2Bngt1XAhLfnfiqCJK%2BnYeEG02z8gK8azHjNrPBQYyENvdreGBaD%2F42xC6mIjLoccis%2BMVUZ0bKfOO59FcuTLNswmEuC2%2FacigjIL0aSphWdcR2Jo3%2FcafyD05LSyzVqPc%2FBzXn4IZmowrmAEiw6RgrKU6x8909X5s29c6uYLiw3537VNBHLIA42Qtq8BVvn60Ro9kAegouqCrRZjliSQZp%2FcdkAIqCWjLmp3Ab5MeqtdH5ZncZThtOxiwwFByd%2BhozKhYzAoLpVJtCEPlql5ECKoaZD3%2BRsVRENHEzwMEX%2BgDrJTENh%2Fxv4n11evWZX7khwe3KN4Z2cxnh3LNO74hzpgapB1BMbKOWluOc4ndt4vhEx5o1h1s7yXCXa3KzCsKQ16RxeO1bNM89dh0%2BZCkiCqWCAI%2FK9%2Bq5evm947Jb9i%2Bes5VLabU3YfaDCggPi%2FBjqkAQwy5Vu7UCHrZyfN1ZaerXFy9B%2B3KQUVia%2F%2F1xY45lsdrqlk5iu6EgGG5n01l9E7%2FULqRyL3tkk5uroVlIgIn8SB55QOP0LHfwTKz33NVJhCYJ%2FUih1qw94qzvbyFvD00gvRjjQEc0KTjjvqiEUyVRviB%2B%2B8JS3tEi%2BBOhTowmkZzhP2Pt2cSaVvxkJAkLmRFFcLDGBfA37wqywpdRIuOmGSFaC4&X-Amz-Signature=187a3b781ea82533fd6a00ff971bf14a0bd6c4ae8a564b90abd2cca3f7f0f2de&X-Amz-SignedHeaders=host&x-id=GetObject",{"title":637,"description":1814},"blogs\u002F2025-04-15-dbrief-react-paris-2025\u002Findex",[309,1825,311],"front-end","mjaZzYhVb-wOKSwmbjkgMqSa6w2JHy07oXiYtZmmQLs",{"id":1828,"title":1829,"alt":1830,"authors":1831,"body":1833,"date":2392,"description":2393,"extension":288,"image":289,"meta":2394,"navigation":291,"ogImage":289,"path":2395,"published":291,"reviewers":2396,"seo":2403,"stem":2404,"tags":2405,"__hash__":2410},"blogs\u002Fblogs\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Findex.md","Un IDE avec agent IA, une alternative Open Source à Cursor : tout ce qu’il faut savoir pour bien démarrer avec Void !","Logo de l’IDE Void",[1832],{"id":16,"name":17,"image":18,"linkedin":19,"x":14},{"type":31,"value":1834,"toc":2383},[1835,1845,1848,1852,1855,1858,1884,1888,1903,1929,1933,1946,1950,1958,1967,1973,1982,1988,1991,1994,2000,2003,2006,2013,2019,2023,2030,2033,2112,2121,2127,2133,2139,2153,2159,2169,2175,2178,2184,2191,2195,2198,2204,2208,2211,2217,2222,2226,2229,2235,2238,2244,2247,2251,2254,2260,2266,2269,2275,2278,2282,2285,2288,2302,2306,2309,2336,2350,2354,2359,2364,2369,2372,2375,2378],[39,1836,1837,1838,1578,1841,1844],{},"Cursor séduit par son interface familière, sa compatibilité avec les extensions existantes, et son intégration poussée avec des modèles comme ",[662,1839,1840],{},"GPT-4",[662,1842,1843],{},"Claude",". Mais derrière cette puissance se cache une infrastructure propriétaire, où la confidentialité et le contrôle des données peuvent soulever des questions.",[39,1846,1847],{},"Depuis 5 mois, j’utilise, une alternative Open Source, Void. Il m’accompagne dans mes développements notamment dans la reprise de base de code (Suppression de code mort, Abstraction de conditions complexes, Extraction de méthode, etc) et l’ajout de fonctionnalités en Java, Python, Go. A travers ce guide, je souhaite vous partager mon retour d’expérience et vous faire découvrir Void, de ses fonctionnalités essentielles à quelques cas d’usage.",[56,1849,1851],{"id":1850},"pourquoi-lopen-source","Pourquoi l’open-source ?",[39,1853,1854],{},"Quand on parle de développement et d’IA, la principale problématique est la confidentialité d’envoi de code propriétaire à des services tiers. Par exemple, avec Cursor, vous devez envoyer vos données privées via le backend de Cursor à chaque utilisation. Cela entraîne des problèmes évidents de confidentialité. C'est également coûteux pour les développeur·euse·s, et cela signifie qu'une seule personne a le contrôle total d'un puissant modèle d'IA.",[39,1856,1857],{},"Vous l’aurez compris Void, répond à cette problématique. Il propose de nombreuses fonctionnalités dont nous avons maintenant l’habitude :",[64,1859,1860,1866,1872,1878],{},[67,1861,1862,1865],{},[712,1863,1864],{},"Auto-complétion :"," Appliquer les suggestions proposées par l’IA en appuyant sur Tab.",[67,1867,1868,1871],{},[712,1869,1870],{},"Éditeur de lignes :"," Sélectionner des lignes dont nous voulons modifier le contenu en ouvrant une fenêtre dialogue (Ctrl-K) et demandez les modifications.",[67,1873,1874,1877],{},[712,1875,1876],{},"Éditeur de fichiers :"," Nous pouvons aussi inclure des fichiers, voir toute notre base de code, via la fenêtre de dialogue globale (Ctrl-L).",[67,1879,1880,1883],{},[712,1881,1882],{},"“Any LLM, Anywhere”:"," Connexion à nos modèles préférés en local ou via le Cloud.",[56,1885,1887],{"id":1886},"quest-ce-que-cest-void","Qu’est ce que c’est Void ?",[39,1889,1890,1891,1896,1897,1902],{},"Si vous êtes un habitué de VS Code, vous serez à votre aise avec ",[139,1892,1895],{"href":1893,"rel":1894},"https:\u002F\u002Fvoideditor.com\u002F",[143],"Void",". Void est basé sur ",[139,1898,1901],{"href":1899,"rel":1900},"https:\u002F\u002Fvscodium.com\u002F",[143],"VSCodium",", un fork de VS Code. Il met l’accent sur la confidentialité, la personnalisation et l’implication de communauté sans sacrifier les fonctionnalités IA sur les quelles les développeur·euse·s peuvent d’appuyer :",[64,1904,1905,1911,1917,1923],{},[67,1906,1907,1910],{},[712,1908,1909],{},"Fondamentaux de VS Codium\u002FCode :"," Transférer tous nos thèmes, raccourcis clavier et paramètres en un clic.",[67,1912,1913,1916],{},[712,1914,1915],{},"Fonctionnalités communautaires :"," Plugins VS Codium\u002FCode ou même des fonctionnalités d'IA créées par la communauté.",[67,1918,1919,1922],{},[712,1920,1921],{},"Axé sur la confidentialité :"," Héberger les modèles localement ou se connecter directement aux fournisseurs sans intermédiaire.",[67,1924,1925,1928],{},[712,1926,1927],{},"Open-source :"," Consulter, modifier, contribuer au code source.",[56,1930,1932],{"id":1931},"comment-installer-void","Comment installer Void ?",[39,1934,1935,1936,1939,1940,1945],{},"Void est en version bêta ouverte, les installateurs (Windows, Mac & Linux) sont directement disponibles sur leur site : ",[139,1937,1893],{"href":1893,"rel":1938},[143],". Si il y a le moindre soucis, la communauté officielle de Void sur ",[139,1941,1944],{"href":1942,"rel":1943},"https:\u002F\u002Fdiscord.com\u002Finvite\u002FRSNjgaugJs",[143],"Discord"," est très active.",[101,1947,1949],{"id":1948},"connexions-à-un-llm","Connexions à un LLM",[39,1951,1952,1953,563],{},"L'un des principaux avantages de Void repose sur sa flexibilité de connexion à différents LLM. Lors de l’installation, Void propose une connexion a ",[139,1954,1957],{"href":1955,"rel":1956},"https:\u002F\u002Faistudio.google.com\u002Fapikey",[143],"Gemini via API Key",[39,1959,1960,1961,1578,1964],{},"A défaut d’être Open Source, cette connexion a un provider externe permet d’avoir accès un LLM puissant à moindre coût en contrôlant nos tokens, voir même gratuit, dans le cas des modèles ",[662,1962,1963],{},"gemini-2.0-flash",[662,1965,1966],{},"gemini-2.0-flash-lite.",[39,1968,1969],{},[45,1970],{"alt":1971,"src":1972},"Capture d’écran de l’ajout de l’API Key Gemini dans Void","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg1.webp",[39,1974,1975,1976,1981],{},"Nous verrons qu’il est aussi possible d’héberger nos propres modèles localement. Si vous partez sur le solution ",[139,1977,1980],{"href":1978,"rel":1979},"https:\u002F\u002Follama.com\u002F",[143],"Ollama",", Void est déjà pré-configuré en ce sens.",[39,1983,1984],{},[45,1985],{"alt":1986,"src":1987},"Configuration par défaut pour l’utilisation d’Ollama dans Void","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg2.webp",[39,1989,1990],{},"Dans les deux cas, en cliquant sur les liens dans la configuration, Void nous accompagne pour mettre en place notre token Gemini ou installer Ollama.",[39,1992,1993],{},"Si vous avez configuré votre token Gemini, dans les paramètres des modèles Void (Engrenage en haut à droit), vous devriez trouvez les modèles Gemini actifs.",[39,1995,1996],{},[45,1997],{"alt":1998,"src":1999},"Modèles Gemini actifs après configuration du token","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg3.webp",[39,2001,2002],{},"Wouah ! Le nombre de connecteurs disponibles !",[39,2004,2005],{},"A vous de jouer avec vos clés des différents providers de LLM ! Ici, nous nous allons passer plus de temps sur comment faire tourner un modèle en local car c’est l’une des façon les plus rapides pour avoir de l’auto-complétion et non seulement une fenêtre de dialogue.",[39,2007,2008,2009,2012],{},"En effet, comme vous pouvez le voir dans l’onglet “",[662,2010,2011],{},"Feature Options","” des paramètres, les modèles Gemini ne sont pas compatibles avec l’auto-complétion (FIM models).",[39,2014,2015],{},[45,2016],{"alt":2017,"src":2018},"L’auto-complétion non compatible avec les modèles de Gemini","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg4.webp",[101,2020,2022],{"id":2021},"utilisation-dun-llm-local","Utilisation d’un LLM local",[39,2024,2025,2026],{},"Pour utiliser un LLM en local, nous pouvons utiliser Ollama. Vous trouverez les différents installateurs (Windows, Mac & Linux) sur leur site : ",[139,2027,2028],{"href":2028,"rel":2029},"https:\u002F\u002Follama.com\u002Fdownload",[143],[39,2031,2032],{},"Il est nécessaire de faire un choix dans le LLM à utiliser, et parmis les LLMs dédiés à l’écriture de code voici les références dans leur domaine car développés par des grandes entreprises ou des laboratoires :",[2034,2035,2036,2055],"table",{},[2037,2038,2039],"thead",{},[2040,2041,2042,2046,2049,2052],"tr",{},[2043,2044,2045],"th",{},"Nom du modèle",[2043,2047,2048],{},"FIM Support",[2043,2050,2051],{},"Fonctionnalités liés au code",[2043,2053,2054],{},"Poids",[2056,2057,2058,2073,2086,2099],"tbody",{},[2040,2059,2060,2064,2067,2070],{},[2061,2062,2063],"td",{},"CodeLlama  34B",[2061,2065,2066],{},"✅",[2061,2068,2069],{},"Advanced code generation, refactoring, multi-file context",[2061,2071,2072],{},"~19GB",[2040,2074,2075,2078,2080,2083],{},[2061,2076,2077],{},"Deepseek-Coder  33B",[2061,2079,2066],{},[2061,2081,2082],{},"Complex logic generation, Java debugging, test creation",[2061,2084,2085],{},"~17GB",[2040,2087,2088,2091,2093,2096],{},[2061,2089,2090],{},"Qwen2.5-Coder  32B",[2061,2092,2066],{},[2061,2094,2095],{},"Multi-language support, strong architectural reasoning",[2061,2097,2098],{},"~16GB",[2040,2100,2101,2104,2106,2109],{},[2061,2102,2103],{},"CodeLlama  13B",[2061,2105,2066],{},[2061,2107,2108],{},"Lightweight, good for method-level FIM and snippets",[2061,2110,2111],{},"~7GB",[39,2113,2114,2115,2120],{},"Un challenger intéressant, Open-Source et particulièrement transparent dans ces résultats d’évaluation est ",[139,2116,2119],{"href":2117,"rel":2118},"https:\u002F\u002Follama.com\u002Flibrary\u002Fcodestral",[143],"CodeStral"," (~13GB). En auto-complétion, voici les scores disponibles :",[39,2122,2123],{},[45,2124],{"alt":2125,"src":2126},"Score de différents LLMs en chat","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg5.webp",[39,2128,2129],{},[45,2130],{"alt":2131,"src":2132},"Score de différents LLMs en auto-complétion","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg6.webp",[39,2134,2135,2138],{},[712,2136,2137],{},"Mais"," tous ces LLMs demandent des ressources sur votre machine, notamment de la RAM. Aujourd’hui, au vu du coût en énergie et en achat de la machine, pour ces grands LLMs de référence, il reste plus intéressant de passer par des providers et de payer les tokens utilisés.",[39,2140,2141,2142,2147,2148,2152],{},"Il est toujours possible d’héberger des modèles plus petits sur nos machines. L’un des plus petit est ",[139,2143,2146],{"href":2144,"rel":2145},"https:\u002F\u002Follama.com\u002Flibrary\u002Fqwen2.5-coder",[143],"qwen2.5-coder:0.5b",", un modèle de 398MB. Pour un compromis entre pertinence et ressources, j’utilise ",[139,2149,2151],{"href":2144,"rel":2150},[143],"qwen2.5-coder:3b"," (~1,9GB).",[39,2154,2155],{},[45,2156],{"alt":2157,"src":2158},"Évaluation des différents modèles Qwen2.5-coder ","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg7.webp",[39,2160,2161,2162,1578,2165,2168],{},"Dans tous les cas, pour lancer votre modèle, il nous suffit de 2 commandes : ",[673,2163,2164],{},"ollama pull nom_du_modèle",[673,2166,2167],{},"ollama run nom_du_modèle"," . Cette opération est unique, il n’est pas nécessaire de le faire à chaque redémarrage de notre machine.",[39,2170,2171],{},[45,2172],{"alt":2173,"src":2174},"Détection du modèle local par Void","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg8.webp",[39,2176,2177],{},"Voilà ! Aucune action supplémentaire n'est requise. Void détecte automatiquement les modèles exécutés localement. Il ne nous reste plus qu’à les activer.",[2179,2180,2181],"blockquote",{},[39,2182,2183],{},"💡 Si vous souhaitez modifier le point de terminaison de vos modèles hébergés localement, vous pouvez le faire.",[39,2185,2186,2187,2190],{},"Avant de nous lancer dans l’utilisation des fonctionnalités de Void, n’oubliez pas d’activer l’option d’auto-complétion dans les paramètres “",[662,2188,2189],{},"Features Options","”.",[56,2192,2194],{"id":2193},"utilisation-des-fonctionnalités-de-void","Utilisation des fonctionnalités de Void",[39,2196,2197],{},"J’ai demandé à notre LLM de créer un projet Java avec un simple Controller retournant “Hello, World!”. Les exemples seront basés dessus :",[39,2199,2200],{},[45,2201],{"alt":2202,"src":2203},"Fichier crée par le LLM pour nos futurs exemples","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg9.webp",[101,2205,2207],{"id":2206},"auto-complétion-de-code","Auto-complétion de code",[39,2209,2210],{},"L’auto-complétion de Void comprend le fichier actuel et le code source. À mesure que nous saisissons du code, nous pouvons accepter les suggestions du LLM en appuyant sur Tab.",[39,2212,2213],{},[45,2214],{"alt":2215,"src":2216},"Auto-complétion proposé par le LLM","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg10.webp",[2179,2218,2219],{},[39,2220,2221],{},"💡 L’auto-complétion peut aussi proposer plusieurs lignes à intégrer au code.",[101,2223,2225],{"id":2224},"éditeur-de-lignes-ctrl-k","Éditeur de lignes (Ctrl-K)",[39,2227,2228],{},"Nous avons maintenant besoin de refactoriser notre code. Sélectionnons les lignes à modifier, appuyons sur Ctrl+K. Une fenêtre de chat apparaît !",[39,2230,2231],{},[45,2232],{"alt":2233,"src":2234},"Fenêtre de chat pour la modification de lignes ","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg11.webp",[39,2236,2237],{},"Les modifications nous sons proposées et nous pouvons les accepter ou non (Dans leur intégralité ou ligne par ligne).",[39,2239,2240],{},[45,2241],{"alt":2242,"src":2243},"Suggestions d’insertion de variable par le LLM","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg12.webp",[39,2245,2246],{},"Nous pouvons aussi lui poser des questions plus complexes (Fonctions, documentation, refactorisation). La limite est notre budget de tokens ou notre machine !",[101,2248,2250],{"id":2249},"éditeur-de-fichiers-ctrl-l","Éditeur de fichiers (Ctrl-L)",[39,2252,2253],{},"Nous pouvons aussi avoir des questions plus large sur notre code qui inclut soit des fichiers spécifiques, soit l’entièreté de notre base de code. Pour cela, nous pouvons utiliser le chat global de Void.",[39,2255,2256,2257],{},"Choisissons notre LLM et posons notre question pour améliorer notre code : ",[662,2258,2259],{},"“Can you suggest me improvements for my code ?”",[39,2261,2262],{},[45,2263],{"alt":2264,"src":2265},"Suggestions d’améliorations par le LLM pour toute la base de code","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg13.webp",[39,2267,2268],{},"Il identifie clairement notre mauvaise gestion des erreurs, de logs et suggère des modifications !",[39,2270,2271],{},[45,2272],{"alt":2273,"src":2274},"Suggestions en détails des améliorations","\u002Fcontent-assets\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Fassets\u002Fimg14.webp",[39,2276,2277],{},"Comme précédemment, nous pouvons accepter les modifications dans leur intégralité ou ligne par ligne.",[56,2279,2281],{"id":2280},"mon-utilisation-en-tant-que-développeur","Mon utilisation en tant que développeur",[39,2283,2284],{},"J’utilise Void depuis maintenant cinq mois principalement dans le cadre de refactoring de mon code. Mes tests restent mes garde-fous et sont conçus et maintenus pour garantir la robustesse de mes développements.",[39,2286,2287],{},"Pour les tâches plus lourdes comme l’édition de lignes ou de fichiers via interface Chat, je m’appuie sur les modèles Gemini, qui me permettent d’accéder à une puissance de calcul que ma machine ne pourrait pas supporter seule.",[39,2289,2290,2291,2297,2298,2301],{},"Pour l’auto-complétion, je privilégie les modèles ",[139,2292,2294],{"href":2144,"rel":2293},[143],[712,2295,2296],{},"Qwen2.5-Coder",", qui offrent un compromis entre légèreté et fonctionnalités. Si je disposais de plus de RAM, je basculerais probablement vers ",[139,2299,2119],{"href":2117,"rel":2300},[143]," qui semble être une alternative prometteuse.",[56,2303,2305],{"id":2304},"pour-les-curieux","Pour les curieux !",[39,2307,2308],{},"L’architecture de Void est modulaire et intègre de manière expérimentale de nombreuses fonctionnalités :",[64,2310,2311,2314,2317],{},[67,2312,2313],{},"Indexation de fichiers : capacités de recherche et de navigation améliorées",[67,2315,2316],{},"Génération de Docstring : assistance automatisée à la documentation",[67,2318,2319,2320,2325,2326,2329,2330,2335],{},"Intégrations de composants externes : ",[139,2321,2324],{"href":2322,"rel":2323},"https:\u002F\u002Fwww.greptile.com\u002F",[143],"Greptile"," (Revue de code), ",[139,2327,1980],{"href":1978,"rel":2328},[143]," (Hébergement local) et ",[139,2331,2334],{"href":2332,"rel":2333},"https:\u002F\u002Fdocsearch.algolia.com\u002F",[143],"DocSearch"," (Recherche de documentation)",[39,2337,2338,2339,2343,2344,2349],{},"N’hésitez pas à faire un tour sur le ",[139,2340,2342],{"href":1942,"rel":2341},[143],"Discord officiel"," et sur le répertoire ",[139,2345,2348],{"href":2346,"rel":2347},"https:\u002F\u002Fgithub.com\u002Fvoideditor\u002Fvoid",[143],"Github"," !",[56,2351,2353],{"id":2352},"conclusion","Conclusion",[2179,2355,2356],{},[39,2357,2358],{},"1️⃣ Void répond à la problématique de confidentialité en nous permettant d’héberger nos modèles sur nos machines et, en garantissant que notre code ne quitte jamais notre environnement !",[2179,2360,2361],{},[39,2362,2363],{},"2️⃣ Void reste ouvert et nous propose des connecteurs aux providers de LLMs et donc une accès à des LLMs puissant !",[2179,2365,2366],{},[39,2367,2368],{},"3️⃣ Void est transparent dans les modifications que font les LLMs à notre code. A nous de valider ou non les suggestions !",[39,2370,2371],{},"Mais… les avantages vont au-delà de la simple confidentialité et des économies de coûts. En tant que projet open source, Void invite la communauté à contribuer pour repousser les limites du développement assisté par l’IA.",[39,2373,2374],{},"La transparence du projet offre également de précieuses opportunités d’apprentissage aux développeur·euse·s intéressés par l’interaction entre les outils de développement traditionnels et l’IA.",[39,2376,2377],{},"Que vous soyez soucieux de la confidentialité, que vous cherchiez à réduire vos coûts ou que vous préférez simplement les outils open source, Void offre une alternative performante qui mérite d’être explorée. N’hésitez pas à prendre le meilleur des deux mondes !",[39,2379,2380],{},[662,2381,2382],{},"Merci de votre lecture !",{"title":277,"searchDepth":278,"depth":278,"links":2384},[2385,2386,2387,2388,2389,2390,2391],{"id":1850,"depth":283,"text":1851},{"id":1886,"depth":283,"text":1887},{"id":1931,"depth":283,"text":1932},{"id":2193,"depth":283,"text":2194},{"id":2280,"depth":283,"text":2281},{"id":2304,"depth":283,"text":2305},{"id":2352,"depth":283,"text":2353},"2025-09-03T07:35:06.710Z","Cursor séduit par son interface familière, sa compatibilité avec les extensions existantes, et son intégration poussée avec des modèles comme _GPT-4_ et _Claude_. Mais derrière cette puissance se cach",{},"\u002Fblogs\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void",[2397,2399,2401],{"id":10,"name":11,"image":2398,"linkedin":13,"x":14},"https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002Ff8f82a79-9d41-4302-b1a5-37882985167f\u002Fnicoz_hoppr.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB466ZDLKRYVF%2F20250903%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20250903T073506Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjENb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJGMEQCIG%2BvaXFMQt%2B6Qj8eNPF9N%2BSUaZ0cNFSYx2baFXn%2FbKW6AiB%2B3P5tZFm9jlWPtGCaF4DLnQM3zhKIq%2B9K1uaRu86vnir%2FAwg%2FEAAaDDYzNzQyMzE4MzgwNSIMw5bxg3sltrFNkUxOKtwDSPFYwesUC22hxfy2kHqgnD3lNSSuItCcUQ4D2B97GRE65RzXTWyuJEjU9lXyw0faxArG2NbcoPniX4bE8fwbuMcKV4tugd2BfRB8YnKKm%2FdUSbAmAlXx9Js5nifbWH0mz5L0OK7EhmXYZw%2FO48DOtzIKGei4YFCghhW4%2FYYa9FzQKdjbeM8oEOFaR9h9uK1hEOe7zAvN%2FvzaTyA0gjNR3FwW%2BtmvaYQDQlWqXvdHMXHs8FfJjEYO4SY6BjnDkF9lWlGpnv6BKvaEIyJQai1mARLgQ%2B5gjM5LEnq%2BkSAddwGYXtXp%2FI237%2BmWMbUboqNZeYyFf3UJSJkrW%2Fyqo%2FC6fhqb1k9sS1ytKASXiWgBNPoUN6eZHXi5l0qFJAyXRwpYTJiuidc%2BgVtrOmkSMVm6Eg77ieUq8H6T6Qt6UsVPLWMTRfieE9a4ax0keUk9PFR%2BonQ0Nb%2BfSNlsLrBv6cIo68a42GyZ3jpn4JbMBN4%2Ff%2BnRHg%2FiU%2BWy7NzoTy1QvlZ22%2BfUo0nApRTcnCg%2F647J5OqkDlkoZn6NsrJ0lXgIBxNgRfaQOG4L6q5WSzU%2BbGO2ci89EJqkS32Msug9IjzrK%2F5obEXxrs1NbR5y3KQFLNsUlIVr%2F5%2F%2BvY%2BfjB0w6bjfxQY6pgH4Qs%2Bft%2Fnfe0Fphwrc%2B6PKxo0pBzJsnGHLgN2ghniYkK8tKxZ6GAVtKXnpvqtr5UKhOS%2Ft%2FeS93kZrRV9V5kAZ3xCEq9G9ewA%2FbzgtFtQ6xVAsn6n57V2U8e7e5sXbHtyd780KexydA2%2F%2FelidNyBI5bCZSV8JdqkinYKVwRyw9q2rwEsKmYVBj6E1Rc%2FNLuxtncPdjAWOM2ydYlly118Bry3aufLW&X-Amz-Signature=4e04cd8aee99b1e1f1045840307945dc87a3a9be1036625ac33254fc598ef394&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",{"id":301,"name":302,"image":2400,"linkedin":304,"x":14},"https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002Fc88f5dfa-16db-4e6f-acf1-34dd80ee8766\u002Femma_hoppr.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB4663B3BM6TB%2F20250903%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20250903T073506Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjENb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJHMEUCIG9fB1ykwU%2FbGIaGsJvhCPPFqNNxLym7wZJL2IBrrfByAiEA2dAwm9ubQtgkLGO%2FFfFNhn3sWE%2FTFr8sHTc0Xkpklfoq%2FwMIPxAAGgw2Mzc0MjMxODM4MDUiDCRssieECgWoB2hW9CrcA7GhvJZ2CKT8EoZg3VZPvy670nbucj7%2F6cMOgZD1XxfmYMplYVipz5WRjLwwevWAwXoE1mKhz6zd0oQyeIDP9CuHGXUsrvr6Q2sCuhXhT3RTnE13AO5rhH1dpXfz3kEI87JZy07LvKVUvO%2B6B2xhJq1sy%2B9XvEzffS7L5mUFFIpWs0%2FtJkj01hFq4qgDsPwJ3cdlR7CQpo5bIYAn%2BMwPWsSOoDciHA5ZwqixPZV0u9YvA1NeBGBHP3KHzDoiNWxuBuCpcxeCYFGrWe5O7VSEBOSbSl4vXuxlC6wyJhf%2FmlPnqigdg%2FvfrgZRTy0xE3dV99Z8H9EubyucSlmkVctU58qO4UolWQzTL4I0X5lE%2Bkkfl32%2F2pek7dZyI9N7sCkyxxBfEpXteOoZuGvDrEg3XaDOv%2FZmkcbpfuOwqUSelFSg8Gn8OTalUUWn17GtN1LjCaXoPgsbnrdDZR8B1XUkGbGWDm%2F0zxZEsUWPMocXnICc15HXYSmCj6p49STA4VhMnTDeuGLDYCp7id%2B0JUld6IhNwwVy%2FotUYzJ2OEt0DvmYwFfO3G4HVGV8qHMezrZl%2BDlPjTEiqyhGJNY0o8VJNgPQIEm0ty1O0L5UFBPtS1KXbCaYTUk8j258SoVQMPS438UGOqUBvKpEkUYaVgCRzjUR%2FZldhU5j3j7K%2FQaMUl6dyQEBTObMLMRndG69O6%2BmXG64%2Fr70Bfna5zX7dlSYIi%2FuoiJgFC2U7E%2BhMXIx%2Fj1G7uCZcCFxj%2FSQHZcSuTb06IrCq%2BR%2Bnk%2FNbUPVdqR27Iy5jWH1kwsToggvfdZZpu4uEANo2eIywrfnbeS9DFtIRvQ0QU1wX16503etcJfbx%2FkK5XctZJf6NccA&X-Amz-Signature=f38eb48ec7cf12e65f4309d7f2f18155ec4d49c9d0bf1c92e7b5e766e531cb1e&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",{"id":295,"name":296,"image":2402,"linkedin":298,"x":299},"https:\u002F\u002Fprod-files-secure.s3.us-west-2.amazonaws.com\u002F5863e833-64f2-4f13-9f7a-2c92c72b5bbf\u002Fc69d0b59-558d-4e48-879f-bea3fec1fdef\u002FLinkedin_Profile.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=ASIAZI2LB4667JYBD3L7%2F20250903%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20250903T073505Z&X-Amz-Expires=3600&X-Amz-Security-Token=IQoJb3JpZ2luX2VjENb%2F%2F%2F%2F%2F%2F%2F%2F%2F%2FwEaCXVzLXdlc3QtMiJIMEYCIQDNcPq3tjGuMjsX2jiE05qzyBCZlZJd7vSyfz8pUACQIwIhALHMUKQBWe8Q50wZnCaM2SaWqzMy%2BNu6ui6T6FcbYUBXKv8DCD8QABoMNjM3NDIzMTgzODA1Igylzx0C5ER%2BTcsz62wq3ANW0VQXJ9phcHpCMqjXYADIQj83r%2BaNpCT7Avsl5pIFfcsm5sv2sIydUsNgPFEEjCO8sy4LVpeLZeZAIg6d8KZRDoSzoqXKjPIAmUTu5R6EKTr0lY0pNz9460KriIQEujLc75DMkbNskJsaCF%2F6w3x9siUXkK%2BMGKI6ctlRgN%2FGAmwE%2F326tODQ4dI%2Fnaiux%2BUqOvUbEqvoEUAQA65KDci%2FHPBYrrMl4Ux%2B8qGyPYwhpEPF5YVagJKyfVtbA0i47Res9FAF0IroZeKLwW%2FT%2Fj9nUOuA%2BdwkcXd9tgqIp97wVz7F%2FIZIssQqnGD%2BHRWCo8TLO0fPyHM3a9S1GxD2FaabMkyDQL2dx%2BKdd7tV5%2BqzmHf3GvnZG8mF89kIgAuXvyIkL6pnGPZ2c6yN4cLEpSEmjKJs7Eb2%2Bl9u2VCj06nkkwzioo88MiaMQY7uNLGZpZbzHBSezjp4A5XwZIenzSnmD7kFwmcN5jJ9WwyZkk8aiaL%2BLw0ZFI2Mn4V4kZjNHtshKyW%2B6SDW4dJ3m6e8Smzb0yfKsry2%2BIS2dQALSMF7IlcV2HBWQ3U6sTWshkQrk00%2FAkKoUQ9PHdKZw57AgSBIZKiAz5AWM23NJxP5TWLnhS%2FR4LIodJck3z4qUDCNud%2FFBjqkAb%2FKIeBwUN7B%2BizO9jiaQpFlaSZ5MsnstclqDJSmIUeBl8Blmoo47GyO%2FtAO1CdGW%2FigELwrrFw61xd6fJY3Nz4dSXi5YOnx%2BFhkOae0ulyDAgfBkSb%2BYocPzjqDI%2FFluWCHiB74bRqoTWIbj6n82U8uwSdMAV8JJ5vLDR%2B%2FcdZSj8pTeFbpMIcPn0Gyib7rryVu9ZVJeK%2B3HJnfWPSWggXfhLtU&X-Amz-Signature=8f393726be490557a096afcb84d2658e4eecb9f480bcbd1334ee2d4c7aa71a78&X-Amz-SignedHeaders=host&x-amz-checksum-mode=ENABLED&x-id=GetObject",{"title":1829,"description":2393},"blogs\u002F2025-09-03-un-ide-avec-agent-ia-une-alternative-open-source-cursor-tout-ce-quil-faut-savoir-pour-bien-dmarrer-avec-void\u002Findex",[311,2406,2407,2408,2409],"documentation","void","ide","ia","frQb8VE5CHPJOuPBRJom_jl3c4INqvqFSgW5OAoFUvg",1775715141503]