Boostez vos revues de code avec Skizzle

Jérôme Boukorras
Just-Tech-IT
Published in
5 min readJul 15, 2020

Chez AXA, nous sommes organisés en feature team, chaque équipe ayant plusieurs projets. En tant que développeurs et développeuses, un problème s’est rapidement présenté à nous : la difficulté à faire relire nos pull requests. Si l’on suit les bonnes pratiques de développement, les pull requests doivent être validées par plusieurs personnes (généralement deux). Et dans des petites équipes, on en arrive rapidement à envoyer un lien vers la pull request à un•e collègue et demandant “Tu peux valider ma pull request ?” et ça, c’est une très mauvaise pratique.

Nous avons tenté de résoudre ce problème en créant Skizzle.

Skizzle liste les pull requests de vos équipes.

Skizzle est une application desktop (Windows / macOS) qui permet de regrouper toutes les pull requests des projets que vous voulez suivre depuis votre compte Azure Devops. Il suffit de s’abonner à un repository et vous êtes notifié•e dès qu’une nouvelle pull request est publiée. Skizzle est open-source et peut vous aider peu importe votre rôle (développeur, développeuse, tech leader, manager etc.).

Comment ça marche ?

Pour créer la partie desktop, nous avons utilisé Electron qui permet de créer de véritables applications desktop à partir d’une application web. Nous avons fait le choix de créer une application desktop et non une application web pour plusieurs raisons : la première c’est de pouvoir utiliser des fonctionnalités native d’un OS, principalement les notifications. La deuxième raison est la simplicité : on installe l’application et elle fait son travail en arrière-plan peu importe l’état de mon navigateur.

Pour la partie UI, nous avons fait le choix d’utiliser Svelte. Une première version de l’application avait été écrite avec Angular, mais nous avons vite décidé de réécrire le tout avec Svelte pour gagner en performance et en maintenabilité.

L’apport de Svelte

Récupérer les commentaires d’une pull request de manière asynchrone avec Svelte. Propre.

Nous avons choisi Svelte à la base pour gagner en simplicité. En effet, de grosses fonctionnalités arrivaient et le code écrit avec Angular devenait indigeste. La réécriture de l’application nous a permis d’entreprendre le développement de ces fonctionnalités plus sereinement.

Nous avons également gagné en performance de manière assez spectaculaire. L’application est plus légère et plus réactive. À titre de comparaison, le composant gérant l’affichage des projets contenait 126 lignes de code avec Angular. Sa version Svelte en contient seulement 45. Le poids de l’application (hors electron) a également été grandement réduit passant d’environ 2 MB à moins de 100 KB.

Skizzle étant open-source, avoir un code plus léger et abordable est un gros avantage. Cela permet à une développeuse ou un développeur de rejoindre le projet et d’amener de la valeur très rapidement, facilement et en toute autonomie, la documentation de Svelte étant très claire et très complète.

L’apport d’Electron

Envoyer une notification avec Electron ? Facile.

Nous avons choisi Electron pour bénéficier des fonctionnalités natives des systèmes d’exploitation. Nous voulions créer une application qui s’installe une fois, tourne en arrière plan et envoie des notifications. Electron remplit très bien son rôle tant il a été simple de mettre en place le fonctionnement voulu. Nous sommes passé d’Angular à Svelte en ne reconfigurant presque rien côté Electron. L’API disponible est complète et la documentation très claire. Seul bémol : Electron embarque son propre moteur de rendu (Chromium), ce qui implique que l’application générée est un peu lourde et parfois gourmande en ressources.

L’expérience utilisateur

Skizzle a été pensé pour avoir la meilleure expérience possible en tant qu’utilisateur ou utilisatrice. Pour cela nous avons créé notre propre UI à partir de rien. Pas d’utilisation UI Kit, ce qui nous permet d’ajuster à volonté notre interface en fonction des retours d’utilisation ou des nouvelles fonctionnalités ajoutées.

Dans la première version de Skizzle, il fallait s’identifier à l’aide de son identifiant Azure DevOps puis d’un token généré par Azure. Cette manière de faire était facile à mettre en place techniquement pour nous mais contraignante à l’utilisation, nous l’avons remplacé par l’OAuth qui rend l’identification beaucoup plus simple.

Un des inconvénients des applications desktop est la gestion des mises à jour. À chaque démarrage, Skizzle va vérifier la dernière release disponible sur Github. S’il y en a une plus récente que la votre disponible, Skizzle se met automatiquement à jour. Plus besoin de se soucier de savoir si vous avez la dernière version.

De manière générale, nous écoutons attentivement chaque remarque de nos collègues. Nous avons la chance de les voir utiliser Skizzle quotidiennement et avons donc un retour direct, ce qui facilite l’amélioration continue de l’application.

L’avenir

Concernant les futurs fonctionnalités, ce ne sont pas les idées qui manquent. Nous avons prévu, entre autres, de supporter d’autres plates-forme (Github, Gitlab etc.), d’améliorer le filtrage des pull requests et d’afficher un peu plus d’infos sur chaque PR comme les commentaires ou l’état des builds et releases. Nous pensons également à ajouter une partie “gamification” pour inciter le plus de monde possible à participer aux pull requests.

Si vous êtes développeur ou développeuse, que vous avez envie de jouer avec Svelte ou Electron et de participer à la création d’un outil qui vous sera utile au quotidien, rejoignez-nous, ou téléchargez Skizzle !

Skizzle, projet initié par Mathieu De Baerdemaeker et Jérôme Boukorras pour la GuilDevOpen AXA.

--

--