• Assurez la sécurité des applications de la bonne manière! Détectez, protégez, surveillez, accélérez et plus encore…
  • Quelle est la prochaine meilleure chose à coder? L'éditeur de code, bien sûr!

    Les éditeurs de code sont la deuxième raison la plus importante de la guerre des flammes des programmeurs (la première étant le formatage du code).

    Pour certains, Vim est le seul éditeur sensé jamais créé, tandis que pour d'autres, tout ce qui ne correspond pas au monde en spirale en spirale d'Emacs n'est que ridicule. Si vous cherchez vraiment à attirer l'attention, tout ce que vous avez à faire est d'aller dans une communauté de programmation et de démarrer un fil de discussion comme «Pourquoi je pense que X (choisissez n'importe quel éditeur de code populaire) est nul / est le meilleur», prenez une bière et détendez-vous.

    Les arguments, les contre-arguments et les insultes continueront à affluer dans et hors de la discussion toute la nuit, et il faudra plusieurs mois avant que le venin du fil ne se refroidisse.

    La question est: pourquoi?

    Bien sûr, les êtres humains réussissent à faire un gros problème avec tout, mais je pense que les éditeurs de code sont particuliers quand il s'agit de programmeurs. Un programmeur typique passe presque tout son temps (plus de 98%, si je devais parier) sur l'éditeur de code de son choix. Ils connaissent l'éditeur - ses forces, ses faiblesses, ses limites, ses bizarreries et ses joyaux cachés.

    Rien n'est plus frustrant que d'avoir à lutter avec l'éditeur lorsque vous écrivez du code (pensez à quel point c'est ennuyeux lorsque vous devez envoyer un courrier électronique long et urgent sur un nouveau clavier!). Les éditeurs de code réduisent les frictions mentales et vous permettent d'être plus productif, c'est pourquoi ils sont si importants et attirent autant d'attention.

    Alors, quel est le meilleur éditeur de code?

    Honnêtement, je n'oserai même pas y aller! 😀 😀

    Cependant, si vous êtes dans le développement Web, il y a une alternative à laquelle je veux que vous réfléchissiez - éditeurs de code en ligne! Vous pouvez également les appeler des éditeurs de code basés sur le cloud.

    Ne confondez pas l'éditeur de code avec un environnement de développement intégré (IDE). Les deux sont deux choses différentes et en tant que développeur, vous devez être familier avec ces IDE multilingue.

    En un mot, ce sont des éditeurs qui résident entièrement sur un serveur distant et sont accessibles via le navigateur.

    Cela semble bizarre, non?

    Je l'ai ressenti aussi quand je les ai rencontrés il y a 3-4 ans. Pourquoi diable quelqu'un voudrait-il tout remettre à un navigateur stupide?

    Peut-il même rivaliser avec un éditeur de code installé nativement?

    En fait, dans la plupart des cas, et en particulier pour le développement Web, la réponse est oui. Maintenant, même si je n'ai pas adopté les éditeurs en ligne comme support principal, je me retrouve à les utiliser de plus en plus dans des scénarios spécifiques.

    Avant de nous plonger dans les éditeurs de code à utiliser, faisons une pause et réfléchissons au moment où les éditeurs de code en ligne peuvent avoir un sens.

    Configuration zéro

    Je ne sais pas pour vous, mais configurer mon éditeur préféré à mon goût sur un nouveau système n'est pas quelque chose que j'attends avec impatience. Plugins, thèmes, polices, raccourcis, extraits, paramètres. . . Il y a une liste interminable de choses qui doivent être équilibrées avant que tout ne devienne utilisable. Il est facile d'oublier quelque chose, pour être ennuyé plus tard lorsque votre flux de travail est interrompu.

    En revanche, il n'y a rien à voir avec un éditeur en ligne une fois la première configuration terminée. Constructions officielles, mises à jour, versions nocturnes, plates-formes prises en charge, architecture système, synchronisation FTP, Pipelines CI / CD - rien de tout cela n'a d'importance tant que vous avez un navigateur!

    Collaboration

    Plus souvent qu'autrement, vous devez collaborer avec d'autres développeurs pour résoudre des problèmes ou déboguer quelque chose.

    L'éditeur de code traditionnel n'est pas conçu pour cela - il n'y a pas de place pour l'édition, les commentaires ou la mise en évidence simultanés du code, et il est difficile d'en ajouter une prise en charge.

    La sécurité des données

    Désormais, il est acquis qu'aucun projet aujourd'hui n'est sans contrôle de version, ce qui signifie qu'une copie du code existe sur le référentiel à tout moment. Cela dit, il y a des moments où le contrôle de version ne suffit pas:

    • Vous oubliez de pousser les commits nouvellement créés et votre ordinateur portable prend feu.
    • Vous avez d'autres fichiers et vidages de données importants avec lesquels votre code interagit, bien qu'ils ne fassent pas partie de l'application en direct. Que leur arrive-t-il si votre ordinateur portable prend feu?

    (D'accord, on dirait que je suis obsédé par les cahiers qui prennent feu, mais vous comprenez, non ?!)

    Faire respecter la discipline

    Cela pourrait tout aussi bien être contesté devant le tribunal des droits des développeurs (si une telle chose existe), mais la vérité est que les développeurs sacrifient rarement leurs caprices pour le bien commun.

    Par exemple, un passionné inconditionnel de Sublime Text embrassera pleinement l'un des excellents éditeurs de JetBrains et trouvera toutes les occasions de souligner sa nature gourmande en mémoire et ses performances plus lentes.

    Il en va de même pour les onglets contre les espaces (ou même les onglets à deux espaces contre les onglets à quatre espaces) - vous êtes naïf si vous pensez que les programmeurs de votre équipe ne verrouillent pas les cornes.

    Dans de tels cas, un éditeur en ligne est une aubaine - vous décidez des paramètres des projets (même comment le code doit être formaté), et il refusera simplement d'accepter le travail jusqu'à ce qu'il adhère à toutes les normes. Dure sur l'individu, peut-être, mais super pour le projet!

    À l'heure actuelle, je n'ai plus de cas d'utilisation, alors voyons quelle option nous avons en matière d'éditeurs de code en ligne, en particulier pour le développement Web.

    JSFmilieu

    Tandis que JSFmilieu ne peut pas remplacer un éditeur de texte à part entière, il fait un sacré bon travail de gestion de scripts frontaux uniques.

    Il est si populaire que les sites de questions-réponses comme StackOverflow prennent déjà en charge l'intégration de liens JSFiddle directement dans leur plate-forme.

    Pour que les choses démarrent rapidement, JSFiddle propose des passe-partout au départ; ce qui signifie que si vous voulez obtenir une démo de, disons, React, démarré, tout ce que vous avez à faire est de cliquer sur le bouton approprié et de commencer à écrire le code. Une fois que vous appuyez sur Enregistrer, le «violon» est enregistré, vous obtenez une URL permanente (Découvrez ce violon stupide que j'ai créé: https://jsfiddle.net/tuqd76c4/ et notez que vous pouvez apporter vos modifications et appuyez sur Enregistrer pour créer un nouveau version de cette URL).

    Voici ce qui fait de JSFiddle une plate-forme viable pour le développement Web frontal:

    • Utilisation gratuite (pas de frais cachés ni de fonctionnalités freemium). JSFiddle se prend en charge grâce à des publicités (au moins au moment de la rédaction), et vous pouvez voir une publicité Adobe en bas à gauche de la capture d'écran ci-dessus.
    • Fonctionnalités de collaboration de code - idéales pour construire des concepts ensemble, des entretiens, etc.
    • Plusieurs mises en page, tailles de police, thèmes clairs / sombres, etc.
    • Mise en forme du code (rangement), prise en charge prochaine des linters (CSS et JS), etc.

    Et maintenant, sanglotez, sanglotez, pour les mauvaises choses:

    • JSFiddle est un éditeur purement frontal. Il n'y a aucun moyen de coder et d'exécuter votre langage backend préféré.
    • Il n'y a pas de concept de fichiers et de dossiers ici (ou de téléchargements, d'ailleurs). Tout ce que vous avez, c'est un espace unique pour le code, quelle que soit la quantité.
    • JSFiddle ne peut pas être utilisé pour héberger du code sur votre serveur. Le code doit être sur JSFiddle et est public tout le temps.
    • Il n'y a aucun moyen de créer un pipeline CI / CD, d'utiliser Git, etc.

    Cela dit, JSFiddle a son sweet spot et brille lorsque vous avez besoin de fournir des preuves de concept et de collaborer à la vitesse de la lumière. C'est et restera une identité majeure parmi les éditeurs en ligne.

    CodeSandbox

    CodeSandbox peut être considéré comme une version beaucoup plus puissante et complète de JSFiddle. Fidèle à son nom, CodeSandbox offre une expérience complète d'éditeur de code et un environnement sandbox pour le développement front-end.

    CodeSandbox est une véritable centrale électrique et un produit sucré et sucré. Je manquerais de papier si j'essayais d'énumérer tous ses avantages, mais voici quelques fonctionnalités qui tue:

    • Support Npm: Oui, vous pouvez ajouter à peu près n'importe quel package disponible sur npm.
    • Fichiers, dossiers, modules: Vous pouvez diviser votre code en plusieurs fichiers, ajouter / supprimer des images du dossier public et créer / importer des modules comme bon vous semble. Le flux de travail reflète celui d'un bundler de modules moderne, vous n'avez donc pas besoin de configurer (presque) quoi que ce soit.
    • Prise en charge de TypeScript, rechargement à chaud, exportation GitHub, hébergement de fichiers statiques, etc.
    • Il est construit sur Editeur Monaco, la même bête qui alimente le favori VSCode éditeur. Cela apporte des fonctionnalités puissantes telles que «Aller à», «Rechercher des références» et la refactorisation nécessaire à portée de main!
    • Prise en charge d'extraits de code pour Emmet
    • DevTools intégrés, linting, superpositions d'erreur, frameworks de test (Jest), raccourcis clavier, etc.
    • CLI puissant pour importer directement des projets locaux dans CodeSandbox.

    Bien que la version gratuite de CodeSandbox ne prenne pas en charge le code privé, vous pouvez obtenir cette fonctionnalité (et augmenter les limites de taille dans l'ensemble) en les aidant à Patreon pour aussi peu que 5 $ par mois (payez ce que vous voulez, jusqu'à 50 $ par mois).

    CodeAnywhere

    Un problème avec la plupart des éditeurs de code de cette liste (du moins jusqu'à présent) est qu'ils s'attendent à ce que vous gardiez le code sur leurs serveurs à tout moment, ou vous obligent à synchroniser régulièrement le code via la ligne de commande.

    Pas si avec CodeAnywhere.

    À son apogée, CodeAnywhere a deux fonctionnalités qui se démarquent pour moi:

    • Images de conteneur prédéfinies pour plus de 72 langages et frameworks de programmation. Cela signifie que vous pouvez provisionner un nouvel environnement de développement directement depuis l'éditeur! Bien sûr, le code est automatiquement hébergé sur le conteneur nouvellement créé et les fichiers sont servis directement à partir de là.
    • Connectez-vous à n'importe quoi. Oui, littéralement n'importe quoi. Vous n'êtes pas obligé de stocker votre code sur les serveurs de CodeAnywhere. Que votre code réside sur FTP, sur des plates-formes de partage de fichiers telles que Dropbox, Amazon S3 ou sur des plates-formes de contrôle de version sophistiquées telles que GitHub, vous pouvez facilement configurer CodeAnywhere pour lire et écrire sur cette source, en utilisant l'éditeur de code uniquement pour. . . Eh bien, l'édition de code. 😛

    Une dernière chose que j'ai envie de souligner: si vous n'êtes pas à l'aise avec Git en ce qui concerne la visualisation de l'histoire et des différences, CodeAnywhere pourrait vous sentir comme un soupir de soulagement. L'éditeur utilise son système de différences pour comparer les fichiers, ce qui vous permet de comparer deux fichiers sur deux révisions quelconques (une révision est créée à chaque fois que vous enregistrez un fichier).

    Il y a cependant un léger problème avec les révisions: la version gratuite vous permet de ne conserver qu'une seule révision, tandis que le plus petit plan payant autorise au maximum 20 révisions. De manière générale, ce n'est pas un problème car vous voulez rarement regarder au-delà de la dernière 20e révision, mais comme la plupart des programmeurs ont l'habitude de cliquer sur Save plusieurs fois par minute, cela peut devenir douloureux.

    Au final, CodeAnywhere est une offre solide et agréable pour ceux qui souhaitent passer au cloud et y rester. 🙂 Étant donné que ses pouvoirs vont au-delà du code frontal, à mon avis, il est fortement recommandé!

    StackBlitz

    Si vous êtes principalement dans le front-end et que vous ne pouvez pas vous éloigner de l'interface VSCode, StackBlitz a été créé juste pour vous.

    Vous ne voyez rien de spécial?

    Je n'ai pas fait trop jusqu'à ce que je fasse défiler un peu vers le bas et clique sur le bouton Angular. Boom!

    Devinez quoi, ce n'est pas délibérément créé pour ressembler à VSCode - il est construit sur l'éditeur VSCode! À tel point que vous pouvez installer des extensions, rechercher dans les dossiers et organiser les fichiers comme vous l'attendiez d'une instance VSCode normale.

    Mais attendez, il y a plus!

    Vous avez peut-être remarqué ou non que:

    • Toutes les applications créées sur StackBlitz sont également déployées automatiquement sur leurs serveurs! Ainsi, cette application de jouet angulaire que je viens de créer est hébergée automatiquement sur https://angular-yvyi2j.stackblitz.io/. Très probablement, l'URL fonctionne toujours (se chargera lentement, cependant, comme vous vous en doutez lorsqu'elle est hébergée gratuitement)!
    • Vous pouvez bifurquer et partager le projet. Tout en partageant, vous contrôlez plus précisément ce que les autres peuvent faire.
    • Vous pouvez vous connecter à un référentiel GitHub et également laisser le code être directement extrait / poussé à partir de là. Ou vous pouvez simplement télécharger le projet sous forme de fichier zip de la bonne manière.

    Mais attendez, il y a plus!

    Sérieusement! 😀

    Voici la liste des fonctionnalités officielles offertes par StackBlitz:

    • Prise en charge native de Firebase (ce que je n'utilise pas personnellement, mais bon, c'est une aubaine pour ceux qui ne veulent pas plonger dans les profondeurs troubles du backend)
    • Intellisense, recherche de projets
    • Rechargement à chaud à mesure que vous tapez
    • Importer des packages npm
    • Modifiez hors ligne lorsque vous n'êtes pas connecté!

    StackBlitz est plein de (belles) surprises lorsqu'il s'agit d'éliminer les obstacles du développement et du déploiement Web. Intégrer VSCode dans votre site Web n'est plus un rêve!

    AWS Cloud9

    Cloud9 était sans doute le premier IDE basé sur un navigateur qui offrait des fonctionnalités sérieuses et reprenait l'idée du navigateur comme éditeur grand public. Pas étonnant qu'Amazon l'ait acquis plus tard, et aujourd'hui, Cloud9 fait partie des offres AWS.

    Si vous êtes même attaché à distance (ou intéressé par) la plate-forme AWS, Cloud9 est l'endroit où votre recherche d'un éditeur parfait (d'accord, presque parfait) se termine.

    Voyons 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 / nouvelle, et vous ne payez que pour cette instance. Il est également possible de se connecter à un serveur tiers via SSH - sans aucun frais! 🙂
    • Prise en charge de premier ordre des applications AWS Serverless (débogage, etc.)
    • Accès direct au terminal à AWS depuis l'éditeur (honnêtement, un éditeur décent, le terminal à onglets est ce qui me manque encore dans VSCode)
    • Plus de 40 langages de programmation pris en charge (Go, C ++, Ruby, Node, Python, PHP, Java ... faites votre choix)

    Les fonctionnalités de collaboration dans Cloud9 sont également souhaitables, permettant de mener des révisions / entretiens de manière transparente.

    Une autre fonctionnalité qui tue est une lecture de style vidéo des modifications apportées à un fichier, ce qui rend le processus de révision un plaisir:

    Mon conseil?

    Si vous aimez AWS, n'attendez pas et prenez Cloud9 tout de suite. Et si vous n'êtes pas encore sur le cloud mais que vous envisagez de faire un pas, adoptez AWS et intégrez Cloud9 dans votre flux de travail. Vous ne pouvez pas prendre une meilleure décision de toute façon!

    CodeEnvy

    CodeEnvy est un éditeur cloud puissant qui utilise des conteneurs Docker pour vous permettre d'exécuter des environnements de développement préconfigurés et isolés. Il est basé sur l'IDE cloud open-source Eclipse Che et offre une tonne d'évolutivité et DevOps options.

    Au moment d'écrire ces lignes, CodeEnvy a été acquis par RedHat (qui, de manière amusante, a lui-même été acquis par IBM!).

    Gitpod

    Gitpod est une version rafraîchissante des éditeurs de code cloud (ou des IDE, si vous voulez) qui vise à garder votre code toujours testé et à jour. En d'autres termes, 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% d'intégrité.

    Vaut le détour si vous aimez l'expérience VSCode et que vous voulez quelque chose qui prend en charge tous les principaux langages et frameworks back-end / front-end (Django, Rails, Revel, vous l'appelez).

    Theia

    Si vous êtes un fan inconditionnel de SOLID et un architecte logiciel de pointe, le Theia IDE chatouillera votre os de séparation des soucis. C'est un IDE de code codé TypeScript (cinq points pour le style tout de suite!) Qui a un frontal et un backend parfaitement séparés. Le front-end s'exécute dans un navigateur, tandis que le backend peut être n'importe où - machine locale ou cloud!

    Mais ce n'est pas tout - le frontal peut être exécuté comme une application Electron avec un environnement de navigateur isolé entièrement fonctionnel, vous donnant l'apparence d'une application de bureau native si vous en avez envie.

    Coder

    Bien que leur site Web ne le dise pas clairement, Coder est un environnement VSCode intégré dans un serveur qui peut être exécuté localement ou dans le cloud. La configuration recommandée consiste à exécuter l'EDI en tant que serveur dans le cloud et à y accéder localement via le navigateur. Il existe des images Docker prédéfinies pour des configurations sans tracas, et un plan d'entreprise si vous avez besoin d'assistance ou avez des besoins différents.

    Conclusion

    Cela couvre plus ou moins tous les IDE et éditeurs de code au moment de l'écriture. J'ai omis deux types d'offres dans cette liste: celles qui se concentrent uniquement sur interviews et n'ont pas d'environnements à part entière (sauf notre classique bien-aimé JSFiddle, bien sûr), et ceux qui ne semblaient pas offrir quelque chose de substantiel et n'avaient guère plus qu'une page d'accueil élégante.

    Si vous avez besoin de quelque chose de léger pour le développement Web, vous pouvez explorer ces éditeurs de code.