Interview mit Angelo Zerr

TypeScript-Plug-in für Eclipse: Auf dem Weg zum Angular-2-Support in Eclipse

Dominik Mohilo

Angelo Zerr

Eclipse und JavaScript – das war lange Zeit ein Paar, das nicht so recht harmonieren wollte. Doch das ändert sich gerade: Einerseits werden momentan die ehrwürdigen Eclipse JavaScript Development Tools (JSDT) auf Vordermann gebracht. Andererseits gibt es zahlreiche Community-Projekte, die Eclipse glücklich mit JavaScript verheiraten. Einer der aktivsten Committer ist hier Angelo Zerr, mit dem wir uns über sein neues TypeScript-Plug-in für Eclipse unterhalten haben.

JAXenter: Glückwunsch zu deinem neuen TypeScript-Compiler für Eclipse. Neben TypEcs und Eclipse TypeScript ist dies das dritte TypeScript-Plug-In für Eclipse. Kannst du uns sagen, warum du dieses neue Plug-in entwickelt hast?

Angelo Zerr: Als Allererstes bin ich ja der Autor des auf tern.java basierenden AngularJS Eclipse. tern.java verwendet die fantastische JavaScript Inference Engine tern.js mit Node.js innerhalb eines Java-Kontextes. Die Tern IDE (ein Eclipse Plug-In) nutzt bereits tern.java, aber anderen IDEs würde tern.java ebenfalls gut tun. JBoss Tools, MyEclipse, Liferay IDE und Zend Studio haben tern.java in ihre Produkte integriert und wirken an tern.java mit. Dank dieser beeindruckenden Leute funktioniert tern.java heute so gut!

Ich werde oft gefragt, wie man Angular 2 mit AngularJS Eclipse unterstützen kann.

Ich werde oft gefragt, wie man Angular 2 mit AngularJS Eclipse unterstützen kann. Angular 2 arbeitet mit TypeScript (selbst wenn man ES5- oder ES6-Code benutzen könnte, empfiehlt es sich, TypeScript zu nutzen) und ein Angular-2-Projekt wird mit einer (oder mehreren) tsconfig.json konfiguriert.

Ich habe also untersucht, wie man dies mit ternjs bewerkstelligen könnte. Ternjs basiert auf acorn (ein mächtiger JavaScript-Parser), der nicht nur in der Lage ist, ES6-Code zu parsen, sondern gleichzeitig sehr erweiterungsfähig ist. Mit acorn-jsx ist mittlerweile eine Erweiterung für JSX verfügbar, weshalb ich mit tern-typescript versucht habe, das gleiche Prinzip auf TypeScript zu übertragen – was sich allerdings als äußerst schwierig herausstellte und mich schließlich jede Motivation kostete.

Während meinen TypeScript-Experimenten mit ternjs habe ich das großartige VSCode entdeckt, das TypeScript ohne Probleme unterstützt. Dabei stellte sich heraus, dass VSCode tsserver konsumiert, um Completion, Hover, Validation usw. für TypeScript bereitzustellen – und das innerhalb des VSCode-Editors. Tsserver verwendet das TypeScript Service Language API, das wiederum tsconfig.json-Dateien anwendet. Wenn VSCode so etwas kann, warum sollte Eclipse nicht ebenfalls dazu in der Lage sein?

Zuerst versuchte ich mein Glück mit zwei bereits existierenden Plug-ins: TypEcs und TypeScript, die aber beide nicht mit tsserver arbeiten. Compiler Options werden dort mit einer Eclipse-Preference gehandhabt. Selbst wenn TypEcs anfangen sollte, tsconfig.json zu supporten, unterstützt es doch nicht vollwertige Features wie „exclude“ oder „files“. Diese werden von den JSON-Eigenschaften in der tsconfig.json-Datei deklariert, die den Compilation-Kontext eines TypeScript-Projekts definiert. Dass TypEcs und Eclipse TypeScript ihre eigene Brücke zwischen Java und dem TypeScript Service Language API beschreiben, macht es den Usern sehr schwer, sich auf eine TypeScript-Version festzulegen. Man ist nämlich gezwungen, das Brücken-Plug-in rekompilieren, wenn man seine TypeScript-Version updaten möchte.

Dass tsserver bei der Installation von TypeScript mitgeliefert wird, ermöglicht es jeder beliebigen IDE, sich für eine Version von TypeScript zu entscheiden. Dazu muss sie einfach via „npm install typescript“ installiert werden.

Lesen Sie auch: “Mit TypeScript kann JavaScript auch einem Java-Entwickler Spaß machen”

VSCode bietet einen tollen Support für TypeScript und erleichtert den Versionswechsel von TypeScript. Es ist außerdem ziemlich schnell: Zu keiner Zeit ist mir ein Stocken aufgefallen, wenn ich eine große TypeScript-Datei geöffnet habe. TypEcs und Eclipse TypeScript dagegen frieren die Eclipse IDE ein, wenn eine große Datei geöffnet wird. Folglich habe ich versucht, herauszufinden, warum VSCode so schnell ist:

  • VSCode benutzt Promise, um Completion, Hyperlink, Hover, Validation, usw. zu unterstützen. Das bedeutet z.B., dass Completion in async ausgeführt wird. Wenn tsserver keine Antwort zurückliefert, zeigt die Completion „loading“ an, anstatt den Editor einzufrieren.
  • Editorfeatures, wie z.B. Syntax-Einfärbung oder Folding, nutzen keinen AST, was dazu führen kann, dass die Berechnung etwas länger dauert. Die Einfärbung der Syntax wird mit Textmate erledigt und wenn die Datei besonders groß ist, kann es zu Problemen kommen. Die Einfärbung wird durchgeführt, sobald die Textmate-Grammatik fertig ist.

Darum habe ich mich entschieden, dieselbe Integration innerhalb von Eclipse mit typescript.java zu versuchen:

  • Es stellt den schnellsten TypeScript-Editor bereit, auch wenn die Datei sehr umfangreich ist. Wenn man eine TypeScipt-Datei öffnet, wird der AST nicht geladen, die Syntax wird mit Eclipse ITokenScanner eingefärbt und für das Folding wird ein Einzug verwendend (wie bei VSCode). Zum Einfrieren sollte es deswegen nicht kommen (hoffe ich).
  • Es konsumiert den tsserver mit async mean (genauso wie VSCode). Das derzeit einzige Problem besteht darin, dass die Completion von Eclipse nicht mit async durchgeführt werden kann. tsserver stärker auszunutzen, ermöglicht es, die TypeScript-Version zu konfigurieren.

JAXenter: Worin liegen, im Vergleich mit anderen Plug-ins, die Vorteile?

Angelo Zerr: Zunächst einmal kann man in Why TypeScript IDE nachlesen, warum ich mich dazu entschlossen habe, mein eigenes TypeScript Eclipse-Plug-in zu programmieren. Die Hauptunterschiede sind:

  • TypeScript lässt sich wie VSCode integrieren:
    • indem man tsserver verwendet, um tsconfig.json zu supporten und von tsserver-Verbesserung zu profitieren.
    • um einen schnellen Editor zu haben, wenn eine große TypeScript-Datei geöffnet wird.
    • und stellt außerdem, da tsserver auch JavaScript unterstützt, einen JavaScript-Editor (Salsa) zur Verfügung. Meiner Ansicht nach könnte tsserver ternjs ersetzen, sobald es erweiterbarer wird (etwa um eigene Plug-ins zu programmieren). In diesem TypeScript Issue ist bspw. eine äußerst eindrucksvolle Demo mit Angular 2 zu sehen:
      zerr1
      Ist tsserver erst einmal erweiterbar, wird typescript.java von der Möglichkeit profitieren, Completion für Angular 2 innerhalb von Templates, wie etwa denen von WebStorm, durchführen zu können. Noch dazu können wir dann unsere eigenen Plug-ins für beliebige andere Features programmieren.
  • TypeScript „Out-of-the-Box“. In anderen Worten: Wenn man typescript.java installiert, kommt man in den Genuss von TypeScript Completion, Validation, usw. und Compilation, ohne node.js oder Typescript installieren zu müssen. Warum? Weil typescript.java folgende Dinge bereitstellt:

    Dieses Feature wird dann nützlich, wenn bspw. eine Firma node.js, npm und TypeScript nicht auf dem Computer jedes einzelnen Entwicklers installieren will. Man muss zwar typescript.java aufspielen, aber kann bei Bedarf sein System Node.js oder ein angepasstes TypeScript-Bundle benutzen.

JAXenter: Welche Eclipse Neon-Features werden für dein Plug-in genutzt?

Angelo Zerr: typescript.java kann in einem Java-Kontext angewandt werden und bietet ein Eclipse-Plug-in namens TypeScript IDE. Es benötigt Eclipse WTP, weil:

  • der TypeScript-Editor auf einigen Features der JSDT, etwa der Syntax-Einfärbung, basiert, um nicht das Rad komplett neu erfinden zu müssen. Dass JSDT gerade sehr aktiv ist (JSDT 2.0.0), spielt ebenfalls eine Rolle.
  • Eclipse Neon kommt mit einem Eclipse WTP JSON-Editor, der mit einem JSON-Schema erweiterbar ist. Typescript.java benutzt ihn, um einen Editor für tsconfig.json und tslint.json für die Completion zu haben.
    zerr4

JAXenter: Wo wir gerade von deinem Plug-in reden: An welchen Features arbeitest du gerade?

Angelo Zerr: typescript.java. Mehrer Features habe ich schon implementiert:

Bald könnten wir ein äußerst interessantes Eclipse-Plug-in für Angular 2 fertigstellen.

JAXenter: Und welche Features planst in zukünftigen Releases?

Angelo Zerr: typescript.java enthält im Moment noch keine anderen Features über die existierenden Eclipse TypeScript-Plug-ins hinaus. Ich würde gerne Refactoring, Call Hierarchy, Open Type usw. integrieren.

Aber das aufregendste Feature, das ich implementieren möchte, ist Angular2 Eclipse. Sobald ich typescript.java veröffentlicht habe (was in ungefähr einem Monat geschehen sollte) und dieses TypeScript-Issue eingearbeitet ist, könnten wir ein äußerst interessantes Eclipse-Plug-in für Angular 2 fertigstellen. Meine andere Idee ist es, angular-cli zu integrieren, um Angular-2-Projekte, -Komponenten, usw. mit Eclipse herstellen zu können.

Lesen Sie auch: Angelo Zerr über den JavaScript- und AngularJS-Support in Eclipse

Ich hoffe, dass typescript.java vielen TypeScript- und Angular2-Entwickler etwas bieten kann. Ich würde mich außerdem freuen, wenn die JBoss-Tools- und die MyEclipse-Leute mein Projekt in ihre Produkte integrieren und wir zusammenarbeiten können, um es weiter zu verbessern. Eclipse Neon wird einen Debugger für JavaScript (TypeScript ist also Teil meiner Pläne) mitliefern, wohingegen Webclipse (ein Produkt von MyEclipse) bereits über einen Debugger für TypeScript verfügt.

Natürlich ist jeder dazu eingeladen, am Projekt mitzuwirken.

JAXenter: Vielen Dank für diese Einsichten!

Angelo_ZerrAngelo Zerr ist enthusiastischer Java-EE-Entwickler, Eclipse Committer und Autor des Projekts tern.java, das die Basis des AngularJS-Plug-ins für Eclipse darstellt. Neben weiteren Open-Source-Projekten wie XDocReport hat Angelo die Eclipse E4 CSS Engine verfasst und Beiträge zu Eclipse Nebula geleistet. Zusammen mit dem JSDT-Projektteam arbeitet er in seiner Freizeit an einer Verbesserung des JavaScript-Supports in Eclipse. Angelo lebt in Saint Paul Trois Châteaux im Süden von Frankreich.
Geschrieben von
Dominik Mohilo
Dominik Mohilo
Dominik Mohilo studierte Germanistik und Soziologie an der Goethe-Universität in Frankfurt. Seit 2015 ist er Redakteur bei S&S-Media.
Kommentare

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu: