Revision 600: Live

Working Draft

Willkommen zur 600ten Revision unseres Podcasts, die wir am Sonntag, den 7. Januar 2024, in Form einer live abgehaltenen Fishbowl-Diskussion mit etwas über zwanzig Gästen durchgeführt haben. Wir haben dabei über drei verschiedene Themenblöcke gesprochen, die wir per Voting bestimmt haben:

1. Web Components
2. Erwartungen an den Framework-Jungle 2024
3. Design Systeme

Unsere Teilnehmerschar bestand aus ehemalige Gästen wie z.B. Marvin Hagemeister, Jens Grochtdreis oder Alexander Lichter, aber auch aus vielen neuen Gesichtern. Darüber haben wir uns sehr gefreut!

Schaunotizen

[00:10:38] Web Components

Wir starteten mit den Web Components. Zunächst ging es darum, ob Web Components überhaupt „einsatzbereit“ seien. Und wir diskutierten, wie sich Web Components mit anderen Frontend-Frameworks verbinden lassen. Zum Glück gab es bereits Artikel darüber, wie Frameworks und „Custom Components“ erfolgreich kombiniert werden können, wie z.B. der „Custom Components Everywhere„. Besonders spannend war, dass die Seite Reddit anscheinend teilweise bereits mit Web Components erstellt wurde. Dies war jedoch noch nicht für alle Benutzer verfügbar – in diesem Fall half der Inkognito-Modus und das Ausloggen -, aber dann konnten die Teilnehmer die neue Webseite mit Web Components betrachten. Wir haben natürlich über den Shadow DOM und die damit einhergehenden Probleme gesprochen. Wenn jemand noch auf der Suche nach überzeugenden Argumenten für Web Components auf Management-Ebene war, empfahlen wir das Lesen dieses Web Components Elevator Pitchs.

• https://nolanlawson.com/2023/12/30/shadow-dom-and-the-problem-of-encapsulation/
• https://blog.jim-nielsen.com/2023/html-web-components-an-example/
• https://custom-elements-everywhere.com/
• https://jakelazaroff.com/words/web-components-eliminate-javascript-framework-lock-in/
• https://gomakethings.com/the-elevator-pitch-for-web-components/
• https://openui5.org/
• https://sap.github.io/ui5-webcomponents/
• https://livebook.manning.com/book/micro-frontends-in-action/
• https://caniuse.com/declarative-shadow-dom

[00:56:54] Erwartungen an den Framework-Jungle 2024

Die Diskussion ging nahtlos zum Thema Frontend-Frameworks über. Zuerst haben wir darüber gesprochen, ob die Teilnehmer:innen zu dieser Zeit „FOMO“ (Fear of missing out) in Bezug auf die aktuellen Frontend Frameworks empfanden. Danach haben wir erörtert, wie viele verschiedene Frameworks tatsächlich in der „Realität“, also in Arbeitsprojekten, verwendet wurden. Einige Personen haben ihre Erfahrungen geteilt, wie sie Frameworks oder Bibliotheken wie NPM-Pakete komplett ausgetauscht haben. Wir haben die Vor- und Nachteile der Verwendung von Bibliotheken im Allgemeinen besprochen. Marvin hat in diesem Zusammenhang passenderweise den Link zu einem XKCD-Comic über Bibliotheken im Web geteilt.

• https://workingdraft.de/595/ (HTML over the Wire)
• https://workingdraft.de/576/ (Qwik)
• https://workingdraft.de/584/ (Solid & Solidstart)
• https://workingdraft.de/552/ (Frontend-Development im Jahr 2023)
• https://workingdraft.de/405/ (rollup.js)
• https://marvinh.dev/blog/speeding-up-javascript-ecosystem-part-8/
• https://vinxi.vercel.app/
• https://github.com/unjs/
• https://workingdraft.de/565/ (Quo Vadis Frontend-Tooling?)
• https://socket.dev/blog/when-everything-becomes-too-much

[01:59:55] Design Systeme

Mit einer fulminannten Überleitung von Hans gelangten wir zum Thema Design Systeme. Sowohl in der Live-Diskussion als auch im Chat gingen viele Themen hin und her. Wir sprachen darüber, wer in Projekten für die Instandhaltung von Pattern Libraries verantwortlich ist. Es stellte sich auch heraus, dass es bei dem Thema viel um Kommunikation geht. Die Teilnehmenden nannten Tools wie Storybook, story.to.design, Histoire, UXPin und Ladle. Schließlich eröffnete Hannah die Diskussion darüber, wer tatsächlich mit „Design Systemen“ und nicht nur Pattern Libraries im Designbereich, beispielsweise mit Figma, arbeitete.

• https://histoire.dev/guide/getting-started.html
• https://help.figma.com/hc/en-us/articles/360045003494-Storybook-and-Figma
• https://story.to.design/
• https://www.uxpin.com/
• https://ladle.dev/
• https://fractal.build/
• https://www.youtube.com/watch?v=qtAu1V6v6YQ (Exploring the Anatomy of Design Systems)
• https://esilva.net/sociotechnical/sociotechnical-architecture_why-and-what.html