Annonce enthousiasmante au sujet de skott : l’application web embarquée automatiquement vient d’atteindre sa v2, après plusieurs mois de développement et après que la communauté a ouvert de nombreuses issues pour réclamer des améliorations !
Si vous n’avez jamais entendu parler de skott, voici le premier article de blog présentant l’outil. L’API n’y est plus vraiment à jour et bien d’autres fonctionnalités ont été ajoutées depuis, mais l’introduction reste valable !
skott est un outil de développement tout-en-un pour analyser, rechercher et visualiser automatiquement les dépendances de vos projets JavaScript et TypeScript.
Installation et démarrage rapide
npm install skott -g
skott --displayMode=webappVoici un aperçu rapide de ce que vous pouvez accomplir avec la nouvelle version de l’application web :
La visualisation de graphes est difficile, et parvenir à extraire des informations utiles de graphes comportant des centaines, voire des milliers de nœuds et d’arêtes n’est pas une mince affaire.
Dans cette v2 de l’application web, l’accent a été mis sur l’amélioration de l’expérience de manipulation des informations générées par skott.
Configuration du graphe
Probablement la section la plus demandée ! L’un des plus gros défauts de la v1 de l’application web était son incapacité à afficher les graphes en fonction de leur taille, de leur forme et des préférences de l’utilisateur. La visualisation de graphes est complexe car, selon la taille et la forme des liens entre tous les nœuds, certains layouts et paramètres conviennent mieux que d’autres. Comme il est difficile de déterminer automatiquement la meilleure configuration pour le projet de chacun, j’ai fait le choix d’offrir une certaine personnalisation du rendu des graphes ; voyons cela :
- Layout cluster
Le layout cluster construit le graphe à partir des connexions entre les nœuds. Particulièrement utile lorsqu’on a un graphe comportant beaucoup de nœuds interconnectés, y compris des dépendances circulaires.
Trois algorithmes d’espacement des nœuds sont actuellement disponibles : « Barnes Hut », « Repulsion », « Force Atlas 2 ». Ils sont tous fournis par vis-js, la bibliothèque que skott utilise pour dessiner les graphes.
- Layout hiérarchique
Le layout hiérarchique dispose les nœuds de manière hiérarchique. Il aide à visualiser des structures de graphe qui utilisent naturellement une forme d’architecture hiérarchique, c’est-à-dire sans dépendances circulaires entre les nœuds parents et enfants.
Notez que, selon la taille du graphe, certains layouts, algorithmes ou options seront plus performants et plus adaptés. Par exemple, l’option « Improve Spacing » améliore l’espacement des nœuds et le rendu du layout, mais prend jusqu’à 100x plus de temps pour afficher le graphe.
Dans la plupart des cas, ce que vous voulez, c’est réduire le jeu de données en amont pour éviter d’afficher d’énormes graphes, qui seront à la fois une opération coûteuse et plus difficiles à visualiser correctement.
Explorateur de fichiers
La section File Explorer fournit un explorateur à la VSCode pour parcourir fichiers et répertoires. L’objectif est d’avoir un moyen simple de naviguer dans le graphe en recréant l’arborescence de fichiers telle qu’elle apparaîtrait dans un IDE. Elle propose également des moyens de filtrer les dossiers (que ce soit via un pattern glob ou via les actions de commande disponibles sur chaque dossier) et de se focaliser sur des fichiers.
Dépendances
Section qui permet d’enrichir le graphe affiché en mettant en évidence les dépendances circulaires, tierces ou natives.
À ce jour, cette section ne fait que porter les fonctionnalités existantes initialement introduites dans la v1 de l’application web.
Cette section est plutôt minimaliste pour l’instant, mais elle a beaucoup de potentiel, comme l’affichage des dépendances inutilisées (les dépendances npm inutilisées sont déjà collectées par skott lui-même).
Résumé
La section Summary vise à fournir des statistiques globales sur le projet lui-même : nombre de fichiers parcourus, nombre de dépendances circulaires, listes exhaustives des dépendances tierces (npm) et natives (Node.js) utilisées tout au long du projet, etc.
Et ce n’est qu’un début !
Beaucoup d’informations collectées par skott ne sont pas encore affichées dans l’application web, mais ce n’est qu’une question de temps.
Explorateur de cycles
Je pense que ce sera une section extrêmement utile pour lutter contre les dépendances circulaires. Actuellement, skott se contente de mettre en évidence les nœuds impliqués dans des dépendances circulaires. Or, cette mise en évidence ne suffit pas et peut être trompeuse lorsqu’on veut avoir une vision claire et granulaire de chaque cycle indépendant.
La forme de cette section n’est pas encore figée, alors n’hésitez pas à proposer des fonctionnalités si vous avez des idées qui pourraient vous être utiles !
Bac à sable interactif
skott fournit une Graph API qui peut aider à recréer des sous-graphes n’impliquant que des nœuds directs ou profonds et leurs parents/enfants.
Cela offrirait la possibilité de se concentrer sur des modules spécifiques et de recréer le sous-graphe dans lequel ces modules sont impliqués, réduisant le bruit global que peut introduire le dessin du graphe entier.