In diesem Teil der Serie geht es darum zu zeigen wie man zusätzlich zum Server-Teil auch den Client Teil, die HTML-UI bzw. den dazugehörigen JavaScript Code mit TypeScript schreiben kann. Zusätzlich werde ich noch ein paar Worte zur modernen Web-Platform verlieren. (jQuery?! Den Kram braucht man doch nicht mehr!)

 

Der Vergleich

Dieses mal habe ich sogar einen Vergleich der gleichen App in JavaScript und TypeScript für euch. Ich habe mir dafür die HTML-UI Beispiel-App Ziegenphobie aus dem Entwickler-Wiki genommen, sie an die neuen User App APIs angepasst, und dann einmal als JavaScript-App „ZiegenphobieJS“ und als TypeScript-App „ZiegenphobieTS“ auf GitHub für euch bereit gestellt.

Wer bei sich die TypeScript-App kompilieren will kann sich im Blog Post von letzter Woche anschauen was man dafür braucht und wie man das macht. Die genau Anleitung steht in der README des dazugehörigen GitHub Repositories.

Was ist anders?

Im Grunde nicht viel. Ich habe im großen und ganzen wirklich nur den bestehenden JavaScript Code in TypeScript Entsprechungen umgeschrieben.

Konkret heißt das, dass es jetzt eine echte Klasse LightManager gibt die echte Methoden und interne Felder für alles nötige enthält. Zusätzlich hab ich an Stellen an denen es sinnvoll oder nötig war die TypeScript-übliche Typisierung hinzugefügt und den Code etwas formatiert.

jQuery? Web Platform!

Wer etwas genauer hinschaut der wird fesstellen, dass es jQuery in der TypeScript-App nicht mehr gibt. Und das ist auch kein Fehler, sondern Absicht.

jQuery ist ein tolles Framework und war lange lange Zeit nicht aus dem Web weg zu denken für Webentwickler. Es hatte definitiv seine Daseinsberechtigung. Es hat für einige weit oder weniger weit verbreitete Browser bestimmte Features nachgerüstet und alle wichtigen Features für Webentwickler in einer einheitlichen und einfachen API zusammengefasst. Vieles war quasi nur „Syntactic Sugar„, anderes waren so genannte „Polyfills“. Und ein Punkt der mit dazu beigetragen hat, dass jQuery so erfolgreich ist: Es ist wirklich einfach und wird gefühlt bei jeder JavaScript Frage auf StackOverflow als Antwort verwendet. 😀

Nur mittlerweile hat sich die Web-Platform entwickelt. Alle entscheidenden Features und APIs sind mittlerweile, teilweise auch durch indirekten Druck durch jQuerys Existenz, offizielle Web-Standards und in allen relevanten Browsern nativ implementiert. Beispiele wären hier z.B. das Selektieren von Elementen („$(‚#myId‘)“ vs. „document.querySelector(‚#myId‘)“) oder das hinzufügen von CSS-Klassen („.addClass(’someClassName‘)“ vs. „.classList.add(’someClassName‘)“).

Für (jQuery-)Features wie z.B. das Ein-/Ausblenden von Elementen sieht das noch ein bisschen anders aus. Auch hier gibt es bereits sehr mächtige native Implementierungen innerhalb der Web-Platform (Web Animations API), aber der Support hängt hier noch etwas hinterher (thanks IE, Edge, Safari & JavaFX …). Dafür ist die Web-Platform mächtiger und am Ende natürlich auch performanter und wer sich das Leben dahingehend einfacher machen möchte, der denkt sicher sowieso an komplette Single-Page-Application Frameworks wie Angular oder React. Aber dazu vielleicht ein andermal mehr.

Daher verwende ich jQuery in neuen Projekte nicht mehr und empfehle  darauf zu verzichten. Das herunterladen von jQuery kostet beim laden einer App/Webseite einfach unnötig Zeit und Resourcen, die am Ende die Seite gleich doppelt langsamer machen. Einmal natürlich weil es heruntergeladen, geparset und ausgeführt werden muss (und währenddessen alles andere warten muss, #RenderBlocking), und weil es nur eine unnötige JavaScript-Schicht zwischen meiner Business-Logic und dem Browser schafft.

Viel mehr will ich hier zu dem Thema jetzt gar nicht sagen, damit kann man ganze eigene Blogs füllen. 😀

Alles zusammen

Wie man bei genauerem Hinsehen sehen kann wird dieses Mal mit einem einzigen „build“ beides kompiliert und an den richtigen Ort gelegt, der Server-Code und der Client-Code.

Mit dieser App, einmal in JavaScript und einmal in TypeScript, habt ihr denke ich einen guten Vergleich was der eigentliche Unterschied zwischen der herkömmlichen Entwicklung mit JavaScript ist, und wie es mit modernsten (Web) Techniken aussehen kann.

Viele der Vorteile aller in dieser Reihe bisher gezeigten Möglichkeiten die TypeScript und auch die Web-Platform einem eröffnen zeigen sich erst, wenn man eine Weile damit arbeitet und Erfahrung sammelt. In der Regel lohnt sich das ganze aber, gerade wenn man nicht nur kleine (Experimentier-)App baut.