Working Draft

In kleiner und gemütlicher Runde besprachen Stefan und Schepp, was es mit dem Konzept der Layered APIs auf sich hat und wie es derzeit so um HTTP/2 steht. Schaunotizen [00:01:20] Layered APIs Bei den Layered APIs handelt es sich um sowas wie eine im Browser mitgelieferte Standard-Bibliothek, welche neuen syntaktischen API-Zucker bereitstellt, ohne dazu auf neue API-Primitive zurückgreifen zu müssen. Die Idee dabei ist, den Entwicklern an den Standardgremien vorbei schneller bessere Werkzeuge zu liefern, die Sie zudem auch nur bei Bedarf hochfahren/laden können. Das hält die Browser schlanker. Da die neue APIs rein per JavaScript geschrieben sind und auf längst bestehenden APIs aufsetzen, können Browser, die diese Layered APIs nicht eingebaut mitbringen, diese Bibliotheken einfach aus dem Netz nachladen. Analog zu einem Polyfill. Dafür gibt es eine spezielle, neue und rückwärtskompatible Modul-Syntax. Der erste Kandidat für eine Layered API ist der KV Storage, den man jetzt per Origin Trial Verfahren auf seine Besucher loslassen kann. [00:26:18] The Right Way to Bundle Your Assets for Faster Sites over HTTP/2 Unser zweites Thema befasste sich nach längerer Zeit mal wieder mit HTTP/2. Anlass war der oben verlinkte Artikel, in dem getestet wurde, inwiefern veränderte Bundling-Strategien zu besserer Performance führen, und wo Dinge sich ins Negative verkehren. Das ist insofern relevant, als dass mittlerweile gut 50% aller Webseiten mit dem Prototoll ausgeliefert werden. Wir fanden außerdem beiläufig heraus, dass rund 75% aller Webseiten auf HTTPS laufen. [00:54:50] Keine Schaunotizen swc swc, der „speedy web compiler“, ist ein in Rust geschriebener, besonders schneller JavaScript-Transpiler, der laut eigener Aussage Feature-technisch mit Babel gleichauf liegt. sucrase sucrase ist ein Babel-Fork und verfolgt ähnliche Ziele. Diese werden in diesem Fall dadurch erreicht, dass verlangsamende, aber auch kaum benötigte Features aus Babel wegfallen. Darunter das Rückkompilieren zu älteren ES-Versionen. Dadurch wird sucrase also eher zu einem Metasprache-nach-Current-ES-Compiler. Feature Policy Playground Der Feature Policy Playground möchte eine Art „Can I Use“ für Feature Policy Features sein. Es geht zum einen um den aktuellen Browser-Support, als auch darum, auf die entsprechenden Explainer-Dokumente zu verlinken.

Eine Rarität! Das komplette Podcast-Kernteam vereint in einer Revision. Keine ganz so große Rarität: der Löwenanteil der Sprechzeit entfällt auf Peter, der einen Einblick in die Entwicklung einer Chrome-Devtools-Extension gibt. Unser Sponsor Diese Folge wird gesponsert von Flagbit aus Karlsruhe. Flagbit konzipiert, entwickelt und optimiert Online Shops für seine Kunden und sucht insbesondere Frontend Developer mit Angular und TypeScript Skills für die Entwicklung von (PWA) Storefronts. Mehr dazu erfahrt ihr unter flagbit.de/karriere/jobs. Schaunotizen [00:02:40] Chrome-Devtools-Development Für Warhol, ein Joint Venture von Peter und Hans, entsteht eine Browser-Extension, von deren Entwicklung Peter lang und breit berichtet. Zu den Herausforderungen zählt die Verteilung der einzelnen Extension-Bauteile über viele verschiedene Browsing Contexts, die Verwendung von TypeScript (@types/chrome hilft) und die nicht besonders strukturierte API-Dokumentation (für Extensions allgemein und für Devtools im Besonderen), in deren Angesicht Stack Overflow Gold wert ist. [01:09:02] Keine Schaunotizen Mask Compositing: The Crash Course Die CSS-Magierin Ana Tudor führt in die Geheimnisse von Mask Composition ein. Cache-Control for Civilians Cache-Control Header so erklärt, dass man es auch als Nicht-Performance-Nerd versteht. @pika/web JavaScript-Pakete ohne Buildprozesse und sonstigen Overhead im Browser benutzen! Ganz wie früher! Baldower Aus der Rubrik „Shameless Plug“: die Musik von Tobi Lessnow

Für diese Revision holten sich Schepp, Peter und Rodney Unterstützung von Yara Meyer (Principal Consultant bei , auf Twitter @whythecode) in Studio, um die Untiefen der Projektplanung zu erforschen. Schaunotizen [00:01:28] Requirements Engineering, Agilität und Wasserfälle Yara hat im Rahmen ihres Schaffens als Consultant schon so manches mehr oder weniger erfolgreiches Projekt begleitet und quatscht mit uns über Requirements Engineering, Agilität und alles, was in der Softwareentwicklung so schief läuft. Als ein großes Problem ist die Planung von Software durch Nicht-Software-Firmen zu nennen, die sich besser Requirements Engineering von einem extern Dienstleister eingekauft hätten. Das ist aber gar nicht mal so leicht zu verkaufen. Agilität (vor allem innerhalb von Legacy-Strukturen und großen Konzernen), Deadlines, Features und Milestones sind genau so Thema wie Berichte über ein paar Worst Cases vom Planeten Wasserfall.

Dieses Interview ist einer von 2 Teilen unserer Serie On Tour @ #ctwebdev. Anfang Februar waren wir bei einer brandneuen Konferenz zu Gast, der <c’t webdev> in Köln. Nachdem der heise-Verlag ja schon erfolgreich andere Entwicklungsfelder wie zum Beispiel JavaScript mit Konferenzen beackert, schien es wohl Zeit zu sein, das Thema „Frontend“ in den Fokus zu nehmen. Wir würden sagen: Die Premiere ist gelungen! Und netterweise durften wir vor Ort wieder ein paar der Sprecher interviewen. Robert Weber: Inclusive Design Einer davon war Robert Weber, freiberuflicher Frontend-Entwickler aus der Gegend um Berlin, der auf der Konferenz einen Vortrag zum Thema „Inclusive JavaScript“ gab. Darüber wollten wir gerne mehr wissen. denn von „Inclusive Design“ haben wir wohl mal gehört, aber was genau steckt hinter „Inclusive JavaScript“?

Zur aktuellen Sendung ist Markus Schober (zur Website) zu uns gestoßen und wir sprechen mal wieder ein typisches Frontend-Thema an. Aber hört selbst… Schaunotizen [00:01:03] Tailwind CSS Tailwind CSS ist ein CSS Utility-Framework. Markus führt uns in die Thematik ein und wir nehmen es zum Anlass die Vor- und Nachteile von Utility-Frameworks zu beleuchten. Dies mündet in einer fröhlichen Diskussion mit der Fragestellung: Will man als Entwicklerin und Entwickler wirklich kleinteilige Klassen im HTML anpassen oder sollte Styling-Komposition eher im CSS stattfinden? Hier noch einige weiterführende Links zum Thema: In Defense of Utility-First CSS CSS Utility Classes and „Separation of Concerns“ Functional Programming, CSS, and your sanity On the Growing Popularity of Atomic CSS Kiss My Classname [00:51:03] Keine Schaunotizen Global Diversity CFP Day Am 15. März findet der Global Diversity CFP Day in Köln statt. Falls ihr zu einer unterrepräsentierten Gruppe auf vielen Tech-Konferenzen gehört und Interesse daran habt in Zukunft vielleicht als Sprecher präsenter zu werden, dann ist der Global Diversity CFP Day genau das richtige.

Dieses Interview ist einer von 2 Teilen unserer Serie On Tour @ #ctwebdev. Anfang Februar waren wir bei einer brandneuen Konferenz zu Gast, der <c’t webdev> in Köln. Nachdem der heise-Verlag ja schon erfolgreich andere Entwicklungsfelder wie zum Beispiel JavaScript mit Konferenzen beackert, schien es wohl Zeit zu sein, das Thema „Frontend“ in den Fokus zu nehmen. Wir würden sagen: Die Premiere ist gelungen! Und netterweise durften wir vor Ort wieder ein paar der Sprecher interviewen. Mirjam Bäuerlein: Quereinstieg in die Frontendentwicklung & Conference Buddy Eine davon war Mirjam Bäuerlein, Frontend-Entwicklerin bei Cosee in Darmstadt, die auf der Konferenz die Closing-Keynote über „Component-based CSS“ gab, und die wir gerne zu zwei Dingen befragen wollten: Zum einen hat uns interessiert, wie sie als vormalige Office Managerin und Hundetrainerin den Quereinstieg in die Webentwicklung gemeistert hat – und das auch noch in unter zwei Jahren! Zum anderen haben wir über ein wichtiges Side-Project von Ihr gesprochen, nämlich über Conference Buddy, das das Problem angeht, dass wir auf Konferenzen (oder Meetups) oft nicht genau wissen, wie wir uns anderen Personen annähern und mit Ihnen erfolgreich „socializen“ können.

Mit unseren ewigen, aufopferungsvollen Bestrebungen, gebildetes Halbwissen zu verbreiten, holen wir die eigentlichen Experten an Land. So auch geschehen mit dem heutigen Gast Timo Zöller der meinte, wenn die Working Draft Runde meint das M in MobX stünde für Magie, könnte man doch mal aufklärend zur Seite stehen! Schaunotizen [00:02:02] MobX MobX ist eine Bibliothek für reaktives, auf Pub Sub aufbauendes State Management. Einfach in der Anwendung, umfangreich in der Ausführung. Wir analysieren Modelle, kommen dahinter wie ähnlich MobX zu Vues Reactivity Model ist und fragen uns wie es um die Komplexität bestellt ist. [00:26:14] MobX State Tree Hat man mit der Freizügigkeit von MobX ein gewisses Maß an Sauhaufen erreicht, hilft der MobX State Tree das ganze wieder in nachvollziehbare Bahnen zu lenken. [00:34:11] Next.js Weil der Baumgartner auch immer wieder auf sein Lieblings-React-Framework zurück kommt, vergleichen wir die Euphorie mal mit Echtwelt Projekten und erkennen Uneinigkeit. [00:56:24] Keine Schaunotizen Immer.js Vergessen wir Immer! Immutable states durch einfache APIs. CSS Remedy CSS Reset für die moderne Welt. Mit allen Anführungszeichen der Welt.

In dieser Revision ließen sich Schepp, Peter und Stefan von Johannes Busch (@jomungand) alles über aktuellen Angular-Angelegen ausrichten. Schaunotizen [00:01:20] Angular Die Sendung beginnt mit Geschichten aus dem Krieg: Schepp erzählt von seinen Angular-Anfängen und wir hören nichts gutes über die schlechte alte Zeit, vor allem die Migration von V1 (AngularJS) zu V2. Danach beginnen wir uns halbwegs systematisch in die Grundkonzepte von Angular einzufuchsen (Module, Provider, Templates), spechen ausführlicher über TypeScripts Decorators und die heutige Angular-Compiler-Pipeline (sowie dessen Vorgänger AtScript). Weiter geht es mit Angular-Templates, Direktiven, Syntax und Data Binding. Beim Thema Datenverbeitung kommen wir auf Redux (im Angular-Kontext) sowie ngrx mit RxJS sowie diverse Alternativen zu sprechen. Zwischendrin geht es natürlich auch immer wieder um Upgrades und Breaking Changes sowie die Konkurren (v.a. React und Ember inkl. Next und Nuxt, Googles internes Wiz Framework und Exoten wie Stimulus). Als gern verwendete Third-Party-Libs listet Johannes unter anderem Angular Material, das Component Dev Kit und Nx Workspace auf. Über die Themen Server-Side Rendering und Lazy Loading kommen wir auf Ivy, die neue aber bald verfügbare Rendering Engine von Angular zu sprechen. Zum Einstieg in die Angular-Welt empfiehlt Johannes neben den offiziellen Docs das Programm von Workshops.de, die Sandbox von StackBlitz, die Angular Checklist sowie Konferenzen in Deutschland, Belgien und nordischen Gefilden.

Hans und Peter durften zum wiederholen Male Vanessa Böhner als Gast begrüßen (zuletzt in Revision 367 dabei, außerdem mit Webseite und Twitter ausgerüstet) und diesmal über alle Formen und Spielarten des (Frontend-) Testings sprechen. Schaunotizen [00:00:52] Frontend-Testing Wir quatschen über die tägliche Praxis von Unit Testing, End-To-End-Test, Integration Tests und Snapshot-Tests mit Jest und JSDOM aber auch über Paradigmen wie Test Driven Development und Regressionstests. Den Wert von Tests als Dokumentation stellen wir tatsächlicher Dokumentation und Code-Kommentaren gegenüber. Anhand der Test-Pyramide besprechen wir den Wert unterschiedlicher Testverfahren (z.B. Monkey Testing vs. End-to-End-Tests mit Tools wie Selenium, Cypress und Puppeteer sowie seiner Firefox-Variante), Testing bei Oracle und den zweifelhaften Wert von Test-Coverage. Vanessa empfielt die diversen Werke von Kent C. Dodds als Einstieg in die Welt des JS-Testings. Zum Ende hin streifen wir kurz Visual Regression Testing, ziehen den naheliegenden Vergleich zwischen Softwaretest und Sport und kommen auf das allseits beliebte Thema des Reinregierens von „denen da Oben“ in die Software-Entwicklung zu sprechen. [00:59:32] Keine Schaunotizen ai-driven Podcast Die Ankündigung aus Revison 362 ist wahr geworden: Tobias‘ Podcast über KI ist da! Veranstaltungen mit Vanessa Wer Vanessa live erleben möchte hat dazu in den nächsten Wochen in Hamburg in zweimal in München Gelegenheit!

In dieser Revision ist Jakob Holderbaum zu Gast und redet mit uns über das Thema Micro Services. Jakob ist als Consultant für verschiedene Firmen tätig und organisiert die Think About! Conference. Schaunotizen [00:02:27] Micro Services Was versteht man eigentlich unter dem Begriff Micro Services und wie positionieren sich Micro Services im Vergleich zu einem Monolithen? Wir sprechen darüber was unabhängige Deploybarkeit ist und wie diese die Zusammensetzung von Teams verändern kann? Zum Thema Domain Driven Design haben wir die Revision 314 aufgenommen. Außerdem sprechen wir über die Vor- und Nachteile von Micro Services und gehen dabei vor allem auf das Thema End To End Tests ein. Wie macht mans richtig, wie kann man Monitoring und Logging betreiben und was sind Contract Tests. Hier noch einige Literatur die empfohlen wurde: Sam Newman: Principles of Micro Services, Building Micro Services Martin Fowlers Blog James Lewis [00:48:38] Keine Schaunotizen Think About Conference Think About! ist eine Tech-Konferenz die ihren Fokus nicht nur auf Technologie legt, sondern auch Design und unseren Einfluss auf die Gesellschaft betrachtet. Sie findet am 23. & 24. Mai in einem Kino in Köln statt und es gibt bis zum 15.2. auch noch Early Bird Tickets zu kaufen. Wir werden auch am Start sein.