Digital Tourism Blog

Ein kurzes Wrap-Up meiner diesjährigen Teilnahme an den JS-und Angular-Days. Leider wurde in diesem Jahr die Konferenz nicht als volle „Hybrid“-Veranstaltung gehalten, so dass nur eine geringe Auswahl an Sessions online zur Verfügung standen. Sehr schade! Trotzdem fanden sich noch einige spannende Themen.

Angular-State-Management mit NgRx und Effects

Fabian Gosebrink stellte in diesem Workshop das Projekt @Ngrx/store (ngrx.io) vor: Eine Redux-Implementierung für das Angular-Framework. Redux ist ein Pattern zur Zustandsverwaltung in Anwendungen und sieht vor, dass man jederzeit einen prognostizierbaren State erstellt, hält und abfragen kann.

Die Prinzipien einer Zustandsverwaltung (=Store) sind klar: One Way Dataflow und Single Source of Truth. Die Komponenten kommunizieren nicht mehr direkt mit dem Backend sondern mit den sog. Smart Components, welche dann eben stateful sind. Alle anderen Komponenten sind entsprechend stateless. Im Store erfolgen State-Manipulationen mit Actions, Reducer-Funktionen bilden die Status-Übergänge ab, Komponenten lesen den State mit sog. Selectors aus. Um die asynchronen Backend-Services einzubinden, wird @ngrx/effects verwenden. Ein Effect ist ein Service, welcher auf einen Action-Aufruf reagiert, den asynchronen Backend-Aufruf durchführt und ggfs. eine weitere Action feuert.
Im Live-Coding-Teil wurden diese Konzepte anhand einer simplen Implementierung einer Todo-Liste demonstriert. Alles straightforward – wie immer für einfach Usecases – und gleichzeitig wurde auch schon ersichtlich, wieviel Boilerplate-Code hier rauspurzelt. Eine Organisation in gute Package-Strukturen ist hier unabdingbar.

Kurze Erwähnung bekamen dann noch die Frameworks ngrx/component-store und @ngrx/data für CRUD-Operationen.

3D im Web mit Babylon.js

In diesem Vortrag stellte Max Marshall Babylon.js vor, ein OpenSource-Projekt von Microsoft, eine auf WebGL basierende 3D-Engine. Sie bietet Tools zum Erstellen von Objekten, Szenen, Lichtquellen, Texturen, etc. und das auf Basis von HTML, CSS und JS. Die Vorteile liegen somit auf der Hand: Cross Platform fähig, einfach zu integrieren und eine simple Url zum Teilen genügt. Ziel dieses Workshops war nun eine Angular App mit einer Babylon.js-Integration zu entwickeln. Einen Super-Einblick in die API erhält man über den Babylon-Playground: https://www.babylonjs-playground.com/#TAZ2CB. Ein geniales Tool, in welchem man – unterstützt duch Code-Completion – schon mal erste Dinge „malen“ kann.

Im Live-Coding-Teil der Session wurde dann die Integration in Angular demonstriert. Im Prinzip ganz einfach, aber zu beachten ist, dass Babylon analog zu Angular eventbasiert ist und ebenso einen Lifecycle hat. Um hier Konflikte zu vermeiden, sollte man die beiden Welten also nur so viel wie nötig verheiraten. Für das Beispiel des Workshops, in welchem die Callbacks überschaubar waren, klappte das jedenfalls noch sehr gut. In jedem Fall hat das Hands-On-Coding hier sehr viel Spaß gemacht.

GraphQL APIs bauen – ein praktischer Einstieg mit Apollo Server

Nicht gerade das brandneueste Thema und auch schon seit einiger Zeit bei Infomax als Platform-API im Einsatz.
Nils Hartmann stellte zunächst die API und ihre Konzepte vor: „GraphQL is a query language for APIs and a runtime for fulfilling those queries with your existing data“ (graphql.org). Die wesentlichen Api-Features sind Queries, Mutations und Subscriptions. Das Motto des Api-Design ist „Backend for Frontend“, so dass der Zugriff vom Frontend aus so smart wie möglich ist. Zentraler Punkt einer API ist das Graphql-Schema, in welchem die Queries, etc. beschrieben sind. Spannender Punkt ist hier, dass es immer nur eine Version eines Schemas gibt, so dass der Schema-Entwurf schon gut durchdacht sein sollte.

Apollo Server ist eine Open-Source-Implementierung der GraphQL Spezifikation, bietet aber auch mittlerweile viele – teilweise auch kommerzielle – Services rund um das Thema an. Der Einsatz ist als Standalone Server oder als Middleware für Express möglich. Mit dabei ist die Apollo Sandbox, ein Tool zur Ausführung der Queries, wobei es hierfür auch etliche andere Tools am Markt gibt. Spannendes Apollo-Feature ist die sog. Federation, mit welchem sich mehrere Apis zusammenführen lassen, so dass die GraphQL-Api die zentrale Anlaufstelle für alle Queries des Frontends sein kann. Zur Bereitstellung einer API sind schliesslich sog. Resolver-Funktionen pro definiertem Schema-Typ zu implementieren, welche dann auf die finale Datenquelle zugreifen (DB, Rest und andere GraphQL APIs).

Im Live Coding Teil des Workshops gab es einen Roundtrip durch die vorgestellten Konzepte, inkl. einem Ausblick auf die üblichen Kontext-Themen wie Caching, Unit-Tests, Performance und Einbindung in IDEA. Alles in Allem ein gut gemachter Workshop.