tieJS: der JavaScript-Editor für Einsteiger

Take it easy JavaScript: tieJS, der Code-Editor für JavaScript-Einsteiger
Keine Kommentare

tieJS ist ein JavaScript-Editor, der bewusst auf viele komplexe Features verzichtet. Das Projekt richtet sich an Einsteiger, die noch nicht viele Erfahrungen mit JavaScript gesammelt haben, sondern den Umgang mit der Sprache erst erlernen möchten.

Die Software tieJS ist eine Entwicklungsumgebung für die Programmierung mit JavaScript, die sich hauptsächlich an Neueinsteiger in die Programmierung mit JavaScript richtet. Für Bildungseinrichtungen und private Zwecke kann die Software kostenlos genutzt werden.

Es gibt zwar bereits hervorragende Entwicklungsumgebungen für JavaScript. Da diese aber eher für fortgeschrittene Anwender geeignet sind, ist der Einstieg in die JavaScript-Programmierung nicht immer ganz einfach. Ziel von tieJS ist es, den Einstieg zu erleichtern. Dabei soll der Name Programm sein: „Take it easy JavaScript“.

Die Grundversion enthält nur die wichtigsten Funktionen, damit die Bedienung einfach bleibt. So kann beispielsweise JavaScript-Code direkt ausgeführt werden, ohne erst eine zusätzliche HTML-Datei selbst erstellen zu müssen.

Mit zunehmendem Lernfortschritt kann der Editor durch Plug-ins erweitert werden. Durch die Plug-ins erschließt sich ein Teil des beeindruckenden JavaScript-NPM-Modul-Ökosystems, das für viele Fragestellung bereits eine Lösung bietet. Die zahlreich vorhandenen Module und Bibliotheken für JavaScript machen sicher einen Teil der Attraktivität dieser Programmiersprache aus. Deren Nutzung ist aber nicht immer ganz einfach und erfordert manchmal eine umfangreiche Einarbeitung. Durch das Plug-in-System von tieJS stehen einige attraktive Module und Bibliotheken per Knopfdruck und durch entsprechende Vorkonfiguration ohne allzu große Einarbeitung zur Verfügung.

Angular Camp 2020

Als Online- oder Präsenztraining!

Das 360°-Intensivtraining mit Angular-Koryphäe Manfred Steyer
Präsentiert von Entwickler Akademie

Das Documentation-Plug-in dient zur Erstellung einer Dokumentation für den eigenen Quellcode. Dabei wird documentation.js mit der JSDoc-Syntax verwendet. Mit dem Flowchart-Plug-in (flowchart.js) kann der Quelltext auf Knopfdruck als Flowchart dargestellt werden. Unit-Tests mit Jasmine zu formulieren und durchzuführen ermöglicht das Jasmine-Plug-in. Mit dem EXE-Win7-Plug-in erstellt man mit NWJS eine ab Windows 7 ausführbare Exe-Datei des Quellcodes. Die beiden Plug-ins Collab-Server und Collab ermöglichen das kooperative Programmieren im lokalen Netzwerk. Technisch wird das unter Verwendung des Yjs-Frameworks realisiert. Um den eigenen Quellcode auf möglichst vielen Browsern lauffähig zu machen, ersetzt Babel im gleichnamigen Plug-in entsprechende Codepassagen. Möchte man seine Webseite bzw. Webapp kompakt in einer HTML-Datei ausliefern, kann man mit dem NPM-Modul web-resource-inliner im HTML-inline Plug-in die referenzierten Dateien auf Knopfdruck einfügen lassen. Serverseitigen JavaScript-Code kann man schließlich mit dem NodeJS-Plug-in erstellen und mit Hilfe von Browserify, das in dieses Plug-in integriert ist, browsertauglich abspeichern. Das setzt allerdings die Installation von NodeJS auf dem Rechner voraus.

Im vorliegenden Artikel wird die grundlegende Nutzung von tieJS gezeigt. Spätere Artikel behandeln die Installation und Verwendung der Plug-ins.

Der Editor kann unter der URL tiejs.ilernen.eu heruntergeladen werden. Die heruntergeladene Datei tieJS_setup.zip enthält ein selbstextrahierendes 7zip-Archiv tieJS_setup.exe, das den Editor im Unterordner des aktuellen Verzeichnisses installiert. tieJS ist eine portable Anwendung und kann überall, also auch auf einem portablen Datenträger, installiert werden. Im Unterordner tieJS befindet sich tieJS.exe, mit der die Anwendung gestartet wird.

Neben JavaScript kann der Editor auch für die Erstellung von HTML-, CSS-, JSON- und beispielsweise Python-Dateien verwendet werden. HTML- und Python-Dateien können mit tieJS direkt im Browser ausgeführt werden.

Häufig verwendete Programmfragmente können als Schnipsel im Ordner snippets des tieJS-Installationsverzeichnisses hinterlegt werden. Für jede Dateiendung wird ein eigenes Snippets-Menü im Editor angezeigt:

Es gibt verschiedene Möglichkeiten den JavaScript-Code auszuführen:

Mit dem Button „Run“ wird der JavasScript-Code direkt in tieJS ausgeführt. Die Kommunikation mit dem Anwender, beispielsweise über prompt– oder document.write-Kommandos erfolgt im Document-Fenster. Das Console-Fenster zeigt alle console.log-Ausgaben und Fehlermeldungen an. Durch Anklicken des „Show in editor“-Buttons einer Fehlermeldung im Console-Fenster gelangt man direkt zur entsprechenden Fehlerposition im Editor-Fenster. Dort werden die Fehler ebenfalls markiert:

Mit den Buttons „Start“, „Step“ und „Stop“ wird der Code in tieJS unter Verwendung des Debug-Modus ausgeführt. Zusätzlich zum Document- und Console-Fenster öffnet sich das Variables-Fenster mit den verwendeten Variablen und deren Inhalten. Der Code kann schrittweise ausgeführt und der Programmablauf durch entsprechende Markierungen im Editor verfolgt werden. Code-Debugging ist bei tieJS auf diese Weise nur für einfache Programme mit einer einzigen JavaScript-Datei vorgesehen, also für Programmiereinsteiger zur Veranschaulichung einfacher Programmabläufe bei Schulungen gedacht. Für komplexere Anwendungen, beispielsweise unter Verwendung einer HTML-basierten grafischen Benutzeroberfläche, kann der bereits im Browser enthaltene Debugger über die „Entwicklertools“ verwendet werden.

Mit dem Button „Browser“ wird der Code direkt im Browser ausgeführt. Zum Debuggen können die Entwicklertools des jeweiligen Browsers verwenden werden. Nachdem der Code im Editor verändert wurde, muss der Browser-Refresh-Button gedrückt werden, um die Änderungen auch im Browser anzuzeigen.

Weitere Informationen zur Nutzung von tieJS sind in der integrierten Hilfe unter Info -> Help verfügbar. Beispielsweise werden dort die Pfadvervollständigungsfunktion, der Update-Mechanismus sowie die Tastenkürzel für wichtige Editorfunktionen wie die Suchfunktion erklärt. Da der Editor auf dem Quelloffenen und bewährten ace-Editor basiert, funktionieren die daher bekannten Tastenkürzel weitgehend. Nutzungsbedingungen und Quellen findet man unter Info -> About.
Im nächsten Teil dieser Artikelreihe wird die Installation und Nutzung von Plug-ins unter tieJS betrachtet. Zunächst wird das Collab-Plug-in zur kooperativen Programmierung im lokalen Netzwerk verwendet. Dabei können mehrere Nutzer gleichzeitig an einer Datei im lokalen Netzwerk arbeiten.

Unsere Redaktion empfiehlt:

Relevante Beiträge

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu:
X
- Gib Deinen Standort ein -
- or -