Working Draft

Die Working Draft Revision fand live und remote statt. Die Hosts haben in dieser besonderen Revision zusammen mit den Teilnehmern über drei verschiedene Themenblöcke gesprochen:

• Web Components
• Erwartungen an den Framework-Jungle 2024
• Design Systeme

Der Working Draft freute sich sehr ehemalige Gäste wie Marvin Hagemeister, Jens Grochtdreis, Alexander Lichter, und noch viele mehr, aber auch viele neue Gesichter begrüßen zu dürfen!

Schaunotizen [00:10:38] Web Components Gestartet wird die Live 600 mit dem Thema der Web Components. Wie oft geht es erst einmal darum, ob Web Components schon „einsatzbar“ sind. Spezieller wird besprochen, wie es sich verhält Web Components und andere Frontend Frameworks miteinander zu verbinden. Glücklicherweise gibt es bereits Artikel darüber, wie man Frameworks und „Custom Components“ gut verbinden kann, wie z.B. den „Custom Components Everywhere„. Spannend ist vor allem, dass die Seite Reddit anscheinend nun auch teilweise mit Web Components gebaut wird. Das sei noch nicht für alle ausgerollt – da hilft der Incognito Modus und ausgeloggt sein – aber dann können die Teilnehmer:innern die neue Seite mit Web Components betrachten. Ebenfalls besprochen wird der „Shadow Dom und das Problem der Enkapsulierung„. Wer noch auf der Suche nach guten Argumenten für Web Components in der Management-Ebene ist, sollte sich den „Web Components Pitch“ durchlesen.

• 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 Recht nahtlos wird in das Thema der Frontend Frameworks übergegangen. Besprochen wird zuerst, ob die Teilnehmer:innen aktuell „FOMO“ (Fear of missing out) verspüren, was die aktuellen Frontend Frameworks betrifft. Im Anschluss erörtern sie, wie viele verschiedene Frameworks in der „Realität“, also bei Projekten für die Arbeit, tatsächlich eingesetzt werden. Einige Personen erzählen über die Erfahrungen, Frameworks bzw. Bibliotheken wie NPM Packages auch wieder komplett auszutauschen. Es werden die Für und Wider des Einsetzens von Bibliotheken generell besprochen. Marvin schickt im Chat hierfür passenderweise den Link zu einem XKCD über Bibliotheken im Web.

• 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 wundervollen Überleitung von Hans geht es wieder in das Thema der Design Systeme. Sowohl in der Live Diskussion als auch im Chat wurden viele Themen angesprochen. Im Konkreten erzählen Teilnehmer:innen wer bei ihren Projekten für die Instandhaltung von Pattern Libraries sind. Anscheinend setzen sich oft einige Entwickler:innen und Designer:innen zusammen und erörtern die Unterschiede und Gemeinsamkeiten von Designs und Implementierungen. Es werden Tools wie Storybook, story.to.design, Histoire, Unpix und Ladle  genannt. Am Ende eröffnet Hannah noch die Diskussion, wer eigentlich tatsächlich mit „Design Systemen“ und nicht nur Pattern Libraries, im Design z.B. mit Figma umgesetzt, arbeitet.

• 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