Working Draft

Download our free app to listen on your phone

Download on the App StoreGet it on Google Play

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

More episodes from Working Draft