Web-Entwicklung macht langsam Spaß
Tags: web20
Kategorie Software Engineering | 3 Kommentare »
Vor 5 Jahren echauffierte ich mich an dieser Stelle über die vielen Unzulänglichkeiten in der Web-Entwicklung mit JavaScript. Aus Selbstschutz habe ich die Web-Entwicklung deshalb in den letzten Jahren gemieden. In den letzten Monaten habe ich hingegen eine umfangreichere Web-Anwendung entwickelt. Wie steht es also heute um die professionelle Web-Entwicklung?
Verwendete Frameworks
Die von einem Kollegen und mir entwickelte Web-Anwendung besteht aus einem Python Backend (dazu später vielleicht mal mehr) und einer Single-Page App sowie natürlich einer obligatorischen Datenbank (in diesem Fall MongoDB). Gehostet wird die App und das Backend auf einer privaten Cloud Foundry Instanz.
Für das Frontend habe ich folgende Frameworks gewählt:
Huch, kein Framework für Dependency Management? Und keins für Testautomatisierung? Und was ist eigentlich mit einem Werkzeug für den Zusammenbau der Applikation?
Die gute Nachricht: Angular bringt alles mit, was man für die Entwicklung einer professionellen Web-Anwendung benötigt. Nach der Installation von Node.js und Visual Studio Code benötigt es keiner weiteren manuellen Downloads. Das oben beschriebene Setup gelingt in wenigen Schritten:
Alleskönner Angular CLI
Zunächst installiere ich Angular CLI einmalig auf meinem Rechner:
npm install -g @angular/cliAb hier übernimmt Angular CLI die weitere Arbeit. Eine neue Angular Applikation generiere ich mittels:
ng new web-app
cd web-app
git init .
git commit -a -m "initial commit"Das Hinzufügen von Bootstrap und den NgBootstrap Komponenten für Angular ist denkbar einfach:
npm install bootstrap --save
ng add @ng-bootstrap/ng-bootstrapGenauso einfach kann ich weitere Komponenten hinzufügen, etwa die FontAwesome Icon Bibliothek.
ng add @fortawesome/angular-fontawesomeAlle Abhängigkeiten werden in der package.json Datei geführt und ein anderer Entwickler kann durch ein simples
npm installalle Abhängigkeiten auf seinem Rechner installieren.
Testautomatisierung ist bereits vorkonfiguriert. Folgender Befehl startet einen Chrome Browser und führt alle Testfälle bei Code Änderungen aus:
ng testAnalog kann ich einen Live HTTP Server starten, der die App nach Code Änderung kompiliert:
ng serveMöchte ich eine auslieferbare Version erstellen, reicht:
ng build --prodAngular CLI und NPM decken die Bereiche Bauwerkzeug und Management von Abhängigkeiten ab. Doch Angular CLI kann noch mehr! Gibt es eine neue Angular Version, reicht ein simples
ng updateHier aktualisiert Angular CLI aber nicht nur die Bibliotheken, sondern passt auch die Struktur des Projekts an und nimmt auch Änderungen am Quellcode vor. Alle Änderungen sind vorbildlich dokumentiert, hier ein kleiner Auszug der Ausgabe beim Upgrade von Angular 9 auf 10 dieser Tage.
... ** Executing migrations of package '@angular/core' ** ▸ Missing @Injectable and incomplete provider definition migration. As of Angular 9, enforcement of @Injectable decorators for DI is a bit stricter and incomplete provider definitions behave differently. Read more about this here: https://v9.angular.io/guide/migration-injectable Migration completed. ▸ ModuleWithProviders migration. As of Angular 10, the ModuleWithProviders type requires a generic. This migration adds the generic where it is missing. Read more about this here: https://v10.angular.io/guide/migration-module-with-providers Migration completed. ▸ Undecorated classes with Angular features migration. In version 10, classes that use Angular features and do not have an Angular decorator are no longer supported. Read more about this here: https://v10.angular.io/guide/migration-undecorated-classes Migration completed. ...
Ein Traum, oder?
Komponentenorientierte Entwicklung
Angular gibt eine klare Struktur für den Aufbau der Web-App vor. Dazu definiert Angular verschiedene Konzepte wie Modul, Direktive, Service, Guard, Template und Komponente. Eine Komponente repräsentiert einen Teil der Web-Anwendung, zum Beispiel die Seitenleiste zur Navigation. Eine Komponente besteht aus
- einem HTML Template,
- einem Stylesheet,
- einer Testklasse
- und der Komponentenklasse.
Komplexere Logik lagert man in Services aus. Zugriffsberechtigungen sichert man über Guards ab. Module fassen mehrere Komponenten, Services, Guards, usw. zusammen.
Natürlich muss man die verschiedenen Bestandteile nicht manuell erstellen, sondern erledigt dies wiederum mittels Angular CLI. Hier erstelle ich ein neues Modul „sidebar“ und fügen diesem eine gleichnamige Komponente hinzu:
ng generate module sidebar
ng generate component sidebar/sidebar --flatDas spart viel Tipparbeit und stellt sicher, dass man alle Konventionen einhält, ohne diese im Detail kennen zu müssen :-)
Typisierung mittels TypeScript
Ein weiteres Highlight, das vor 5 Jahren noch nicht ausgereift war, ist TypeScript. TypeScript ist ein objektorientierter Aufsatz für JavaScript. Man könnte auch sagen, TypeScript macht JavaScript erst zu einer echten Programmiersprache :-)
Angular selbst ist in TypeScript geschrieben und der gesamte von Angular CLI erzeugte Code ist ebenfalls TypeScript. Da Browser TypeScript nicht direkt ausführen können, ist ein entsprechender Compiler in den Bauprozess eingebunden.
TypeScript sorgt für eine Typisierung des Codes. IDEs wie Visual Studio Code können deshalb viel mehr Fehler schon während der Programmierung erkennen, als mit einer rein dynamischen Programmiersprache möglich wäre. Hinzu kommt, dass für die gängigen JavaScript Bibliotheken Typdefinitionen zur Verfügung stehen und die Typprüfung diese somit auch abdeckt.
Das Arbeiten mit normaler Klassenlogik (im Gegensatz zu JavaScripts Prototypen) und die konsequente Typisierung sind ein echter Produktivitätsgewinn und erleichtern gerade Angular Neulingen wie mir die Einarbeitung.
Fazit
Fünf Jahre später und die Welt sieht wirklich anders aus! Web-Entwicklung macht wieder Spaß und geht leicht von der Hand. Die Kombination aus Angular, TypeScript und Visual Studio Code fühlt sich wie GWT in perfekt an :-)
Die Wahrheit ist aber auch, Angular ist ein sehr komplexes Framework. Ich habe auch nach mehreren Monaten nicht alle Möglichkeiten erkundet oder gar ausgereizt. Die Dokumentation von Angular ist vorbildlich und im Netz findet man unzählige Tutorials und Videos. Das macht den Einstieg leichter.
Die Komponentenorientierung ist perfekt gelöst. Vorbei die Zeiten von sich gegenseitig überschreibendem Stylesheets und ähnlichen Krämpfen.
Klar, Web-Entwicklung ist nicht mehr das fixe Erstellen einer HTML und CSS Datei. Mein node_modules/ Verzeichnis mit allen Abhängigkeiten summiert sich auf 620MB bzw. gut 62.000 Dateien. Das Kompilieren einer Release Version (ng build –prod) dauert knapp 100 Sekunden. In der täglichen Arbeit merke ich davon allerdings nichts, da all dies von Angular CLI und NPM verwaltet wird.
Dank Angular CLI muss ich mich nicht auch noch in verschiedene Werkzeuge für Bauprozess, Testausführung oder das Management von Abhängigkeiten einarbeiten, sondern kann mich auf die Erstellung meiner Applikation konzentrieren. Am Ende fällt eine technisch perfekt optimierte (Tree Shaking, Minifizierung, Lazy Loading, etc.) Web-Applikation raus, die ich ohne manuelle Eingriffe in die Cloud pushen kann. Was will man mehr?
620 MB? Und die muss ich mir als Nutzer runter laden? :-)
Wie groß ist denn der kompilierte Stand?
Ist die Webanwendung nur für den internen Gebrauch oder kann ich mir die auch als öffentlicher Nutzer ansehen?
Ich freue mich, das es dir Spaß macht.
Aus verschiedenen Gründen ist dein Setup aber nichts für mein tägliches Arbeiten. Ich habe das dringende Bedürfnis das zu erklären. Aber das ist zu viel für einen Kommentar hier. Es wird wohl eher ein Blogeintrag. Oder mehrere.
@Martin in den 620mb sind auch verschiedene Kompiler und Zeugs enthalten. Das kompilierte Bundle ist nicht so groß, aber doch immer noch viel
Natürlich musst du nicht 620MB laden. Ich habe die exakte Zahl vergessen, aber bei erstem Kontakt mit leerem Browser Cache beträgt der Download ca. 1,5MB. Eigentlich sollten die meisten Seiten erst nach dem Login nachgeladen werden, aber das klappt momentan noch nicht. Hatte aber keine Zeit und Lust den Fehler zu suchen.
Wie Hermes schon schreibt, sind auch alle Compiler enthalten sowie alle Frameworks im Quellcode. Dadurch kann ich über wenige Variablen zum Beispiel Bootstrap anpassen, etwa ob ich Farbverläufe auf meinen Buttons haben möchte :-)
Bei der App handelt es sich leider um eine firmeninterne Anwendung, die sich nur aus dem internen Netz des Kunden erreichbar ist. Ich kann deshalb leider keinen Link setzen :-(