L’Éditeur de Code : Plus qu’un Simple Outil
Que faire après avoir fini de coder ? La réponse est évidente : se replonger dans son éditeur de code !
Les éditeurs de code sont souvent source de débats passionnés chez les développeurs, juste après les discussions sur le formatage du code.
Certains ne jurent que par Vim, le considérant comme le seul éditeur digne de ce nom. D’autres sont inconditionnels d’Emacs, et voient tout autre outil comme une aberration. Pour provoquer un véritable débat, rien de plus simple : lancez une discussion du type « Pourquoi X (choisir un éditeur populaire) est nul/génial » sur un forum de programmation, et préparez-vous à regarder le spectacle.
Les arguments, les contre-arguments et les invectives fuseront pendant des heures, et il faudra des semaines pour que les esprits se calment.
Mais pourquoi un tel attachement ?
Bien sûr, l’être humain a cette tendance à s’enflammer facilement, mais les éditeurs de code occupent une place particulière dans le cœur des développeurs. Un programmeur passe l’essentiel de son temps (plus de 98 %, selon mon estimation) sur l’éditeur qu’il a choisi. Il le connaît par cœur, avec ses forces, ses faiblesses, ses limites, ses particularités et ses secrets.
Rien de plus frustrant que de devoir se battre avec son éditeur pendant l’écriture du code (imaginez la gêne que vous ressentez quand vous devez rédiger un long email urgent avec un clavier qui vous est étranger). Les éditeurs de code fluidifient le travail, améliorent la productivité, et c’est pour cette raison qu’ils sont si importants et qu’ils suscitent tant de discussions.
Alors, quel est le meilleur éditeur de code ?
Honnêtement, je ne me risquerais pas à donner une réponse ! 😀 😀
Toutefois, pour le développement Web, il existe une alternative intéressante que je souhaite explorer avec vous : les éditeurs de code en ligne, également appelés éditeurs de code basés sur le cloud.
Il est important de ne pas confondre un éditeur de code et un environnement de développement intégré (IDE). Ce sont deux outils distincts, et en tant que développeur, vous devriez être familiarisé avec les IDE polyvalents.
Pour faire simple, les éditeurs de code en ligne sont des outils qui résident sur un serveur distant et sont accessibles via un navigateur web.
Cela peut paraître étrange, n’est-ce pas ?
C’est aussi ce que j’ai pensé lorsque je les ai découverts il y a quelques années. Pourquoi voudrait-on confier son code à un simple navigateur ?
Un éditeur en ligne peut-il vraiment rivaliser avec un éditeur de code installé sur sa propre machine ?
La réponse est oui, dans la plupart des cas, et particulièrement pour le développement Web. Même si je n’utilise pas un éditeur en ligne comme outil principal, je me rends compte que j’y ai de plus en plus souvent recours dans des situations spécifiques.
Avant de nous plonger dans les différents éditeurs de code en ligne, prenons le temps de réfléchir aux avantages qu’ils peuvent offrir.
Configuration Zéro
Je ne sais pas pour vous, mais l’idée de devoir configurer mon éditeur préféré sur une nouvelle machine ne m’enchante guère. Plugins, thèmes, polices, raccourcis, extraits de code, paramètres… La liste des choses à régler est longue avant que tout soit fonctionnel. Et il est facile d’oublier un détail, ce qui peut perturber votre travail.
En revanche, un éditeur en ligne ne demande aucune installation après la première configuration. Versions, mises à jour, versions bêta, systèmes d’exploitation, architecture, synchronisation FTP, CI/CD… Tout cela devient anecdotique tant que vous avez un navigateur !
Collaboration Facilitée
Il est fréquent de devoir collaborer avec d’autres développeurs pour résoudre des problèmes ou déboguer du code.
Les éditeurs de code traditionnels ne sont pas conçus pour cela, il n’est pas possible d’éditer, de commenter ou de surligner le code simultanément, et il est difficile d’ajouter une telle fonctionnalité.
Sécurité des Données
Aujourd’hui, aucun projet n’échappe au contrôle de version, ce qui signifie qu’une copie de votre code existe sur le dépôt. Cependant, il y a des cas où cela ne suffit pas :
- Vous oubliez de soumettre vos modifications et votre ordinateur portable prend feu.
- Vous avez des fichiers importants et des dumps de données utilisés par votre code mais qui ne font pas partie de l’application. Qu’advient-il de ces fichiers si votre ordinateur portable part en fumée ?
(Bon, on dirait que j’ai une obsession pour les ordinateurs portables qui brûlent, mais vous voyez l’idée, non ?)
Discipline Imposée
Cela pourrait être remis en cause devant un tribunal des droits des développeurs (si un tel tribunal existait), mais il est vrai que les développeurs ont parfois du mal à faire des compromis pour le bien du projet.
Par exemple, un inconditionnel de Sublime Text critiquera systématiquement un éditeur de JetBrains, en soulignant sa gourmandise en mémoire et ses performances plus lentes.
Même chose pour les tabulations contre les espaces (ou encore les tabulations à deux espaces contre les tabulations à quatre espaces). Si vous pensez que les programmeurs de votre équipe ne vont pas se disputer sur ce genre de détail, vous êtes naïf.
Dans ce genre de situation, un éditeur en ligne est une bénédiction. Vous définissez les paramètres du projet, y compris le format du code, et l’éditeur refuse d’accepter les modifications tant qu’elles ne respectent pas ces règles. C’est peut-être frustrant pour certains, mais c’est bénéfique pour le projet !
Je n’ai plus d’arguments à faire valoir, alors passons en revue les différentes options d’éditeurs de code en ligne, en particulier pour le développement Web.
JSFiddle
Bien que JSFiddle ne puisse pas remplacer un éditeur de texte complet, il excelle dans la gestion de scripts frontaux uniques.
Il est si populaire que des sites de questions-réponses comme StackOverflow intègrent les liens JSFiddle directement sur leur plateforme.
Pour faciliter le démarrage, JSFiddle propose des modèles. Si vous souhaitez créer une démo avec React, il vous suffit de cliquer sur le bouton correspondant et de commencer à coder. Une fois que vous avez cliqué sur « Enregistrer », le « fiddle » est sauvegardé et vous obtenez une URL permanente (voici un fiddle que j’ai créé : https://jsfiddle.net/tuqd76c4/. Vous pouvez le modifier et cliquer sur enregistrer pour créer une nouvelle version de cette URL).
Voici les points forts de JSFiddle pour le développement Web frontal :
- Gratuit (pas de frais cachés ni de fonctionnalités freemium). JSFiddle affiche ses propres publicités (au moins au moment où j’écris ces lignes) – on peut voir une pub Adobe en bas à gauche de la capture d’écran.
- Fonctionnalités de collaboration pour le code – idéales pour élaborer des concepts, réaliser des entretiens, etc.
- Nombreuses options de mise en page, tailles de police, thèmes clairs/sombres, etc.
- Formatage automatique du code, support à venir des linters (CSS et JS), et plus encore.
Et maintenant, place aux points négatifs :
- JSFiddle est un éditeur purement frontal. Il n’est pas possible de coder et d’exécuter votre langage backend favori.
- Il n’y a pas de concept de fichiers ni de dossiers (ni de téléchargements d’ailleurs). Il n’y a qu’un seul espace pour tout le code, quelle que soit sa taille.
- JSFiddle ne peut pas être utilisé pour héberger du code sur votre serveur. Le code doit être sur JSFiddle et est public en permanence.
- Il n’y a pas de possibilité de créer un pipeline CI/CD, d’utiliser Git, etc.
Ceci dit, JSFiddle excelle quand il s’agit de présenter des concepts et de collaborer à la vitesse de l’éclair. Il reste un acteur majeur parmi les éditeurs en ligne.
CodeSandbox
CodeSandbox est une version beaucoup plus puissante et complète de JSFiddle. Comme son nom l’indique, CodeSandbox offre une expérience d’éditeur de code complète et un environnement sandbox pour le développement frontal.
CodeSandbox est un outil puissant et facile à utiliser. Il faudrait des pages entières pour lister tous ses avantages, mais voici quelques fonctionnalités qui valent le détour :
- Prise en charge de Npm : Vous pouvez ajouter n’importe quel package disponible sur npm.
- Fichiers, dossiers, modules : Vous pouvez diviser votre code en plusieurs fichiers, ajouter/supprimer des images dans le dossier public et créer/importer des modules. Le workflow correspond à celui d’un bundler de modules moderne, il n’y a donc pas de configuration à faire.
- Prise en charge de TypeScript, rechargement à chaud, exportation GitHub, hébergement de fichiers statiques, etc.
- Il est basé sur l’éditeur Monaco, le même outil utilisé par le célèbre éditeur VSCode. Vous disposez donc de fonctionnalités avancées telles que « Aller à », « Rechercher les références » et les outils de refactorisation.
- Prise en charge des extraits de code pour Emmet
- Outils de développement intégrés, linters, superpositions d’erreurs, frameworks de test (Jest), raccourcis clavier, etc.
- Interface en ligne de commande puissante pour importer directement des projets locaux dans CodeSandbox.
La version gratuite de CodeSandbox ne permet pas d’avoir du code privé, mais vous pouvez bénéficier de cette fonctionnalité (et augmenter les limites globales) en les soutenant sur Patreon pour 5 $ par mois (vous pouvez payer jusqu’à 50$ par mois).
CodeAnywhere
Avec la plupart des éditeurs de code de cette liste, vous devez stocker votre code sur leurs serveurs ou le synchroniser régulièrement par ligne de commande.
Ce n’est pas le cas avec CodeAnywhere.
Pour moi, les deux principales forces de CodeAnywhere sont :
- Images de conteneurs prédéfinies pour plus de 72 langages et frameworks de programmation. Vous pouvez ainsi provisionner un nouvel environnement de développement directement depuis l’éditeur ! Le code est automatiquement hébergé sur le conteneur créé et les fichiers sont servis directement à partir de là.
- Connexion à n’importe quelle source de code. Vous n’êtes pas obligé de stocker votre code sur les serveurs de CodeAnywhere. Que votre code se trouve sur FTP, sur des plateformes de partage de fichiers comme Dropbox, Amazon S3, ou sur des plateformes de contrôle de version comme GitHub, vous pouvez facilement configurer CodeAnywhere pour lire et écrire sur cette source. L’éditeur de code ne sert qu’à… l’édition de code. 😛
Une dernière chose que je souhaite souligner : si vous n’êtes pas à l’aise avec Git pour visualiser l’historique et les différences, CodeAnywhere peut être un soulagement. L’éditeur utilise son propre système diff pour comparer les fichiers, ce qui vous permet de comparer deux fichiers entre deux révisions (une révision est créée chaque fois que vous enregistrez un fichier).
Cependant, les révisions ont une petite limite : la version gratuite ne permet de conserver qu’une seule révision, tandis que le plus petit abonnement payant donne accès à 20 révisions maximum. En général, ce n’est pas un problème car on a rarement besoin de remonter au-delà de la 20ème révision. Mais comme les programmeurs ont l’habitude d’appuyer sur enregistrer plusieurs fois par minute, cela peut devenir gênant.
En conclusion, CodeAnywhere est une option solide et agréable pour ceux qui souhaitent migrer vers le cloud. Ses possibilités vont au-delà du simple code frontal, et à mon avis, il est fortement recommandé !
StackBlitz
Si vous êtes principalement développeur front-end et que vous ne pouvez pas vous passer de l’interface de VSCode, StackBlitz a été créé pour vous.
Vous ne voyez rien de spécial ?
Je n’avais rien remarqué jusqu’à ce que je fasse défiler la page et que je clique sur le bouton Angular. Boom !
Ce n’est pas fait exprès pour ressembler à VSCode, c’est qu’il est construit avec l’éditeur VSCode ! Vous pouvez même installer des extensions, rechercher dans les dossiers et organiser vos fichiers comme vous le feriez dans une instance standard de VSCode.
Mais attendez, ce n’est pas tout !
Vous avez peut-être remarqué ou non que :
- Toutes les applications créées sur StackBlitz sont automatiquement déployées sur leurs serveurs ! L’application Angular que je viens de créer est hébergée ici : https://angular-yvyi2j.stackblitz.io/. L’URL fonctionne peut-être toujours (le chargement est lent, comme on peut s’y attendre avec un hébergement gratuit) !
- Vous pouvez cloner le projet et le partager. Lors du partage, vous avez un contrôle précis sur les actions possibles pour les autres utilisateurs.
- Vous pouvez vous connecter à un dépôt GitHub et faire en sorte que le code soit extrait/soumis depuis cet endroit. Ou vous pouvez télécharger le projet en fichier zip.
Mais attendez, ce n’est pas tout !
Sérieusement ! 😀
Voici la liste officielle des fonctionnalités offertes par StackBlitz :
- Prise en charge native de Firebase (que je n’utilise pas personnellement, mais c’est pratique pour ceux qui n’ont pas envie de se plonger dans les méandres du backend)
- Intellisense, recherche dans le projet
- Rechargement à chaud pendant que vous tapez
- Importer des packages npm
- Modifications hors ligne quand vous n’êtes pas connecté !
StackBlitz regorge de (bonnes) surprises lorsqu’il s’agit de faciliter le développement et le déploiement Web. Intégrer VSCode à votre site Web n’est plus un rêve !
AWS Cloud9
Cloud 9 fut sans doute le premier IDE basé sur un navigateur qui offrait de sérieuses fonctionnalités et rendait l’idée du navigateur en tant qu’éditeur grand public crédible. Pas étonnant qu’Amazon l’ait racheté et qu’aujourd’hui Cloud9 fasse partie de l’offre AWS.
Si vous utilisez déjà la plateforme AWS ou que vous êtes intéressé par cette plateforme, Cloud9 est peut-être l’éditeur parfait qu’il vous faut (bon, presque parfait).
Voici pourquoi :
- Il n’y a pas de frais supplémentaires pour l’utilisation de Cloud9. Vous pouvez connecter Cloud9 à une instance de calcul AWS (existante ou nouvelle) et vous ne payez que pour cette instance. Il est également possible de se connecter à un serveur tiers via SSH, sans frais supplémentaires ! 🙂
- Prise en charge de premier ordre pour les applications AWS Serverless (débogage, etc.)
- Accès direct au terminal d’AWS depuis l’éditeur (un éditeur correct avec terminal à onglets, c’est ce qui me manque encore dans VSCode)
- Prise en charge de plus de 40 langages de programmation (Go, C++, Ruby, Node, Python, PHP, Java… faites votre choix)
Les fonctionnalités de collaboration de Cloud9 sont également intéressantes, permettant de réaliser des revues de code et des entretiens sans difficulté.
Autre fonctionnalité intéressante : un enregistrement de type vidéo des modifications apportées à un fichier, ce qui rend le processus de révision plus agréable :
Mon conseil ?
Si vous utilisez AWS, n’hésitez pas et choisissez Cloud9. Et si vous n’êtes pas encore dans le cloud mais que vous envisagez d’y aller, adoptez AWS et intégrez Cloud9 à votre workflow. Difficile de faire un meilleur choix !
Gitpod
Gitpod est une approche novatrice des éditeurs de code cloud (ou IDE, si vous préférez) qui vise à faire en sorte que votre code soit toujours testé et à jour. Il est profondément intégré à GitHub, et chaque fois que vous ajoutez du code, il exécute vos tests et vos pipelines CI/CD pour s’assurer que le code est toujours à 100 %.
Si vous aimez l’expérience VSCode et que vous voulez un outil qui prend en charge tous les principaux langages et frameworks back-end et front-end (Django, Rails, Revel, etc.), cela vaut la peine de l’essayer.
Theia
Si vous êtes un fan de SOLID et un architecte logiciel rigoureux, l’IDE Theia devrait vous plaire. Il s’agit d’un IDE écrit en TypeScript (cinq points pour le style !) avec un front-end et un back-end complètement séparés. Le front-end s’exécute dans un navigateur et le back-end peut être n’importe où (machine locale ou cloud).
Mais ce n’est pas tout : le front-end peut être exécuté comme une application Electron, avec un environnement de navigateur isolé, ce qui lui donne l’apparence d’une application de bureau si vous le souhaitez.
GitHub Codespaces
GitHub Codespaces fournit des machines virtuelles performantes pour exécuter du code et développer des applications Web. En utilisant Visual Studio Code, vous bénéficiez d’un éditeur et d’un écosystème complet et vous trouverez plus facile de travailler directement dans votre navigateur.
Testez ce dernier environnement de développement pour vos projets, ainsi que les images préconfigurées. Vous bénéficierez d’une faible latence dans de nombreuses régions en adaptant la puissance de vos machines virtuelles, jusqu’à 64 Go de RAM et 32 cœurs. Commencez à coder avec des environnements standardisés, des spécifications matérielles, des paramètres d’éditeur, des extensions et des exigences d’exécution.
Vous pouvez isoler les dépendances entre les projets avec docker-compose et les conteneurs. Vous pouvez également prévisualiser facilement les modifications que vous avez apportées dans le navigateur et partager les ports publics et privés avec vos coéquipiers. Vous pouvez même modifier des détails comme les espaces, les tabulations, le thème clair ou sombre et choisir le style de votre éditeur : Solarized, Monokai, etc.
Les débutants qui veulent essayer peuvent utiliser GitHub Codespaces gratuitement, mais avec des limitations. Si vous travaillez en équipe ou en entreprise, vous pouvez commencer à utiliser GitHub Codespaces pour 40 $ par utilisateur et par an.
JetBrains
Créez rapidement des environnements de développement cloud prêts à l’emploi et automatisés, et commencez à coder avec JetBrains IDE – Space. C’est une solution centralisée pour les projets et les équipes qui gère le cycle de développement complet, du CI/CD et de l’hébergement des dépôts Git à la publication des packages.
Space est une machine virtuelle dédiée avec conteneur Docker. Vous pouvez installer toutes les bibliothèques et outils essentiels nécessaires à votre projet. Simplifiez et accélérez l’intégration en partageant et en reproduisant les espaces de travail de codage quand vous le souhaitez.
Permettez aux nouveaux arrivants de commencer à coder immédiatement sans avoir à configurer une machine locale. Vous obtiendrez un IDE complet et prêt à l’emploi chaque fois que vous aurez besoin de commencer à écrire, déboguer ou exécuter votre code, en quelques secondes. JetBrains fournit une plateforme centralisée pour gérer vos environnements de développement.
Toutes vos actions et les ressources que vous utilisez sont suivies au même endroit. Vous pouvez également intégrer facilement les ressources dans le pipeline de développement. Selon votre projet, vous pouvez choisir le type de machine virtuelle adapté à la taille du projet. Space vous permet d’économiser vos ressources en mettant en veille l’espace de travail de codage et en le réactivant lorsque vous en avez besoin.
Testez cette solution gratuitement et découvrez ses avantages.
CodeTasty
CodeTasty est un IDE cloud extensible, intelligent et moderne, avec de nombreuses fonctionnalités que vous apprécierez. Il vous aide à écrire du code propre et lisible en temps réel, dans votre langue préférée.
Bénéficiez d’une expérience fluide avec la compilation intégrée, la complétion du code et les outils de détection d’erreurs. N’ayez pas à vous soucier de la configuration : lancez-vous directement sur vos projets.
Vous retrouverez les mêmes sensations que si vous travailliez sur votre bureau tout en bénéficiant des avantages du cloud : même performances et même vitesse. CodeTasty est conscient des besoins de chaque développeur et vous permet d’installer autant d’extensions que vous le souhaitez pour augmenter votre productivité. De plus, il prend en charge plus de 40 langues et des centaines de lignes de code dans un seul fichier.
Essayez CodeTasty gratuitement avec un espace de travail sandbox, 2 espaces de travail FTP/SSH, des fonctionnalités de collaboration, un terminal et 2 collaborateurs. Vous pouvez également opter pour un abonnement payant à 4 $/mois et avoir la possibilité de relire votre code avant de le soumettre.
Replit
Apprenez, écrivez et créez du code avec Replit, un IDE gratuit, intégré au navigateur, et collaboratif qui prend en charge plus de 50 langues, sans configuration complexe. Vous pouvez commencer à coder dans votre langue préférée sur n’importe quel appareil, système d’exploitation ou plateforme.
Invitez vos collègues ou amis à modifier le code comme sur Google Docs. Vous pouvez importer votre code depuis GitHub pour exécuter et collaborer avec les dépôts GitHub sans aucune configuration. Que vous préfériez C++, Python, CSS ou HTML, vous pouvez écrire et modifier votre code sur une seule plateforme.
De plus, dès que votre code est prêt, il est mis en ligne immédiatement. Si vous souhaitez échanger sur le code, Replit vous mettra en relation avec plus de trois millions de technologues, créatifs, programmeurs passionnés, etc. Avec la collaboration en temps réel avec vos équipes, vous serez plus productifs. Vous pouvez aussi créer des applications et des bots en utilisant des plugins. Cet outil vous aide aussi à développer vos projets directement dans le navigateur.
Créez votre compte et commencez à coder maintenant.
PaizaCloud
Créez des applications Web directement dans votre navigateur avec l’IDE PaizaCloud. Il fournit un environnement de développement Web pour Node.js, MySQL, Django, Java, PHP, Jupyter Notebook, Laravel, WordPress, etc.
PaizaCloud vous permet d’écrire du code sans avoir à vous soucier de la configuration de l’environnement. Il suffit d’ouvrir votre navigateur pour que votre environnement soit prêt en trois secondes. Que vous utilisiez Mac, iPad, OS ou Windows, vous pouvez utiliser le même environnement sur tous les navigateurs.
De plus, vous pouvez utiliser des shells Linux pour configurer des environnements de développement web de manière plus flexible. Vous pouvez également publier des services pour votre portfolio, comme des services d’hébergement, en optant pour la formule de base.
Exécutez des commandes, gérez des fichiers, modifiez votre code, etc., directement dans le navigateur. PaizaCloud élimine la nécessité d’ajouter des commandes telles que vim ou ssh pour modifier des fichiers ou vous connecter. Vous pouvez facilement faire fonctionner des serveurs comme si vous utilisiez un ordinateur de bureau.
Essayez gratuitement la formule avec 2 cœurs et 2 Go de mémoire, ou profitez d’une durée de serveur illimitée avec la formule à 9,80 $/mois avec 1 Go d’espace disque supplémentaire.
Conclusion
Cette liste contient les principaux IDE et éditeurs de code disponibles au moment de la rédaction de cet article. J’ai omis deux types d’offres : celles qui se concentrent uniquement sur les entretiens et qui n’offrent pas d’environnements complets (à l’exception du classique JSFiddle) et celles qui ne semblaient pas offrir de fonctionnalités substantielles et se limitaient à une simple page d’accueil.
Si vous recherchez un éditeur léger pour le développement Web, explorez les options que je vous ai présentées.