Helmbergers· 5 min read
Online Editoren - Zum Lernen oder Entwickeln von TypeScript
Im Eintrag VS Code/TypeScript Start Template für Node.js und Web Applikationen habe ich erwähnt, dass Online Editoren zum Lernen von TypeScript sehr beliebt sind. In diesem Artikel möchte ich die Links dazu auflisten. Die Editoren sind sehr unterschiedlich und decken unterschiedliche Bedürfnisse ab, vom Teilen eines Code Schnipsel zur Fehleranalyse bis zu einer kompletten Entwicklungsumgebung, die ganze Teams unterstützen.
TypeScript ist von Microsoft entwickelt, daher beginne ich zunächst mit den von Microsoft zur Verfügung gestellten Online Editoren:
1. Microsoft
TypeScript Playground
Auf der TypeScript Homepage gibt es immer schon den Playground und das ist wohl die erste Anlaufstelle, wenn man ein wenig TypeScript ausprobieren will. Man kann ein TypeScript File editieren, dieses dann nach Javascript compilieren und das Programm im Browser starten (output in die console oder über dom/alerts output erzeugen). Es ist auch möglich einen Link zu erzeugen, damit man später an dem File weiterarbeiten kann.
Die Funktionalität des TypeScript Playgrounds ist wirklich sehr rudimentär.
Azure
Monaco-Editor wurde als Entwicklungswerkzeug für Azure Web Sites entwickelt und wird inzwischen an mehreren Stellen in Azure eingesetzt: Azure DevOps, OneDrive. Ich denke, dass daraus auch Visual Studio Code entstanden ist.
Visual Studio Online
Visual Studio Online, a web-based companion to Visual Studio and Visual Studio Code, enables developers to work on and edit code from any device with a modern web browser. Built for productivity while on the go, this solution helps developers perform quick tasks, join Visual Studio Live Share sessions, or perform pull request reviews at times and in places where they may not have access to their development environment. (aus Azure announcements for Microsoft Build)
Visual Studio Online wurde auf der build 2019 (Mai 2019) angekündigt. Scott Hanselman hat es in der Azure Keynote vorgestellt - Minute 21-23. Es sollen sowohl Visual Studio Code Workspaces, als auch Visual Studio Project Types unterstützt werden. Es wird aber wohl noch ein Weilchen dauern, bis Visual Studio Online für uns verfügbar ist.
2. Teilen von Code Schnipsel
JSFiddle
Demos for docs Bug reporting (test-case) for Github Issues Presenting code answers on Stack Overflow Live code collaboration Code snippets hosting … or just your humble code playground
JSFiddle ist sehr bekannt, weil man bei Stack Overflow Antworten oder GitHub Issues häufig Links davon präsentiert bekommt. Einen kleinen reduzierten Code Schnipsel, aber durchaus mit inkludierten externen Libraries, der das Problem oder die Lösung zeigt. JSFiddle gibt es schon ganz lange, es ist meiner Meinung nach der älteste Editor, der hier aufgelistet ist.
Codepen
CodePen is a social development environment for front-end designers and developers. It’s the best place to build and deploy a website, show off your work, build test cases, and find inspiration.
Codepen ist meiner Meinung nach sehr ähnlich JSFiddle, etwas neuer und auf Kommentare und Zusammenarbeit ausgelegt. In der PRO Version kann man die eigenen Projekte dann auch privat halten.
FiddleSalad
Code with convienence. An online playground with an instantly ready coding environment. Combine language preprocessors, CSS, HTML and JavaScript to create and share coding examples.
Legt ganz stark den Schwerpunkt auf das Lernen anhand einer Vorlage. Man liest ein Stück und tippt oder kopiert dann Codeteile und probiert das gleich aus. Da sie nicht die aktuellen Frameworks anbieten, scheint es ein wenig in die Jahre gekommen zu sein. Aber es funktioniert hervorragend.
Plunker
Plunker is the best tool to prototype, experiment, share and debug your ideas on the web platform. From idea to implementation, Plunker helps you build something quickly and frictionlessly.
Mit Plunker erstellt man schon mächtigere Projekte, man kann mit Frameworks wie Angular, KendoUI, React starten. Da dies auch bei Problem/Lösungs Schnipsel immer öfters nötig ist, wird Plunker inzwischen oft in GitHub Issues und Stack Overflow Antworten eingesetzt.
Neben Plunker gibt es auch eine Nachfolge Version, die ist aber noch im Alpha Stadium: Plunker Next.
Online IDE
Die Online IDEs (Integrated Development Environments) sind so mächtig, wie Visual Studio Code (VS Code). Auch Microsofts Visual Studio Online wird sich in diese Kategorie einreihen.
StackBlitz
Code the Future. In Your Browser. Create, edit & deploy fullstack apps — in just one click.
Angular, React, Ionic, … Projekte werden bei StackBlitz entwickelt.
Es verwendet https://stackblitz.com/ - den Monaco Browser und sieht auch so aus, wie Visual Studio Code.
Stackblitz wird von Googlecloud unterstützt und dort auch eingesetzt.
CodeSandbox
The online code editor for Web
React, Vue, Angular, … alle möglichen Frameworks werden unterstützt.
Scheint mir gut mit GitHub integriert zu sein. Diese IDE ist auch so aufgebaut, dass sie in anderen WebSites eingebettet werden kann, z.B. wird das bei Software Bibliotheken Hersteller benötigt.
CodeSandbox hat auch prominente Untertützer, wie Atlassian, shopify und GitLab
Fazit
Es gibt natürlich auch für andere Programmiersprachen Online Editoren. Ich habe mich hier aber auf mir bekannte Seiten beschränkt, die auch besonders für TypeScript Projekte einsetzbar sind.
Folgende Seite sammelt alle möglichen Online IDEs, darunter sogar welche für SQL und MATLAB: Awesome Online IDE Awesome A curated list of awesome online implementations of IDEs
