JavaScript Days Berlin und online 2022

Datum: 7. November 2022
Autor*in: Magdalena Piller


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.


Kommentare

Selber kommentieren:






Weitere Beiträge zum Thema Technologie


Out now: gråd extra, Ausgabe 4!

Autor*in: Christine Pfleger


infomax   //   Projekte   //   Strategie & Konzeption   //   Technologie   //   Tourismus   //   Über den Tellerrand   //   User Experience & Design


gråd extra - Das Magazin für e-Tourism | Ausgabe 4 | 2018 | Schwerpunkt "Ideen"
gråd extra - Das Magazin für e-Tourism | Ausgabe 4 | 2018 | Schwerpunkt "Ideen"

Es ist geschafft und wir sind sowas von stolz: Die vierte Ausgabe unseres Magazins gråd extra ist erschienen! Auf 78 Seiten haben wir uns ganz und gar dem Schwerpunkt „Ideen“ verschrieben.


Beitrag lesen
07
DEZ
18

Twitter Account-ID auslesen

Autor*in: Stefan Oswald


Technologie


Twitter bemüht sich nach Kräften, die numerische ID seiner Benutzer-Accounts zu verstecken. Nur dumm, dass genau diese ID für die Twitter-Integration im imxSocialMediaReader benötigt wird… Früher war das kein Problem, da Twitter da noch auf der Tweet-Seite des Accounts öffentlich einen RSS-Link publizierte; das ist derzeit aber leider nicht mehr der Fall. Wie kommt man …


Beitrag lesen
20
OKT
11

Einrichten des GoogleTagManagers

Autor*in:


Technologie


Zum Hintergrund: seit kurzem verwenden wir den GoogleTagManager(GTM) bei den Hörnerdörfern. Ziel ist es die diversen Analytics Accounts die hier verwendet werden (Bolsterlang, Fischen etc.) unter einen Hut zu bringen. Hierzu kann man im Tagmanager Profil Regeln und Tags erstellen, anhand derer das Tracking dann ausgeführt wird (dazu später mehr). Ermöglicht  wird das Ganze über …


Beitrag lesen
26
AUG
14