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


OOP 2015 – Tag 3

Autor*in: Marc Kurzmann


Technologie // Über den Tellerrand


Heute ging’s gleich technisch los mit dem ersten Vortrag über Möglichkeiten zur Vereinfachung von Deployments und Abhängigkeiten zur Laufzeitumgebung. Goßes Problem stellt hier zum Einen die oftmals mühsame Bereitstellung der Laufzeitumgebung dar (insbes. Appserver, wie Tomcat etc.), zum Anderen bringt das eine große Abhängigkeit in den zu verwendenden Bibliotheken mit sich (Servlet-API). Einen interessanten Ansatz …


Beitrag lesen
30
JAN
15

WJAX 2017: Web-APIs, einfach oder?

Autor*in: Regina Staller


Technologie


Wie im letzten Blog von mir erwähnt wurde, habe ich auf der diesjährigen WJAX einen Vortrag über den effektiven sowie effizienten client- und serverseitigen Umgang mit Web-APIs besucht. Gehalten wurde dieser Vortrag von Thilo Frotscher. Die wesentlichen Themen aus dieser Session möchte ich hier gerne noch einmal vorstellen. Besonders im Bereich IBE/Metasuche bin ich schon …


Beitrag lesen
20
NOV
17

Mit HeidiSQL per SSH-Tunel auf Live-Systeme verbinden

Autor*in: Stefan Oswald


Technologie


Unsere Produktiv-Systeme akzeptieren aus Sicherheitsgründen keine Verbindungen mit dem MySQL-Server von externen Adressen. Dennoch möchte man manchmal mit einem anderen Tool als phpMyAdmin auf die Datenbanken sehen. Die Lösung hierfür ist ein SSH-Tunnel. Einfacher Hintergrund: Statt auf den normalen MySQL-Port verbinden wir uns über den SSH-Server mit dem Zielsystem. Dort angekommen können wir uns mit …


Beitrag lesen
23
APR
12

Open Graph Tags in der imx.Library

Autor*in: Bastian Schwarz


Technologie


Soeben habe ich eine neue Version des MetainfoGenerators bereitgestellt, der einen Builder und einen Renderer für die Open Graph Tags beinhaltet. Die Logiken zur Einbindung sind nicht im „Mock“-Smartyplugin enthalten, da die Logik sich von Portal zu Portal unterscheiden kann. Wicht dafür ist, dass die Open Graph Tags mind. aus title, image, url und type …


Beitrag lesen
04
SEP
12