En travaillant sur un projet complexe, que vous soyez un programmeur expérimenté ou un étudiant de première année, vous rencontrerez probablement des problèmes. Lorsque vous divisez votre projet en plusieurs modules, des problèmes surviennent, ce qui rend plus difficile la recherche d'erreurs et la recherche de solutions. Dans d'autres circonstances, le débogage d'instances individuelles peut être difficile car vous n'avez pas découvert la solution appropriée au problème sur lequel vous travaillez.
Cela se produit également sous forme de morceau de code à l'occasion, ce qui peut sembler complexe à l'époque. JavaScript est l'un des langages Web extrêmement simple à apprendre. Lancez simplement votre navigateur de bureau et accédez aux outils de développement (généralement F12), et vous avez terminé ! Vous pouvez ensuite expérimenter JS sans avoir besoin d'installer ou d'exécuter un logiciel compliqué.
Pour commencer, tout ce dont vous avez besoin est un navigateur. C'est merveilleux d'avoir toute cette simplicité dès la sortie de la boîte, mais il y a des occasions où vous avez besoin de plus. Par exemple, supposons que vous souhaitiez tester une nouvelle API Web que vous avez récemment découverte, mais que vous ne souhaitiez pas démarrer un nouveau projet.
Dans cet article, nous comparerons et mettrons en contraste les trois aires de jeux JS les plus populaires, CodePen, CodeSandbox et StackBlitz. Commençons!
CodePen
Les outils de développement Web frontaux évoluent constamment et les éditeurs de texte sont un élément important des dernières technologies qui simplifient la vie d'un développeur. Outre les éditeurs de texte autonomes tels que Atom ou Notepad ++, il y a eu ces dernières années une explosion d'éditeurs basés sur un navigateur qui ne nécessitent pas d'installation de programme et favorisent une plus grande collaboration.
CodePen est une "communauté en ligne pour tester et présenter des extraits de code HTML, CSS et JavaScript créés par l'utilisateur" qui offre des opportunités fantastiques pour apprendre à mieux écrire des pages Web frontales.
CodePen vous offre deux "modes". Le premier et le plus couramment utilisé est le stylo. C'est aussi simple que de cliquer sur un bouton et d'être transporté directement dans l'éditeur. De là, vous pouvez accéder à un panneau de prévisualisation ainsi qu'aux fenêtres d'édition HTML, CSS et JS de base.
Il n'y a pas de "système de fichiers", "IntelliSense" ou quoi que ce soit d'autre - juste une simple coloration syntaxique et des commandes rapides comme prettify. Dans l'onglet Options, vous pouvez choisir parmi une gamme restreinte de préprocesseurs pour les trois langages (tels que TypeScript pour JS) ou ajouter des connexions à des sources externes.
Si vous n'avez besoin que de quelque chose de gratuit, l'un ou l'autre des éditeurs suffira. Je suggérerais CodePen pour tout ce qui ne nécessite pas beaucoup de configuration ou de bibliothèques - simplement HTML, CSS et JS avec des préprocesseurs facultatifs en plus. Si vous souhaitez utiliser le terrain de jeu pour améliorer votre présence sur les réseaux sociaux ou développer un portefeuille personnel, CodePen est une meilleure option.
premium version
Vous avez quelques autres alternatives à sélectionner sur CodePen. Si vous payez annuellement, vous pouvez obtenir l'un des trois plans premium pour 12 $, 19 $ ou 39 $ par mois. Vous pouvez créer un nombre infini de stylos, publications et collections privés sur l'un des trois niveaux.
Vous recevrez également le badge Pro (un coup de pouce social), un accès au mode de collaboration en direct, aucune publicité, et plus encore. Il existe également certaines stratégies spécifiques à l'équipe et d'autres distinctions inter-niveaux. Consultez leur tableau d'affichage officiel pour plus d'informations.
Fonctionnalités clés
En plus de créer du HTML, du CSS et du JavaScript dans CodePen, il y a quelques autres choses qui le distinguent.
- La visualisation en temps réel de votre code est possible. Il ne nécessite pas de compilation.
- Expérimenter permet d'apprendre de nouvelles choses.
- Créez de petits cas de test pour rechercher et résoudre les problèmes.
- Affichez vos merveilleuses œuvres.
- Créez et stockez des stylos pour une utilisation ultérieure.
- Essayez le code d'autres développeurs et voyez-le en action.
Avantages
- Pour commencer, il n'y a aucun coût.
- Ressources d'apprentissage intégrées.
- Collaborez avec d'autres et comparez les projets pour voir où ils peuvent aller à l'avenir.
- L'interface utilisateur est simple à utiliser et directe.
Inconvénients
- La bibliothèque de code est petite, la complétion de code automatique est inadéquate. C'est juste bon pour les projets d'une page et ne peut rien gérer de plus gros.
- Sur CodePen, vous pouvez créer des stylos privés, mais vous devrez passer à un abonnement Pro (9 $/mois).
bac à sable de code
CodeSandbox est un éditeur de code basé sur le Web. Il automatise la transpiration, l'empaquetage et la gestion des dépendances pour vous, vous permettant de créer un nouveau projet en un seul clic. Après avoir créé quelque chose de fascinant, vous pouvez le partager avec d'autres en partageant simplement le site Web.
L'éditeur est compatible avec tous les projets JavaScript, bien qu'il inclue certaines fonctionnalités spécifiques à React, telles que la possibilité d'enregistrer le projet dans un modèle create-react-app.
Tout projet que vous créez dans CodeSandbox commence par un modèle. Il peut soit se rapporter à une bibliothèque, un framework ou un runtime spécifique (y compris Node.js), soit utiliser simplement des technologies Web standard. Après avoir sélectionné un modèle, vous êtes envoyé à l'éditeur, où vous trouverez tous les fichiers nécessaires et la fenêtre de prévisualisation déjà ouverte.
Vous avez accès à un « système de fichiers » dans toutes les Sandbox, ce qui signifie que vous pouvez créer de nouveaux fichiers, utiliser des modules (y compris les packages NPM) et interagir avec des actifs statiques. Il est également possible de modifier les fichiers de configuration spécifiques au modèle.
Vous pouvez même créer vos propres modèles pour votre cas d'utilisation unique, avec une structure de fichiers et des dépendances, un peu comme dans un IDE. Comme l'outil est lié à Github, vous pouvez rapidement générer des commits et ouvrir des PR. Vous pouvez déployer votre application sur ZEIT ou Netlify immédiatement.
Équipe CodeSandbox Pro
CodeSandbox, une entreprise néerlandaise qui permet aux développeurs de construire un bac à sable de développement d'applications Web basé sur un navigateur, a officiellement publié une plate-forme de collaboration qui permet aux équipes de travailler sur du code dans le cloud. Le nouveau produit, Team Pro, est une solution sans code conçue pour des équipes de produits complètes, allant des concepteurs et des gestionnaires aux équipes d'assurance qualité (QA) et au-delà.
Les projets sont fournis dans une interface conviviale pour quiconque souhaite apporter ou accepter des modifications à une application Web, en évitant les méthodes alternatives telles que l'envoi de notes et de recommandations aux développeurs pour exécuter les modifications, les renvoyer pour discussion et répéter le processus.
Fonctionnalités clés
- Un éditeur de code basé sur le Web et un outil de prototype.
- Pour une utilisation locale, une sandbox peut être téléchargée facilement dans un fichier zip.
- Programmation se fait dans des bacs à sable, qui peuvent être facilement partagés avec des collègues.
Avantages
- Une expérience utilisateur améliorée et un meilleur contrôle sur l'éditeur.
- La fonction d'aperçu en direct peut être modifiée et affichée dans une fenêtre séparée.
- Le code est automatiquement formaté et inclut une CLI (codesandbox-cli)
- Prise en charge des modules npm avancés.
- Nice messages d'erreur avec des recommandations.
- Il améliore l'expérience de débogage en fournissant un meilleur terminal, un visualiseur de test et un visualiseur de problèmes.
Inconvénients
- Le consommateur final est exposé à de nombreuses personnalisations.
- Le glisser-déposer de fichiers à partir d'un ordinateur local ne fonctionne pas correctement.
- Une certaine structure de dossiers doit être suivie dans CodeSandbox.
- La fonctionnalité d'un bac à sable privé n'est disponible que pour les contributeurs.
StackBlitz
StackBlitz est un IDE en ligne alimenté par Visual Studio Code pour les applications Web. La plateforme est aussi réactive et adaptable que la version de bureau. StackBlitz est un IDE en ligne préchargé avec Angulaire et React outils de développement.
Thinkster.io a construit ce projet fantastique pour simplifier au maximum le démarrage de votre projet Angular ou React sans avoir à vous soucier de l'installation des dépendances ou des paramètres de construction. StackBlitz fournit de nombreuses fonctionnalités étonnantes et uniques qu'aucun autre éditeur de code en ligne ne possède actuellement. Par conséquent, il vaut la peine d'enquêter davantage sur StackBlitz et de découvrir ce que cet IDE en ligne a à offrir.
Stackblitz est extrêmement comparable à l'IDE complet, surtout si vous ne pouvez pas dire au revoir au code VS car l'outil est basé sur celui-ci. Le package possède une variété de fonctionnalités qui vous permettent de commencer et de continuer à créer une application complète.
Le programme est alimenté par Visual Studio, qui est bien connu des développeurs. L'édition hors ligne est la fonctionnalité hors concours du projet. Pour rendre cela possible, l'équipe Stackblitz a créé un serveur Web intégré au navigateur. Au fur et à mesure que vous tapez, il installe automatiquement les dépendances, compile, regroupe et recharge à chaud.
premium version
Cadet, Astronaut et Commander sont disponibles gratuitement, respectivement 8 $/mois et 29 $/mois. L'astronaute et le commandant incluent un certain nombre de fonctionnalités telles que des projets privés illimités, des téléchargements de fichiers illimités, l'invitation au canal de relâchement de l'équipe principale, etc. Pour plus d'informations, consultez le tableau d'affichage officiel.
Fonctionnalités clés
- Ajout de packages NPM à votre projet.
- Grâce à un nouveau serveur de développement intégré au navigateur, vous pouvez modifier hors ligne.
- Une URL d'application hébergée qui nous permet d'accéder (et de partager) notre application en direct à tout moment.
- Parmi les autres fonctionnalités notables de Visual Studio Code, citons Intellisense, Project Search (Cmd/Ctrl+P), Go to Definition, etc.
Avantages
- Les capacités de déploiement de Firebase.
- L'éditeur est vraiment facile à utiliser et extrêmement rapide.
- Les utilisateurs ont accès à package.json, index.html et index.js.
- Code source partageable qui peut également être intégré.
- Aperçu en direct sur une grande partie de la page, avec possibilité d'ouvrir sur une autre page si nécessaire.
- Hors ligne, modification
- Complétions intelligentes et Intellisense amélioré.
- Le cœur de Stackblitz est open source.
Inconvénients
- Vous n'avez aucune influence sur le bâtiment ou le serveur de développement car ceux-ci sont gérés par la commande create-react-app.
- Dans React, une structure de dossiers fondamentale doit être observée.
- Il n'est pas possible de formater le code automatiquement, bien qu'il soit possible de le faire manuellement.
Conclusion
De nos jours, un terrain de jeu de codage comme ceux que nous avons vus ci-dessus peut être utilisé pour construire complètement n'importe quel projet Web. Il n'est pas nécessaire d'installer des IDE encombrants sur votre PC lorsque vous pouvez créer, déboguer, tester et déployer directement à partir de votre navigateur Web.
À mon avis, StackBlitz serait le meilleur d'entre eux car il s'agit d'un IDE basé sur le Web qui permet JavaScript, Angular et d'autres projets de développement dès la sortie de la boîte, sans avoir besoin d'installer des environnements de développement locaux comme Node.js, npm, ou angulaire. Il offre la même expérience que l'utilisation locale de Visual Studio Code. En réalité, comme StackBlitz est piloté par Visual Studio Code, il semble aussi rapide et polyvalent que la version de bureau.
Lequel de CodePen, CodeSandbox et StackBlitz est votre outil de prédilection ? Faites le nous savoir dans les commentaires.
Abbatia
Merci pour cet excellent article, une fois que j'ai vu stackblitz.com, je sais que c'est ce que je veux.