Comment coder en ligne ?

Comment coder en ligne ?

Beaucoup de développeurs utilisent des IDE (Integrated Development Environment) pour développer sur leur machine. Plusieurs d’entre eux sont gratuits et open-source. C’est le cas par exemple de Visual Studio Code, Android Studio ou Pycharm. D’autres proposent des versions payantes dédiées à des usages en entreprise. C’est le cas notamment de Visual Studio, la suite JetBrain ou Komodo. 

Libre à chacun selon son écosystème de développement, d’opter pour l’une de ces solutions. Cependant, peu importe le choix, il faut passer au préalable, par une phase d’installation de son environnement. 

Il existe néanmoins des alternatives proposant de débuter le développement informatique sans se préoccuper de mettre en place un environnement dédié sur son ordinateur. Ceci grâce aux IDE en ligne aussi appelé par un acronyme moins connu, les ODE (Online Development Environment). 

Vous en avez sûrement déjà vu lors de vos recherches sur les forums de développement. Plusieurs d’entre eux sont très connus de la communauté. Il est toujours agréable de retrouver un lien vers stackblitz ou codepen,  lors de recherche sur les forums pour déboguer son code. Les ODE sont des alliés de poids dans de nombreuses phases du processus de développement.

Pourquoi devrais-je développer en ligne ? 

Il y a plusieurs raisons amenant à développer en ligne. Comme pour beaucoup d’outils, l’efficacité et la pertinence de cette solution par rapport à un développement sur machine, vont fortement dépendre de votre contexte ainsi que de la situation dans laquelle vous vous trouvez.

À titre personnel, j’utilise ces outils quand il s’agit de présenter un court projet, faire un test de conception ou lorsque je ne suis pas en mesure de développer sur machine. C’est en général dans des situations particulières et généralement succinctes que ces outils sont utilisés. Moins souvent utilisés lors d’un processus de développement complet, ils sont pourtant utiles et facilitent le développement dans de nombreux cas.

Coder en ligne, c’est plus facile pour les débutants.

Le premier avantage qu’apportent les ODE, est de considérablement faciliter l’accessibilité d’un projet au début du développement. En effet, développer en ligne va vous donner l’opportunité de vous affranchir d’un environnement de développement sur ordinateur. Vous serez capable de poursuivre vos travaux sur plusieurs machines, sans vous préoccuper ni du système d’exploitation, ni des configurations et dépendances du projet. Configurations qui, soit dit en passant, devraient être installées à chaque changement de machine. Si vous vous trouvez dans une situation amenant à devoir utiliser différentes machines, c’est un gain de temps non-négligeable.

Petit plus un peu gadget, la possibilité de développer sur écran tablette et mobile lors de déplacement. À noter tout de même que cela requiert une gymnastique particulière pour coder sans clavier.

Cet affranchissement des machines sur lesquelles vous développez présente le second intérêt des IDE en ligne, n’avoir aucune configuration ni aucune installation à réaliser. Dans le cadre d’une vieille technique ou de l’apprentissage d’une nouvelle technologie, pouvoir coder gratuitement en ligne est un atout pour ne pas polluer vos environnements avec des installations, dont l’intérêt pour vos projets n’est pas encore sûr. Vous pouvez suivre des tutoriels et des formations tout en utilisant des outils pour coder en ligne gratuitement.

Par ailleurs, décentraliser l’installation d’un environnement peut avoir un avantage si vous ne possédez pas une machine avec de bonnes performances pour le développement. Que ce soit temporaire ou par manque de moyens, ces solutions permettent de démocratiser la programmation pour tous. Petite anecdote, si vous partez en vacances avec le PC familial et que vous avez une envie irrésistible de tester un bout de code, vous remercierez les ODE de vous permettre de développer en ligne.

Développer en ligne facilite la collaboration et les échanges.

Lorsque l’on développe, dans de nombreux cas, nous faisons appel à la communauté pour nous aider à régler une incompréhension, un bug ou une difficulté particulière. C’est là que peut rentrer en jeu les outils pour développer en ligne.

Que vous développiez en ligne l’entièreté d’un projet ou que vous soyez sur un environnement sur machine, les ODE vont vous permettre de poster sur les forums, des questions illustrées avec votre code à disposition des internautes. De plus, afin de vous répondre, les autres développeurs pourront contribuer à l’aide de l’ODE, et présenter leur solution. Pour la compréhension et le partage de connaissance avec la communauté, les ODE apportent un vrai plus.

Dans la même optique, si vous collaborez ponctuellement avec un autre développeur et que celui-ci n’a pas ou ne souhaite pas configurer sa machine pour une petite contribution. Il est possible d’utiliser les outils en ligne afin de faciliter l’échange spontané.

Coder en ligne permet de conserver et de sécuriser ses travaux.

La plupart des solutions pour coder gratuitement en ligne proposent des espaces de stockage cloud pour publier votre projet. Par ailleurs, plusieurs solutions offrent la possibilité  d’automatiser les sauvegardes de vos espaces de travail et de sécuriser l’ensemble en cas de perte de copie. Ainsi, sauf cas extrêmes, vos projets sont conservés en lieu sûr avec possibilité de restauration via les sauvegardes en ligne.

Certaines solutions proposent aussi la synchronisation de leur outil avec vos dépôt git distant afin de faciliter le développement de vos branches et la collaboration au sein de la phase de développement. 

Les situations où développer en ligne n’est pas recommandé.

Malgré les différents avantages des IDE en ligne, il y a plusieurs raisons de passer à des environnements sur machine.

La plus évidente, par obligation suite à un contrat avec une entreprise. En effet, en règle générale, les entreprises possèdent des environnements dédiés et ne sont pas enclins à la publication de code sur des environnements en ligne. Ceci, pour des raisons évidentes de confidentialité et de sécurité. Dans cette situation, vous n’aurez donc pas la possibilité de recourir à des ODE, sauf si le choix d’une version dédiée pour entreprise a été fait au sein de la structure. Si cela n’est pas le cas, rassurez-vous, cela ne vous empêchera pas de travailler à distance. Il sera toujours possible de recourir à une copie de travail sur votre machine ou via un accès à distance avec un VPN selon les usages de l’entreprise.

Une autre situation qui laisse envisager que les ODE ne sont pas la bonne solution à suivre, c’est la dépendance à une connexion internet un minimum stable. Sans cela, vous pouvez laisser tomber l’idée d’un environnement de développement optimal avec les IDE en ligne. Néanmoins, pour certaines des solutions en ligne, cette problématique a été résolue,  nous rentrerons plus dans les détails plus tard. 

Enfin, si vous possédez déjà une machine dédiée à la programmation avec des performances correctes, il sera probablement plus avantageux en termes de rapidité et de performance, de réaliser la compilation de votre code en local. Mais dans ce cas, il reste tout de même intéressant de conserver un IDE en ligne pour des situations annexes.

Une liste de 6 IDE pour coder gratuitement en ligne.

Finalement, comme tout outil digne de ce nom, les ODE ont leurs avantages et leurs inconvénients. Cependant, à titre personnel, il me semble utile d’avoir en tête une ou deux références, afin d’en user dans les situations adéquates. Je vous propose ici quelques-unes des centaines de solutions en ligne qui apportent toutes des fonctionnalités intéressantes. 

StackBlitz – Le choix de la flexibilité.

Un grand nom dans le secteur des ODE, StackBlitz se positionne comme premier choix tout simplement, car il est une référence bien installée chez les développeurs. Cette réputation, il la doit premièrement par la grande variété d’environnements qu’il prend en charge. À titre indicatif, en voici une liste non-exhaustive:

Du côté des frameworks Front-end:

  • React
  • Angular
  • Vue
  • HTML/CSS/JS 

Du côté des Frameworks Back-end:

  • NestJs
  • Express
  • GraphQl
  • JsonServer

Une particularité qui a mis StackBlitz sur le devant de la scène, c’est le fait d’avoir centralisé le calcul n’ont pas sur un serveur distant, mais sur votre navigateur web. Ceci va avoir des impacts notables sur la rapidité de l’IDE, ainsi que sur son accessibilité. En effet, cette pratique permet notamment, l’usage de StackBlitz sans accès internet. Cette spécificité technique est fort appréciable si vous optez pour un ODE afin de programmer pendant vos déplacements.

Pour les développeurs avec une machine aux ressources limitées, si vous travaillez sur un projet back-end, vous aurez la possibilité de tester le lancement du serveur au sein du navigateur.

Attention, la solution gratuite propose la synchronisation avec vos dépôts github publics uniquement. Si toutefois, vous voulez un espace de stockage dédié ou simplement synchroniser vos dépôts privés, il faudra souscrire à la version payante.

Codepen – L’ergonomie avant tout.

Codepen est la solution ODE orientée front-end qui a déjà séduit beaucoup d’utilisateurs. La première impression à l’ouverture de l’ODE, c’est l’ergonomie qu’apporte l’interface de développement. Un avantage que Codepen met beaucoup en avant. Vous retrouvez avec cet ODE, la possibilité d’incorporer des Pen (projets), sur n’importe quel site et présenter vos résultats. Un outil bien utile lorsqu’il s’agit de présenter des POC (proof of concept). Avec ces deux points majeurs, CodePen propose un service dont l’usage lors d’une formation ou d’un apprentissage de l’informatique est fort appréciable.

La version gratuite offre la possibilité de créer une infinité de projets publics. L’espace de stockage est quant à lui inclus dans une offre payante.

Replit – Pour le développement à plusieurs.

Une offre assez solide dans l’écosystème des ODE, Replit propose une version gratuite de sa solution très avantageuse. Vous n’êtes pas limité en termes de projets, un espace de stockage de 500 Mo vous est attribué, la collaboration en live est fourni, de quoi passer de bonnes séances de code. Si vous souhaitez coder gratuitement, à plusieurs et sans frais, c’est une solution à envisager.

Notez cependant que la version gratuite limite l’usage du CPU du serveur distant. De plus, les dépôts privés ne seront disponibles que pour les utilisateurs premium.

JsFiddle – Pourquoi faire compliquer quand on peut faire simple ?

L’IDE en ligne JsFiddle propose une interface épurée et intuitive pour débuter des projets statiques (HTML/CSS/Js). En se basant sur le concept less is more, cet IDE reste simpliste et propose tout le nécessaire pour des démos, rapporter des bogues et publier du code sur le web. C’est la solution à envisager en tout début d’apprentissage du développement web.

Comme pour beaucoup d’autres IDE en ligne, vous pouvez coder gratuitement, mais l’accès au stockage privé est payant. Petit point à mentionner, l’interface peut être déstabilisante par sa sobriété et certaines fonctionnalités peuvent être difficiles d’accès.  

Gitpod – Automatiser et faciliter la gestion de projet.

Si vous utilisez déjà github pour vos répertoires distant, Gitpod est l’un des ODE les plus à même de répondre à vos besoins. À l’instar d’un serveur CI, Gitpod vous propose la compilation de vos branches directement sur l’IDE en ligne. L’environnement se configure automatiquement en fonction du contexte git que vous lui fournissez. Vous pouvez ensuite coder en ligne sans restriction, sur vos projets en cours ou en créer de nouveaux. Concernant les répertoires, Gitpod propose la synchronisation au répertoire public mais aussi privé. 

À noter qu’il existe une extension de navigateur permettant d’ajouter un bouton vers GitPod à partir de Github, Gitlab ou Bitbucket.

Avec la version gratuite, vous serez limités en termes d’heure de travail (50h/mois). C’est une pratique de limitation étonnante, mais qui laisse l’opportunité de tester l’intégralité de la solution avant souscription. Par ailleurs, la version gratuite limite à 4 projets en simultanés.

codeTasty – Pour ceux qui veulent personnaliser leur environnement.

Une dernière alternative intéressante est celle que propose codeTasty avec un ODE classique permettant une collaboration en binôme même dans sa version gratuite ainsi que l’usage d’extensions pour personnaliser son IDE. Cette deuxième fonctionnalité est loin d’être anecdotique puisque la personnalisation des IDE est souvent limitée voir inexistante dans les autres offres en ligne. 

La version gratuite propose la collaboration à deux sur uniquement deux environnements, une limitation qui fait passer la version gratuite pour un peu moins avantageuse que la concurrence.

Conclusion

Voici une liste subjective, mais se voulant large quant aux différentes solutions que met à disposition l’écosystème des IDE en ligne. Il existe plusieurs solutions pour coder en ligne gratuit ou payant selon votre besoin. Coder en ligne est une pratique encore peu mis en avant dans des processus de développement complet, mais c’est une solution non dénuée d’intérêt dans de nombreux cas. 

Les outils présentés ici, sont ceux qui ont su pérenniser leur solution et proposer les environnements les plus exhaustifs. Cependant, de nombreux autres éditeurs de code en ligne existent, souvent plus légers en termes de fonctionnalité et qui pourront susciter un intérêt dans des cas précis. 

Libre à vous de choisir l’offre la plus adéquate à votre pratique de développeur.

Photo Maxime Macé

Maxime Macé

Simple passionné de thématiques diverses et variées. J’apprécie enrichir mes connaissances dans les disciplines techniques comme l’informatique, les sciences et l’ingénierie, mais aussi dans les domaines merveilleux de la philosophie, l’art et la littérature.

Prenons contact

Vous souhaitez me contacter suite à la lecture de cet article ? Merci de renseigner votre adresse électronique et je vous recontacterai dans les plus brefs délais.

CV Ingénieur développeur informatique

CV Étudiant PhD Artificial Intelligence

Portfolio Artist designer