JavaScript Days Berlin und online 2022

Datum: 7. November 2022
Autor: 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


HTML5 Polyfill

Autor: Sascha Nützel


Technologie


Nachdem das „required“- Attribut im Safari nicht funktioniert, bin ich auf die Suche nach einem Polyfill gegangen. Dabei bin ich auf folgende Bibliothek gestoßen: https://github.com/aFarkas/webshim Die Einbindung gestaltet sich recht simpel und wird hier https://github.com/aFarkas/webshim#installation-and-usage gut erklärt. Es besteht auch die Möglichkeit, nicht alle Module einzubinden sondern nur vereinzelt gebrauchte (z.B. ‚forms‘). Das Portalseitige Minify muss für …


Beitrag lesen
31
AUG
16

Caching – Probleme mit Permissions

Autor: Florian Müller


Technologie


Ich war gerade an einem Ticket um eine Lösung für das leidige Thema des Caching der Autosuggest zu lösen. Das grundlegende Problem ist, dass das Autosuggest recht umfangreich ist (gecached bis zu 2MB). Sollte nun ein User ein Wort eingeben und kein Autosuggest vorhanden sein, wurde dieser gebaut und gecached. Die hat auch mal gerne eine …


Beitrag lesen
13
JAN
17

lory

Autor: Benjamin Hofmann


Technologie // User Experience & Design


Und schon wieder habe ich eine kleine schöne Javascript-Library gefunden: lory. Diesmal ist es keine Lightbox-Lösung wie PhotoSwipe gestern, sondern ein simpler Slider. Auch dieses Skript ist auf den mobilen Anwendungsfall ausgelegt und kann von Haus aus mit Swipes umgehen. Auch das sogenannte Infinite-Sliding ist möglich und auch dieses Skript lässt sich über RequireJS nutzen …


Beitrag lesen
23
SEP
16

Sofort und per Klick: Die neue Tourism Tech Alliance (TTA) vereinfacht den Datenaustausch für Destinationen

Autor: Christine Pfleger


infomax // Strategie & Konzeption // Technologie // Tourismus // Über den Tellerrand


Die Partner der Tourism Technology Alliance (TTA)
Die Partner der Tourism Technology Alliance (TTA)

Touristische Informationen einfach und plattform-übergreifend dort verfügbar machen, wo sie gebraucht werden: Dieses Ziel steht hinter dem Zusammenschluss der führenden Innovatoren im Bereich Travel Technology zur Tourism Tech Alliance (TTA). Ab sofort ist zwischen den Systemen der Partner ein Konnektor verfügbar, der einen einfachen und bedarfsgerechten Standard-Datenaustausch ermöglicht.


Beitrag lesen
21
OKT
22