Vorlon.js, le debugger à distance et multiplateforme de Microsoft est passé en Open Source il y a quelques mois et a fait pas mal parler de lui depuis. Vorlon propose une véritable alternative aux remote debuggers habituels comme les Chrome DevTools ou Weinre. Pourtant, il est encore assez peu connu mais la communauté grandit vite et le nombre de plugins croit rapidement.
InfoQ FR a rencontré Etienne Margraff, l'un des créateurs de Vorlon.js, pour qu'il nous en dise un peu plus sur cette bibliothèque qui propose de nombreuses fonctionnalités de debug à distance et cross-plateformes.
InfoQ FR : Vorlon.js a été mis en Open Source il y a quelques mois maintenant, mais qu'est ce que Vorlon.js ?
Etienne : L’idée de Vorlon.js nous est venue avec Pierre Lagarde, David Catuhe et David Rousset, tous les 4 étant développeurs web et n'en pouvant plus du debug sur mobile. Quand on debug un site web sur un mobile, on doit utiliser des outils propriétaires pour Chrome, pour Safari, et pour IE, c’est vraiment peu pratique. Au début, on a pensé à faire quelque chose pour nous, mais on a rapidement décidé d’en faire profiter tout le monde. C’est pour ça qu’on l’a sorti en Open-Source dès le départ, en mars 2015 ! En quelques mots : Vorlon.js, ça permet de reproduire l’expérience de debug que l’on a avec les outils de développement (aka « F12 ») à distance et de manière cross-plateformes. C’est modulaire via un système de plugins. Et d’ailleurs, de nombreux dev ont déjà créé leurs plugins.
InfoQ FR : Pourquoi avoir créé Vorlon et quels sont les cas d'utilisation ?
Etienne : Comme je vous le disais, l’objectif est de simplifier le debug de sites web sur mobiles. Imaginez avoir sur votre bureau 4 ou 5 périphériques. Un iPhone, un iPad, une Surface Pro, un Android et un Windows 10 mobile. Vous affichez votre site en cours de développement sur chacun de ces périphériques. Dès que vous détectez un problème sur un des périphériques, vous allez dans le tableau de bord de Vorlon et vous démarrez le debugage avec le Dom Explorer, la console, ou des plugins spécialisés comme l’inspecteur AngularJS.
InfoQ FR : Peut-on debuguer depuis n'importe quels navigateurs, aussi bien desktop que mobile ?
Etienne : Notre objectif est de fournir un outil cross-plateformes et qui respecte les standards. Tant que votre navigateur (mobile ou non) respecte les standards et est « moderne » (i.e. supporte des fonctionnalités comme les websockets), cela fonctionne. Donc, que ce soit mobile ou desktop, Vorlon fonctionne parfaitement.
InfoQ FR : Quel est votre positionnement par rapport aux concurrents comme weinre ou les devtools de chrome, et quelles sont vos différences/atouts ?
Etienne : Excellente question ! Quand on cherchait une solution, on a évidemment regardé ces différentes possibilités. Les outils dédiés de Chrome ou Safari fonctionnent très bien mais nécessitent une connexion USB. Comment faire quand on a pas de Mac pour debuguer sur iPhone ? Comment faire pour debuguer un site à distance alors qu’il est exécuté chez un client ? C’est très complexe, voire impossible. Weinre nous a beaucoup plu, mais l’interface n’est pas très agréable et surtout, on doit utiliser Chrome pour le dashboard et l’extensibilité n’est pas au top. Nous, on aime le cross-plateformes. C’est pour ça que Vorlon est extensible via le système de plugins, assez simple à maîtriser et que le dashboard fonctionne aussi bien sur Chrome que sur Firefox ou Safari, ou Microsoft Edge.
InfoQ FR : Comment vous intégrez-vous dans les environnements de développements web classiques comme npm, grunt ou gulp ?
Etienne : Pour utiliser Vorlon.js, vous avez besoin de deux choses : installer le serveur qui tourne sur node.js et insérer un script dans la page que vous debuguez. Pour installer le serveur, vous pouvez l’installer à partir de npm et l’exécuter en tapant la commande vorlon. Vous pouvez aussi clôner le repository GitHub pour récupérer la dernière version en cours de dev. On a même un bouton dans le repository pour déployer dans le cloud (Microsoft Azure ici) automatiquement !
La seule modification à réaliser dans votre client est d’ajouter un script JavaScript généré par ce serveur. Pour l’instant, ce n’est pas automatisé car on préfère laisser le soin au développeur de faire ça. Ce qu’on a fait par contre, c’est créer un proxy http qui injecte automatiquement le script dans toutes les pages dynamiquement. Pour l’utiliser, il faut aller sur la page http://VOTREIP:VOTREPORT/httpproxy.
InfoQ FR : Avec l'ouverture en Open Source de Vorlon, vous avez également affiché la volonté du développement de plugins pour la plateforme. A quoi ceux-ci servent-ils ?
Etienne : Dans le dashboard, quand on clique sur un client pour le debuguer, on a accès à une liste d’onglets qui affichent des informations venant du client ou qui permettent de modifier quelque chose sur ce client. Chacun de ces onglets est un plugin. Un plugin est constitué de deux parties, une cliente qui collecte les données et une serveur qui affiche les données dans le dashboard. Ce que nous fournissons côté Vorlon, c’est un cadre pour créer facilement ces plugins. Toute la partie communication gérée par Socket.IO est abstraite par notre API. Tout ce que vous avez à faire, c’est packager les données côté client et les envoyer vers le dashboard via nos helpers.
InfoQ FR : Avez-vous prévu à cet effet un repository centralisé ou une forme d'annuaire pour faciliter la recherche et le partage de plugins (comme npm registry) ?
Etienne : Pour l’instant, tous les plugins CORE sont déployés avec Vorlon.js. On a également un répertoire dans GitHub qui est nommé « plugins library » qui contient les plugins non CORE, ceux qui ne seront utiles que pour quelques développeurs. Nous avons pensé à créer un annuaire, mais pour l’instant, le nombre de plugins que nous avons ne justifie pas un système aussi complexe. On est très pragmatique cependant, et dès que le besoin se fera ressentir, nous réfléchirons à la solution la plus simple.
InfoQ FR : Quelle est la roadmap pour le projet et les mois à venir ?
Etienne : Nous venons de sortir la version 0.1 qui contient beaucoup de nouveautés, dont le plugin « Best Practices » qui permet de découvrir les améliorations qu’on peut faire dans son code et le proxy http dont je parlais précédemment. Dans les mois qui viennent, nous travaillerons à l’implémentation de nouveaux plugins et également à étendre l’usage de Vorlon.js à du code qui tourne côté server (pensez node.js et IOT ;-)).
InfoQ FR : Comment vous positionnez-vous par rapport à ES6, amd et les langages transpilés ou compilés comme TypeScript, Dart, ... Quelle compatibilité peut-on espérer ?
Etienne : Nous sommes compatibles avec ES6 car il n’y a pas de lien de notre côté. Nous fonctionnons en live lors de l’exécution du code et donc sur le code JavaScript qui provient de la compilation de langage comme TypeScript et Dart. On est donc compatibles à 100% ! Petite parenthèse d’ailleurs : on développe Vorlon.js en node.js… mais en TypeScript et dans Visual Studio Code (éditeur de code léger, cross-plateformes pour du web front et backend basé sur Atom de GitHub).
InfoQ FR : Quelles est la compatibilité minimum de Vorlon en termes de navigateur / OS / mobile ? (IE, Chrome, Firefox, Opera, Safari...) ?
Etienne : Globalement, n’importe quel navigateur web et OS tant qu’il est « moderne » et supporte Socket.IO notamment.
InfoQ FR : Comment peut-on participer ou contribuer au projet Vorlon ?
Etienne : Vous pouvez trouver tout ce qu’il faut sur le site vorlonjs.io et notamment l’adresse du projet GitHub. Il suffit de forker le projet et nous faire une pull request, on répond en général dans la journée. Les contributions les plus classiques sont autour des plugins, mais vous pouvez mettre à jour autre chose si vous voulez. Pour bien démarrer à la création d’un plugin, vous pouvez lire cet article (en anglais).
InfoQ FR : Est-il possible d'injecter vorlon.js après le chargement de la page, depuis une console JavaScript, par exemple pour debuguer une application de production ? Comment gérer le code minifié par exemple ?
Etienne : C’est tout à fait possible. On peut référencer Vorlon sans le démarrer en le précisant dans le nom du script Vorlon comme précisé ici : http://www.vorlonjs.io/documentation/#vorlonjs-client-advanced-topics. Ensuite, il suffit de démarrer le côté client en appelant une ligne de code très simple comme précisé dans la même documentation. Pour le code minifié de votre côté, pas de magie, il faudra référencer votre version max si vous voulez debuguer dans de meilleures conditions.
InfoQ FR : Merci beaucoup Etienne pour ces réponses.
A propos de l'Interviewé
Etienne Margraff est Evangéliste développeur chez Microsoft France. Il fait du développement dans l'univers des technologies Microsoft depuis plusieurs années. Geek passionné par la techno, Etienne joue entre autre avec HTML5, Javascript, CSS, Visual Studio, Cordova et la mobilité en général. Il touche un peu à la 3D avec une contribution modeste sur BabylonJS. Il est co-créateur de l’outil open-source Vorlon.js, un outil cross-plateforme pour débugger le web. Il est speaker dans de nombreux événements tels que les TechDays, DroidCon, meetups, Kiwi Party, etc. Vous pouvez le retrouver sur son blog et sur twitter.