Working Draft

By Vanessa Otto, Peter Kröner, Hans Christian Reinl, Stefan Baumgartner, Christian »Schepp« SchaeferNews Technology Education How To Tech News

Working Draft episodes

May 05, 2022Revision 528: Svelte und SvelteKit
Wieder einmal zu Gast ist Jon Uhlmann (@jonnitto), mit dem wir diesmal über Svelte und SvelteKit sprechen.
Schaunotizen
[00:00:58] Svelte und SvelteKit
Bei Svelte hat sich in den letzten Jahren wieder einiges weiterentwickelt. Treu geblieben sind sie sich allerdings, denn wie gewohnt ist die Dokumentation sehr hilfreich, übersichtlich und umfassend. Im Gegensatz zu React ist Svelte tatsächlich „reaktiv“. Dabei kommt es mit einem eigenem Compiler. Seit einiger Zeit gelangt SvelteKit an immer mehr Beliebtheit. Das Framework ist der Nachfolger von Sapper. Wer von Sapper auf SvelteKit migriert, kann sich an den offiziellen Guide halten. Zwei tolle Eigenschaften von Svelte sind der eingebaute Accessibility-Support und die Unterstützung von Transitions und Animations, die an die Transitions von AlpineJS erinnern. Wer sich nun für Svelte interessiert und auf der Suche nach mehr Informationen ist, kann bei der Webseite vom SvelteSummit vorbeischauen. Erst vor Kurzem fand die diesjährige Remote Konferenz statt. Die Videos findet man auf YouTube: Svelte Summit Sprint. Um sich sonst auf dem Laufenden zu halten, empfehlen wir den Svelte Blog mit monatlich erscheinenden Artikeln.
Weitere Revisionen mit Jon Uhlmann
Revision 504: Analytics- & Tracking-Tools
Revision 490: Alpine JS & Petit Vue mit Jon Uhlmann
Revision 496: Tooling rund ums Frontend Tooling.
Weitere Revisionen zum Thema Svelte
Revision 413: Svelte
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 13 min
April 26, 2022 Revision 527: Vue State Management
Diese Revision ist Vanessa in die Rolle der Gästin geschlüpft und hat Schepp etwas zum Thema „State Management“ in Vue erzählt.
Schaunotizen
[00:00:00] Vue State Management
Wir beginnen mit einem Rückblick auf Vue 1 und 2 und die dort etablierten Global- und Options APIs
Vue 3 hat dann, angelehnt an Reacts Hooks, die Composables und die Composition API eingeführt, sowie die Reactivity API, die einen alle aus der Prop-Drilling-Hölle befreien – wenn man denn weiterhin ohne waschechten Store arbeiten wollte.
Ist die Entscheidung für einen Store gefallen, dann hieß der früher immer Vuex und war der vom Vue-Team mitentwickelte und offiziell empfohlene. Parallel dazu hat sich ein weiterer Store entwickelt, nämlich Pinia, und der ist über die Zeit so gut geworden, dass er nun offiziell zu Vuex 4’s Nachfolger ernannt wurde. Pinia spielt besser mit TypeScript und auch mit Server-Side-Rendering zusammen, und lässt sich ähnlich wie die oben genannte Composition API ansteuern.
Und dann gibt es schließlich noch Harlem.js, das sich auf die Composition- und Reactivity APIs stützt, und somit nur mit Vue 3 arbeitet.
Vanessas Fazit lautet: Benutzt gerne weiter Vuex, wenn Ihr es schon im Einsatz habt, setzt aber auf Pinia, wenn Ihr neue Projekte aufsetzt. Harlem.js hingegen sagt ihr vom Ansatz her spontan nicht so zu.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 1 min
April 19, 2022 Revision 526: Technisches SEO in 2022
Schepp und Peter durften Martin Splitt begrüßen (Developer Advocate bei Google, Web, Twitter) um mit ihm über technische Suchmaschinenoptimierung zu plaudern und mit den übelsten SEO-Mythen aufzuräumen.
Schaunotizen
[00:01:00] Technisches SEO in 2022
Seit Martins letztem Besuch in der Revision 351 hat sich einiges getan! Der JS/CSS-Support des Google Bots ist mittlerweile sehr umfassend, nur mit bestimmten Web APIs wie Geolocation und Service Worker weiß der Crawler nichts anzufangen. Martin empfiehlt zur Fehlersuche die Search Console um JS/API-Probleme wie auch versehentliche Ressourcen-Blockaden gegenüber dem Google Bot aufzudecken. Wir quatschen aus diesem Anlass über die robots.txt, den x-robots Tag (aka HTTP-Header), Sitemaps, rel="nofollow" und rel="sponsored" und die im Zuge all dieser Informationen aufkommenden Herausforderungen des Indizierens von Web-Content. Wo der SEO ist, ist aber auch der Schlangenölverkäufer meist nicht fern, und so kommen wir nicht umhin, auch ein wenig über obskure Seo-Magie, Verschwörungstheorien und Cargo-Cult-SEO (und Entwicklung) zu diskutieren. Am Ende des Tages schlägt nichts eine saubere URL-Struktur mit Sitemap, Meta-Informationen (vorzugsweise via JSON-LD) und einem Auge auf den Web Vitals. Zuletzt verweisen wir noch auf den , Schepps Auftritt bei WWSIV und plädieren für einen gesunden und entspannten Umgang mit SEO!
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 31 min
April 12, 2022 Revision 525: Beyond Tellerrand und andere Konferenzen in Zeiten von Corona
Schepp und Peter durften Marc Thiele (Web, Twitter) als Gast begrüßen, der viel über die Beyond Tellerrand (und seine übrigen Aktivitäten) in der Vergangenheit und der durch Corona verseuchten Gegenwart zu erzählen hatte.
Community Draft
Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige Web-Entwickler:innen und ‑Designer:innen Community näher zusammen zu bringen.
Mit unserem Slack-Channel wollen wir noch näher zusammen kommen – gerade in der Zeit, in der die Remote-Arbeit ein „normaler“ Bestandteil unserer täglichen Arbeit geworden ist.
Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste Konferenz finden, auf der wir uns treffen können und job-suchende und -anbietende zusammen bringen.
Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund um Webentwicklung.
Alle Infos unter draft.community.
Schaunotizen
[00:01:22] Konferenzen und Corona
Marc rekapituliert zunächst die Geschichte der Beyond Tellerrand und erzählt, was die Konferenz sein soll und was nicht (eine weitere, trockene Techtalk-Tristesse). Unter Corona-Vorzeichen ist’s mit dem Konferenzgeschäft knifflig und weder Konferenzverstalter Marc noch Konferenzcontentgenerator Peter sehen in Online/Hybrid-Formaten einen 1:1-Ersatz. Angepasste Formate wie Marcs Stay Curious sind eine Notlösung, mehr nicht. Da trifft es sich gut, dass es demnächst eine weitere Beyond Tellerrand in Düsseldorf gibt und noch Tickets zu haben sind! Sollte das entweder euren Konferenzhunger nicht stillen oder Düsseldorf für euch zu südlich liegen, hat Marc außerdem die aXbt in Hamburg im Angebot.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 11 min
April 06, 2022Revision 524: Design Systeme
Für diese Ausgabe haben wir uns wieder einen Gast eingeladen: David Jost, mit dem wir in über einer Stunde das Thema „Design Systeme“ von all seinen Seiten beleuchten. Und das sind mehr, als man in seiner Naivität gemeinhin glaubt.
Community Draft
Wir haben eine Slack Community ins Leben gerufen, um die deutschsprachige Web-Entwickler:innen und ‑Designer:innen Community näher zusammen zu bringen.
Mit unserem Slack-Channel wollen wir noch näher zusammen kommen – gerade in der Zeit, in der die Remote-Arbeit ein „normaler“ Bestandteil unserer täglichen Arbeit geworden ist.
Lasst uns über Themen austauschen, die unsere Branche beschäftigen, die nächste Konferenz finden, auf der wir uns treffen können und job-suchende und -anbietende zusammen bringen.
Tritt unserer Slack Community bei und werde Teil der Diskussion zu Themen rund um Webentwicklung.
Alle Infos unter draft.community.
Schaunotizen
[00:01:21] Design Systeme
TED 2005 – Richard St. John – 8 secrets of success
Frank Chimero – The Web’s Grain
Stephen Hay – Responsive Design Workflow
Nathan Curtis
Una Kravets – The new responsive: Web design in a component-driven world
Inclusive Components – Cards
Open UI Project
UI Engineering Podcast
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 46 min
March 31, 2022 Revision 523: Wenig TypeScript und viel Vermischtes
Die traditionell-quartalsweise erscheinende Podcast-Folge, in der Stefan und Peter das eine Thema planen und 80% der Zeit über das andere Thema sprechen, ist da!
Unser Sponsor
Diese Folge wird gesponsert von Zühlke. Zühlke ist ein weltweit tätiger Innovationsdienstleister und kreiert neue Ideen, Produkte und Geschäftsmodelle für seine Kunden aus unterschiedlichsten Branchen. Das Unternehmen ist überzeugt, dass Innovationen und technologischer Fortschritt unsere Wirtschaft und Gesellschaft positiv verändern können, und erarbeitet deshalb gemeinsam mit seinen Kunden nachhaltige Lösungen für die Zukunft. Die 1.300 Mitarbeitenden sind in 10 Ländern tätig und betreuen Kunden aus den Bereichen Medizintechnik & Gesundheit, Industrie, Telekommunikation, Transport und Mobilität oder Banken & Versicherungen.
Mehr über die offenen Web Development-Stellen bei Zühlke erfahrt ihr unter www.zuehlke.com/de/moderne-webentwicklung-bei-zuehlke. Antonia Pförtner, Katharina Baehr und Tobi Rudolphi freuen sich auch über einen unkomplizierten Austausch auf LinkedIn!
Schaunotizen
[00:01:45] TypeScript 4.6 ist da
TS 4.6 bringt wenig neues, aber da wir in den TypeScript-Folgen eh immer über interessantere Themen sprechen, ist uns das ganz recht. Stefan erzählt etwa davon, wie er im Klassenkampf die Seiten gewechselt hat und ein an das ES-Iterator-Protokoll andockendes Lazy-Iterator-Tool mit ECMAScript-Klassen gebaut hat. Im Rahmen dessen freut er sich sogar darüber, dass das erste kleine TS-Feature, etwas präziser dem ES-Standard folgende Unterstützung für super(), jetzt da ist und postuliert Use Cases rund um Open Telemetry. Peter hat derweil Kunden mit einen Use Case für Static-Blöcken in Klassen, die uns vorletztes Mal noch nicht überzeugen konnten. Allgemein halten wir fest, dass früher (= Java/OOP/POOP), zwar vieles, nicht alles schlecht war und dass auch in Programmierbüchern von 1997 noch Weisheit zu finden ist. Im Verhältnis 20/80 widmen wir uns der weiteren langweiligen und marginalen TypeScript-Updates (dies, das, jenes) sowie den wesentlich spannenderen Themen rund um Typannotationen, Funktionsüberladung, TS-Performance, SWC, Demo, Runtime-Typen und TS-Specs, Language Server Protocol, Rust, Zig, Java und Homepagebaukästen
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
57 min
March 23, 2022Revision 522: MFs Architektur mit Webpack Module Federation und Dapr
Es geht in die nächste Runde Micro-frontends! Diesmal erzählt Simon Dittlmann (LinkedIn, Twitter), Head of Digital Architecture and Analytics bei ZEISS uns über viel über horizontale und vertikale Schnitte. Außerdem berichtet er über die technische Umsetzung der Micro-Frontends bei ZEISS mit Hilfe von Webpack Module Federation und Dapr.
Unser Sponsor
Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.
Weitere Informationen zum Produkt und der Firma gibt es hier.
Schaunotizen
[00:01:38] MFs Architektur mit Webpack Module Federation und Dapr
Zunächst besprechen Simon, Schepp und Vanessa die Split-Arten horizontal vs. vertikal, wie in dem Blogpost Micro-frontends decisions framework von Luca Mezzalira beschrieben. Weiterhin geht es um die Aufsetzung von Kompositionen und Routing in den Möglichkeiten Client-side, Edge-side oder Server-side. Ein neu geschaffenes Problem bei dem Einsatz von Micro-Frontends kann die Authentication und. Authorization sein. Simon stellt uns einen token basierten Login mit Split tokens und Phantom tokens vor. Im Anschluss geht Simon auf Rollen und attributbasiertes Rechtemanagement in verteilten System ein (siehe Open Policy Agent WebAssembly NPM Module und „How Netflix Is Solving Authorization Across Their Cloud„. Des Weiteren wird auf die Vor- und Nachteile von Polyrepositories und Monorepositories eingegangen, und wie mit Hilfe von Blackduck und OSS Review Toolkit (ORT) Lizensen überprüft werden können.
Verwandte Revisionen
Revision 511: Microfrontends bei REWE digital
Revision 492: Der aktueller Status von Webpack
Revision 407: Micro Frontends mit Project Mosaic
Revision 384: Micro-Frontends | Working Draft
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 24 min
March 16, 2022 Revision 521: WebBluetooth, WebUSB und WebNFC
Nico Martin (Web, Twitter), Google Developer Expert und Webtech-Nerd, erklärt in dieser Revision Schepp und Peter alles zu WebBluetooth, WebUSB und WebNFC!
Schaunotizen
[00:01:01] Peripherie-APIs
Es geht um Web NFC, Web USB, Web Blueooth und andere Peripherie-APIs aus dem Project Fugu (Working Draft berichtete in Revision 399). Während es Nico noch leicht fiel, Peter und Schepp die simple API für NFC im Web zu erklären, wird’s bei USB schon kniffliger. Zum anderen gibt’s neben Web USB auch noch Web HID und Web Serial, wobei gerade letzteres Sinnhaftigkeit ausgiebig diskutiert wird. Im Rahmen von Web USB empfiehlt Nico ein Tutorial, webadb.js und einen Talk von Sebastian Golasch. Wir lassen natürlich auch die Sicherheitsdiskussion nicht außer acht, debattieren die Kombination aus Web USB und der File System Access API und Nico berichtet von seinen persönlichen Web-USB-Abenteuern mit Tiptoi. Beim Thema Web Bluetooth jammert Peter zunächst über seinen einst gescheiterten Kampf gegen proprietäre Protokolle, bevor wir das Wesen von Bluetooth im Allgemeinen und Bluetooth LE (relevant für Web Bluetooth) im Speziellen beleuchten. Nico erzählt vom seinen Erfolgen in der webbasierten Ansteuerung einer Playbulb Sphere und davon, warum er am Ende dann doch lieber seine eigene Hardware gebastelt hat. Die Hauptzutaten: ein RaspberryPi, Node und bleno! Ergebnisse sind unter anderem die Ansteuerung einer kleinen LED Matrix (1, 2) und von Elektromotoren. Zum Ende hin diskutieren wir den deprimierenden Stand der Implementierung inkl. Webkit-Verweigerung, Sinn und Zweck von Peripherie-APIs und Tracking-Prevention (u.A. die von Webkit).
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 29 min
March 09, 2022Revision 520: Unit-Testing / Testing Library
Das Thema Testing begleitet uns seit vielen Jahren. Glücklicherweise scheint es immer leichter zu werden. Joe Ray Gregory (Twitter / Website), Senior Software Engineer und Trainier bei workshops.de, bringt uns diesmal das Framework Testing Library mit.
Psst, Geheimtipp: Joe verrät uns, dass es aktuell Early Bird Tickets für die Vue.js Konferenz in Berlin am 22. September gibt.
Unser Sponsor
Diese Folge wird gesponsert von lemon.markets, einem FinTech aus Berlin, das eine Trading API für Developer anbietet. Mit lemon.markets können über 8000 Aktien und ETFs per API gehandelt werden. Neben der Verwaltung des eigenen Portfolios können auch aktuelle und historische Kursdaten abgerufen werden. Developer in der lemon.markets Community automatisieren ihre Sparpläne, bauen sich eigene Integrationen in Tools wie Telegram und Slack oder entwickeln ihre eigenen Trading Apps oder Bots. In der lemon.markets Developer Community tauschen sich zudem schon über 500 Entwickler:innen zu allen Fragen rund um die Trading API und den Aktienmarkt aus.
Weitere Informationen zum Produkt und der Firma gibt es hier.
Schaunotizen
[00:01:36] Unit-Testing / Testing Library
Die Testing Library von Kent C. Dodds und anderen Beitragenden ist eine Familie von Bibliotheken, um Best Practices in das Testen zu bringen. Sie ist framework-agnostisch und kann daher mit Vue, React und Co. verwendet werden. Sie funktioniert mit Jest, Cypress und vermutlich auch Vitest (Obacht: Alpha!), aber auch alleinstehend benutzt werden. Im Laufe der Revision geht Joe darauf ein, was die Testing Library eigentlich ist, warum man sie nutzen sollte und wie man sie einsetzt. Dabei geht er auch darauf ein, dass es keine aktive Mitarbeit von seitens Facebook (Meta) seit Jahren mehr an Jest gibt. Außerdem gäbe es bei Jest das Problem des fehlenden ESM Supports.
Im weiteren Verlaufen gehen Hans, Vanessa und Joe auch auf die Testing Pyramide und Testing Trophy ein.
Besonders spannend bei der Testing Library sind die Guiding Principles.
Sonstige Links
Playwright, der Nachfolger von Puppeteer
https://conf.vuejs.de/
https://workshops.de/
Verwandte Revisionen
Revision 462: Jest
Revision 442: „Next Level“-End-to-End-Testing
Revision 436: Frontend Unit-Testing
Revision 375: Frontent-Testing
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 26 min
March 03, 2022 Revision 519: Modernisierung einer Legacy Frontend-Codebase
Gast Florian Dreier (Github) erzählt Peter und Vanessa von der Modernisierung eines Legacy-Frontends!
Unser Sponsor
Diese Folge wird gesponsert von REWE digital. Seit 2014 digitalisiert das Kölner Unternehmen den Lebensmitteleinzelhandel mal so richtig. Mit knapp 500 agilen Expert:innen setzt man auf eigenverantwortliches Arbeiten, Teamautonomie, modernste Technologien, individuelle Weiterentwicklung und Innovation an jeder Ecke. So leistet man wertvolle Pionierarbeit für einen der größten Handels- und Touristikkonzerne Europas.
Neugierig geworden? Dann schaut jetzt auf rewe-digital.com, LinkedIn, Twitter oder
YouTube vorbei und hört in REWE digitals eigenen Tech-Podcast Codes und schmerzlos rein!
Schaunotizen
[00:02:00] Modernisierung einer Legacy-Frontend-Codebase
Florians Arbeitgeber war mit einem alten Frontend auf Basis von Googles Closure-Tools gesegnet, das modernisiert werden wollte. Zunächst listen wir die zahlreichen Gründe für das Ersetzen des alten Stacks auf (schlechte DX, Inkompatibilität zum restlichen JS-Ökosystem) und sprechen dann über die Vorarbeiten für die Umstellung. Wichtig dabei: Buy-In auf allen Ebenen ereichen, POCs zusammenhacken und nicht einfach alles neu schreiben.
Für die Überführung der Closure-Module in ES-Module wurde ein Konverter programmiert, die TypeScript-Migration mithilfe des Closure-TS-Coverters halbautomatisch und Schritt für Schritt durchgeführt. Natürlich kommen wir nicht umhin, die Entscheidung für React in Anbetracht der zahllosen Alternativen zu hinterfragen, ebenso die Entscheidung für Vite anstelle von Webpack, diskutieren die Ob und Wie von Feature-Entwicklung während des Umbaus und fragen uns natürlich auch, wie es zu verhindern ist, dass der aktuelle Code schlimmes Legacy 2.0 wird. Am Ende fasst Florian die positiven Ergebnisse des Umbaus zusammen und gibt Abschließende Empfehlungen für vergleichbare Migrationsprojekte.
Diskutiert die Folge mit uns in unserem Community-Slack: https://draft.community/
1 hr 28 min