Angular: clientseitig programmiert man heute «eckig»

Wo wir heute stehen, was das Entwickeln von Browser-Applikationen anbelangt und wie der Arbeitsaufwand beim Erstellen einer «Single Page Web-Applikation» enorm verringert werden kann, möchte ich Ihnen in diesem Blog-Beitrag zeigen.

Als ob die 30 Jahre dazwischen gar nicht vergangen wären, erinnere ich mich heute noch an das Arbeitszimmer meines Vaters. Dort stand der Plattenspieler. Stunden habe ich damit verbracht, den Liedern von Elvis oder den Abenteuern von Kasperli zu lauschen, die – wie von Zauberhand – irgendwie aus diesem runden schwarzen Stück Plastik zu kommen schienen.

Heute rufe ich beim Autofahren – wie von Zauberhand – mittels Sprachsteuerung meine Lieblingsmusik aus der Cloud auf. Die Zeiten ändern sich, weil sich die Technologien ändern, die uns zur Verfügung stehen. Auch beim Entwickeln von Web-Applikationen. «Angular» (dt. «eckig») in seiner neusten Version verhält sich nämlich zu JavaScript von 1998 in etwa so wie Spotify zu Musik-Kassetten.

Von krabbelnden Ameisen zu asynchronen Wunderwerken

Die ersten Gehversuche meinerseits, was das Entwickeln von Browser-Applikationen anbelangt, waren inspiriert von krabbelnden Ameisen, die meinen Mauszeiger verfolgten oder Schneeflocken, die gemächlich über den Bildschirm rieselten.

Wie ich im Artikel «JavaScript, jQuery und Angular im Vergleich» bereits gezeigt habe, hat sich seither einiges getan. Zum Glück! Es war nämlich ein Graus, dass unterschiedliche Browser mit unterschiedlichen Document Object Models und gar unterschiedlichen AJAX-Handlern gearbeitet haben.

Die Zeiten, in denen man sozusagen alles «von Hand» machen musste, sind aber glücklicherweise vorbei.

Frameworks wie «jQuery» haben uns das Leben als Entwickler vereinfacht. «AngularJS» – die erste Version der «Angular»-Idee – hat es dann mit dem Leitspruch «Nicht vereinfachen, sondern sich gar nicht mehr drum kümmern müssen.» geschafft, HTML zu dem zu machen, was es von Anfang an hätte sein können, hätte man anno dazumal schon gewusst, was man heute alles damit anstellen will.

Ja, Sie dürfen den letzten Satz nochmals lesen. ?

OK, Angular! Und jetzt? Wie weiter?

2014 wurde die zweite Version von Angular angekündigt. Nicht alle waren glücklich. Ich auch nicht!

Es galt, «TypeScript» zu lernen und sich – wie «richtige» Software-Entwickler – an Dinge zu halten, von denen man als ursprünglicher Web-Designer eigentlich gern verschont geblieben wäre: Typisierung, Objekte, Vererbung etc. Die Erfahrungen aus dem Leiten von Kursen wie dem Kurs: JavaScript für Softwareentwickler («JSFSEN») haben mir dabei sehr geholfen.

Ich tat mich also – wie so manch anderer – relativ schwer damit, das neue Angular zu lernen, denn nur schon das Setup für eine einfache «Hallo Welt!»-Applikation hat mich zurückschrecken lassen. Es braucht rund 20 Dateien, damit «Hallo Welt!» angezeigt wird, wenn man sich an die «Best Practices» halten will.

Ich blieb wie der sprichwörtliche «Schuster» bei meinen «Leisten».

Doch dann kam der Tag, an dem ich zum ersten Mal die drei Buchstaben C, L und I hinter dem Wort «Angular» sah. Das war der Beginn einer grossen Freundschaft.

«CLI» für «Angular» ist wie «BettyBossi» für die gestresste Hausfrau

«CLI» steht für «Command Line Interface».

Ja, ich weiss aus eigener Erfahrung, dass man heute teilweise (wieder) erklären muss, was eine «Command Line» überhaupt ist. Wenn man aber «Angular»-Applikationen entwickeln will, lohnt es enorm, sich mit dem Weiss-auf-Schwarz eines «cmd.exe» anzufreunden.

Nur schon die Begrüssung auf der offiziellen Homepage von «Angular CLI» https://cli.angular.io/ zeigt, in der Kürze liegt die Würze:

Tatsächlich genügt nach der Installation von «Angular CLI» eine einzige Zeile Code, um eine «Hallo Welt!»-Applikation zu erstellen:

ng new digicomp-app

Diese Zeile beispielsweise «zaubert» folgende Ordner-Struktur auf die Festplatte des Ausführenden:

Der Ordner «e2e» (für «end to end testing») lässt die Herzen jener höher schlagen, die ihre Applikation gerne automatisiert testen lassen, um einen Haufen Zeit und Nerven zu sparen. Unter https://angular.io/guide/testing finden sich die entsprechenden Anleitungen und Ausführungen.

Der Ordner «node_modules» enthält nach ein paar Sekunden Downloadzeit über 800 Module, die einem das Entwickeln von Software vereinfachen. Und um alle möglichen Herausforderungen zu meistern, finden sich im Internet noch viele mehr und können dazu installiert werden.

Der Ordner «src» schliesslich enthält die eigentliche Applikation:

Die App ist auf Anhieb funktionsfähig und ausführbar. Um einen Webserver braucht man sich auch nicht zu kümmern, denn die folgende Code-Zeile startet grad einen und öffnet die Applikation im Browser:

ng serve –open

Mein Browser zeigt…

… und macht mich damit ziemlich happy.

Es kann losgehen – und das nach wenigen Sekunden

Um die Idee von «Angular CLI» zu verdeutlichen, lohnt es sich, in den Ordner «src/app» zu schauen, der vorhin generiert wurde:

In diesem Ordner finden sich …

• … eine CSS-Datei, die sich um das Aussehen der Komponente kümmert
• … eine HTML-Datei, die die Anzeige (View) der Komponente definiert
• … eine SPEC.TS-Datei, die die Tests zur Komponente definiert
• … eine TS-Datei, die die Logik (Model & Controller) der Komponente definiert

Die vier Dateien sind bereits sauber nach den offiziell empfohlenen «Best Practices» erstellt und sauber miteinander verknüpft. Das heisst, ich kann mit dem Entwickeln loslegen. Und das nach einer einzigen (Kommando-)Zeile.

Sollten Sie jetzt – so wie ich anno dazumal – auf den Geschmack von «Angular CLI» gekommen sein und die Scheu vor ersten «Angular»-Gehversuchen verloren haben, empfehle ich Ihnen das offizielle Tutorial auf https://angular.io/tutorial.

Oder Sie besuchen einen Workshop: End-to-End – Moderne Webanwendungen mit Angular 2 und ASP.NET Core («END2EN»), wenn sie nicht nur «gehen», sondern gleich «abheben» wollen. ?

So oder so:

ng generate viel spass