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


Facebook-App als Seitenreiter zu einer Fanpage hinzufügen

Autor*in: Stefan Oswald


Technologie


Um einer Facebook-Seite (Fanpage) eine eigene Seitenreiter-App hinzuzufügen, ist ein kleiner Workaround notwendig. Hinweis: Die Voraussetzungen, um überhaupt eine Seitenreiter-App erstellen zu können, ist ein Developer Account bei Facebook. Nach dem Erstellen der Seitenreiter-Anwendung kopiert man einfach die App-ID, fügt diese in den unten stehenden Link ein, ruft die URL im Browser auf und wählt …


Beitrag lesen
22
JAN
14

Grunt concurrent und time-grunt

Autor*in: Florian Müller


Technologie


Gestern Abend bin ich auf einen Artikel gestoßen, welcher sich mit der Optimierung von Grunt Tasks beschäftigt hat. Vieles davon ist schon im Einsatz, aber eins hat dann doch noch gefehlt – die Parallelisierung. Dies habe ich heute morgen testweise bei einem Projekt integriert. Um vergleichbare Ergebnisse zu bekommen, welche unabhängig von anderen Build Tasks des …


Beitrag lesen
29
SEP
16

YouTube Data-API v2 ist tot.

Autor*in: Benjamin Hofmann


Technologie


Wer es noch nicht mitbekommen hat, Google stellt die Version 2 seiner Data API für YouTube ein. Die Ankündigung für die Abschaltung der v2-API kam bereits im März 2014. Mehr Informationen gibt es hier: https://www.googlewatchblog.de/2015/04/youtube-data-api-viele/ Einen Migration-Guide von Google gibt es hier: https://developers.google.com/youtube/v3/migration-guide


Beitrag lesen
22
APR
15

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