Inhaltsverzeichnis[Ausblenden][Zeigen]
Bei der Arbeit an einem komplexen Projekt werden Sie, egal ob Sie ein erfahrener Programmierer oder ein Neuling sind, mit ziemlicher Wahrscheinlichkeit auf Probleme stoßen. Wenn Sie Ihr Projekt in viele Module aufteilen, treten Probleme auf, die es schwieriger machen, Fehler aufzuspüren und Lösungen zu finden. Unter anderen Umständen kann das Debuggen einzelner Instanzen schwierig sein, weil Sie nicht die richtige Lösung für das Problem gefunden haben, an dem Sie gearbeitet haben.
Es tritt gelegentlich auch als Code auf, der zu diesem Zeitpunkt komplex aussehen kann. JavaScript ist eine der webbasierten Sprachen, die extrem einfach zu erlernen ist. Starten Sie einfach Ihren Desktop-Browser und navigieren Sie zu den Entwicklertools (normalerweise F12), und Sie sind fertig! Sie können dann mit JS experimentieren, ohne komplizierte Software installieren oder ausführen zu müssen.
Um loszulegen, benötigen Sie lediglich einen Browser. Es ist wunderbar, all diese Einfachheit sofort einsatzbereit zu haben, aber es gibt Gelegenheiten, in denen Sie mehr brauchen. Angenommen, Sie möchten mit einer neuen Web-API experimentieren, die Sie kürzlich entdeckt haben, aber kein neues Projekt starten möchten.
In diesem Beitrag vergleichen und kontrastieren wir die drei beliebtesten JS-Playgrounds, CodePen, CodeSandbox und StackBlitz. Lass uns anfangen!
CodePen
Frontend-Webentwicklungstools entwickeln sich ständig weiter, und Texteditoren sind ein wichtiger Bestandteil der neuesten Technologien, die das Leben eines Entwicklers einfacher machen. Abgesehen von eigenständigen Texteditoren wie Atom oder Notepad ++ gab es in den letzten Jahren eine Explosion von browserbasierten Editoren, die keine Programminstallation erfordern und eine stärkere Zusammenarbeit fördern.
CodePen ist eine „Online-Community zum Testen und Präsentieren von benutzererstellten HTML-, CSS- und JavaScript-Codeschnipseln“, die fantastische Möglichkeiten bietet, zu lernen, wie man Frontend-Webseiten besser schreibt.
CodePen bietet Ihnen zwei „Modi“. Der erste und am häufigsten verwendete ist der Stift. Es ist so einfach wie das Klicken auf eine Schaltfläche und der Transport direkt zum Editor. Von dort aus können Sie auf ein Vorschaufenster sowie grundlegende HTML-, CSS- und JS-Bearbeitungsfenster zugreifen.
Es gibt kein „Dateisystem“, „IntelliSense“ oder irgendetwas anderes – nur einfache Syntaxhervorhebung und schnelle Befehle wie Prettify. Auf der Registerkarte „Optionen“ können Sie aus einer eingeschränkten Auswahl an Präprozessoren für alle drei Sprachen auswählen (z. B. TypeScript für JS) oder Verbindungen zu externen Quellen hinzufügen.
Wenn Sie nur etwas kostenlos erledigen möchten, reicht einer der Editoren aus. Ich würde CodePen für alles vorschlagen, was nicht viel Setup oder Bibliotheken erfordert – einfach HTML, CSS und JS mit optionalen Präprozessoren obendrauf. Wenn Sie den Spielplatz nutzen möchten, um Ihre Präsenz in den sozialen Medien zu verbessern oder ein persönliches Portfolio zu entwickeln, ist CodePen eine bessere Option.
Premium Version
Auf CodePen stehen Ihnen noch einige weitere Alternativen zur Auswahl. Wenn Sie jährlich zahlen, können Sie jeden Monat einen von drei Premium-Plänen für 12, 19 oder 39 US-Dollar erhalten. Sie können auf jeder der drei Ebenen eine unbegrenzte Anzahl privater Stifte, Posten und Sammlungen erstellen.
Sie erhalten außerdem das Pro-Abzeichen (ein sozialer Boost), Zugriff auf den Live-Zusammenarbeitsmodus, keine Werbung und mehr. Es gibt auch bestimmte teamspezifische Strategien und andere stufenübergreifende Unterscheidungen. Weitere Informationen finden Sie auf der offiziellen Rechnungstafel.
Merkmale
Abgesehen von der Erstellung von HTML, CSS und JavaScript in CodePen gibt es noch ein paar weitere Dinge, die es auszeichnen.
- Eine Echtzeitanzeige Ihres Codes ist möglich. Es erfordert keine Kompilierung.
- Experimentieren ermöglicht es Ihnen, neue Dinge zu lernen.
- Erstellen Sie winzige Testfälle, um nach Problemen zu suchen und diese zu beheben.
- Zeigen Sie Ihre wunderbaren Werke.
- Erstellen und speichern Sie Stifte für die spätere Verwendung.
- Probieren Sie den Code anderer Entwickler aus und sehen Sie ihn in Aktion.
Vorteile
- Zu Beginn fallen keine Kosten an.
- Integrierte Lernressourcen.
- Arbeiten Sie mit anderen zusammen und vergleichen Sie Projekte, um zu sehen, wohin sie in Zukunft gehen können.
- Die Benutzeroberfläche ist einfach zu bedienen und unkompliziert.
Nachteile
- Die Codebibliothek ist klein, die automatische Codevervollständigung ist unzureichend. Es ist nur gut für One-Page-Projekte und kann nichts Größeres verarbeiten.
- Auf CodePen können Sie private Stifte erstellen, aber Sie müssen auf eine Pro-Mitgliedschaft upgraden ($9/Monat).
Code-Sandbox
CodeSandbox ist ein webbasierter Code-Editor. Es automatisiert das Transpirations-, Paketierungs- und Abhängigkeitsmanagement für Sie, sodass Sie mit einem einzigen Klick ein neues Projekt erstellen können. Nachdem Sie etwas Faszinierendes geschaffen haben, können Sie es mit anderen teilen, indem Sie einfach die Website teilen.
Der Editor ist mit allen JavaScript-Projekten kompatibel, enthält jedoch bestimmte React-spezifische Funktionen, z. B. die Option, das Projekt in einer Create-React-App-Vorlage zu speichern.
Jedes Projekt, das Sie in CodeSandbox erstellen, beginnt mit einer Vorlage. Es kann sich entweder auf eine bestimmte Bibliothek, ein Framework oder eine Laufzeit (einschließlich Node.js) beziehen oder einfach Standard-Webtechnologien verwenden. Nachdem Sie eine Vorlage ausgewählt haben, werden Sie zum Editor weitergeleitet, wo Sie alle erforderlichen Dateien finden und das Vorschaufenster bereits geöffnet ist.
Sie haben Zugriff auf ein „Dateisystem“ in allen Sandboxes, was bedeutet, dass Sie neue Dateien erstellen, Module (einschließlich NPM-Pakete) verwenden und mit statischen Assets interagieren können. Es besteht auch die Möglichkeit, die vorlagenspezifischen Konfigurationsdateien zu ändern.
Sie können sogar Ihre eigenen Vorlagen für Ihren einzigartigen Anwendungsfall erstellen, komplett mit Dateistruktur und Abhängigkeiten, ähnlich wie in einer IDE. Da das Tool mit Github verknüpft ist, können Sie schnell Commits generieren und PRs öffnen. Sie können Ihre Anwendung sofort bei ZEIT oder Netlify bereitstellen.
CodeSandbox Team Pro
CodeSandbox, ein niederländisches Unternehmen, das es Entwicklern ermöglicht, eine browserbasierte Sandbox für die Entwicklung von Webanwendungen zu erstellen, hat offiziell eine Kollaborationsplattform veröffentlicht, die es Teams ermöglicht, an Code in der Cloud zu arbeiten. Das neue Produkt Team Pro ist eine No-Code-Lösung, die für komplette Produktteams entwickelt wurde, von Designern und Managern bis hin zu Qualitätssicherungsteams (QA) und darüber hinaus.
Projekte werden in einer benutzerfreundlichen Oberfläche für jeden bereitgestellt, der Änderungen an einer Webanwendung vornehmen oder akzeptieren möchte, wobei alternative Methoden vermieden werden, wie das Senden von Notizen und Empfehlungen an Entwickler, um die Änderungen auszuführen, sie zur Diskussion zurückzugeben und den Prozess zu wiederholen.
Merkmale
- Ein webbasierter Code-Editor und ein Prototyp-Tool.
- Für den lokalen Gebrauch kann eine Sandbox einfach in einer ZIP-Datei heruntergeladen werden.
- Programmierung erfolgt in Sandboxes, die problemlos mit Kollegen geteilt werden können.
Vorteile
- Eine verbesserte Benutzererfahrung und mehr Kontrolle über den Editor.
- Die Live-Vorschaufunktion kann geändert und in einem separaten Fenster angezeigt werden.
- Der Code wird automatisch formatiert und enthält eine CLI (codesandbox-cli)
- Unterstützung für erweiterte npm-Module.
- Schöne Fehlermeldungen mit Empfehlungen.
- Es verbessert das Debugging-Erlebnis, indem es ein besseres Terminal, einen Test-Viewer und einen Issue-Viewer bereitstellt.
Nachteile
- Der Endverbraucher ist vielen Personalisierungen ausgesetzt.
- Drag & Drop von Dateien von einem lokalen Computer funktioniert nicht richtig.
- In CodeSandbox muss eine bestimmte Ordnerstruktur eingehalten werden.
- Die Funktionalität einer privaten Sandbox steht nur Patrons zur Verfügung.
StackBlitz
StackBlitz ist eine auf Visual Studio Code basierende Online-IDE für Webanwendungen. Die Plattform ist so reaktionsschnell und anpassungsfähig wie die Desktop-Version. StackBlitz ist eine vorinstallierte Online-IDE Eckig und Reagieren Entwicklungswerkzeuge.
Thinkster.io hat dieses fantastische Projekt entwickelt, um den Einstieg in Ihr Angular- oder React-Projekt so einfach wie möglich zu gestalten, ohne sich Gedanken über die Installation von Abhängigkeiten oder Build-Einstellungen machen zu müssen. StackBlitz bietet viele erstaunliche und einzigartige Funktionen, die derzeit kein anderer Online-Code-Editor hat. Daher lohnt es sich, StackBlitz weiter zu untersuchen und herauszufinden, was diese Online-IDE zu bieten hat.
Stackblitz ist extrem vergleichbar mit der kompletten IDE, besonders wenn man sich nicht von VS-Code verabschieden kann, weil das Tool darauf basiert. Das Paket verfügt über eine Vielzahl von Funktionen, mit denen Sie mit der Erstellung einer Full-Stack-Anwendung beginnen und fortfahren können.
Das Programm wird von Visual Studio unterstützt, das unter Entwicklern bekannt ist. Die Offline-Bearbeitung ist das herausragende Merkmal des Projekts. Um dies zu ermöglichen, hat das Stackblitz-Team einen In-Browser-Webserver erstellt. Während Sie tippen, werden automatisch Abhängigkeiten installiert, kompiliert, gebündelt und im laufenden Betrieb neu geladen.
Premium Version
Cadet, Astronaut und Commander sind kostenlos für 8 $/Monat bzw. 29 $/Monat erhältlich. Astronaut und Commander enthalten eine Reihe von Funktionen wie unbegrenzte private Projekte, unbegrenzte Datei-Uploads, Einladung zum Slack-Channel des Kernteams und so weiter. Weitere Informationen finden Sie auf der offiziellen Rechnungstafel.
Merkmale
- Hinzufügen von NPM-Paketen zu Ihrem Projekt.
- Dank eines neuartigen In-Browser-Entwicklungsservers können Sie offline bearbeiten.
- Eine gehostete App-URL, die es uns ermöglicht, jederzeit auf unsere Live-App zuzugreifen (und sie zu teilen).
- Weitere bemerkenswerte Funktionen von Visual Studio Code sind Intellisense, Projektsuche (Cmd/Strg+P), Gehe zu Definition und andere.
Vorteile
- Bereitstellungsfunktionen von Firebase.
- Der Editor ist wirklich einfach zu bedienen und extrem schnell.
- Benutzer haben Zugriff auf package.json, index.html und index.js.
- Gemeinsam nutzbarer Quellcode, der auch eingebettet werden kann.
- Live-Vorschau auf einem großen Teil der Seite, mit der Option, bei Bedarf auf einer anderen Seite zu öffnen.
- Offline bearbeiten
- Intelligente Vervollständigungen und verbesserte Intellisense.
- Der Kern von Stackblitz ist Open-Source-.
Nachteile
- Sie haben keinen Einfluss auf das Gebäude oder den Entwicklerserver, da diese vom Befehl create-react-app verwaltet werden.
- In React ist eine grundsätzliche Ordnerstruktur zu beachten.
- Es ist nicht möglich, Code automatisch zu formatieren, obwohl es möglich ist, dies manuell zu tun.
Zusammenfassung
Heutzutage kann ein Codierungsspielplatz wie der oben gezeigte verwendet werden, um jedes Webprojekt vollständig zu erstellen. Sie müssen keine umständlichen IDEs auf Ihrem PC installieren, wenn Sie direkt von Ihrem Webbrowser aus erstellen, debuggen, testen und bereitstellen können.
Meiner Meinung nach wäre StackBlitz die beste unter ihnen, da es sich um eine webbasierte IDE handelt, die JavaScript, Angular und andere Entwicklungsprojekte direkt aus der Box ermöglicht, ohne dass lokale Entwicklungsumgebungen wie Node.js, npm, etc. installiert werden müssen. oder Eckig. Es bietet die gleiche Erfahrung wie die lokale Verwendung von Visual Studio Code. Da StackBlitz von Visual Studio Code gesteuert wird, fühlt es sich in Wirklichkeit so schnell und vielseitig an wie die Desktop-Version.
Welches von CodePen, CodeSandbox und StackBlitz ist Ihr bevorzugtes Tool? Lass es uns in den Kommentaren wissen.
Abbatya
Vielen Dank für diesen großartigen Artikel. Als ich stackblitz.com gesehen habe, weiß ich, dass ich das will.