/ Visual Studio Code

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

2019-05-24-16_07_59-Playground---TypeScript

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

2019-05-24-16_08_28-TypeScript---JSFiddle

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.

2019-05-24-16_09_08-A-Pen-by-Captain-Anonymous

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.

2019-05-24-16_09_49-TypeScript-Web-IDE-_-Fiddle-Salad

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.

2019-05-24-16_11_50-Plunker---TypeScript-plunkr

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.

2019-05-24-16_12_23-angular-xe54te---StackBlitz

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

2019-05-24-16_13_15-Angular---CodeSandbox

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

Helmbergers Let's Code - Instagram quad: Best Online Code Editors for TypeScript Helmbergers Let's Code - Twitter: Best Online Code Editors for TypeScript

Artikel in diesem Blog