476 Folgen

Der wöchentliche News-Podcast für Webdesigner und -entwickler.
Supported uns bei Patreon: https://patreon.com/workingdraft

Working Draft Vanessa Böhner, Peter Kröner, Hans Christian Reinl, Rodney Rehm, Stefan Baumgartner, Kahlil Lechelt und Christian Schaefer

    • Technologie
    • 4.8 • 51 Bewertungen

Der wöchentliche News-Podcast für Webdesigner und -entwickler.
Supported uns bei Patreon: https://patreon.com/workingdraft

    Revision 459: Bazel

    Revision 459: Bazel

    Hans, Stefan und Schepp reden heute mit Lukas Holzer von Dynatrace über Bazel, dem neuen Build Tool aus dem Hause Google.

    Unser Sponsor


    Geschmeidige Animationen, Webfonts, hochauflösende Fotos – eine Website muss heute viel anbieten. Oft scheint zu gelten: Viel hilft viel. Das führt aber zu durchschnittlichen Webseitegrößen von zwei MByte und der Browser muss fast ein halbes MByte JavaScript-Code verdauen. Lädt eine Seite dann zu lange, klicken Nutzer weiter. Auch Google hat offiziell angekündigt, dass die „Page Experience“ und damit die Performance zum Ranking-Faktor wird. Erfahre mehr dazu auf der Online-Konferenz c’t webdev am 9. Februar. Vertiefe dein Wissen am Folgetag in Workshops, u. a. zu Mobile App Entwicklung mit React Native.
    Hol dir 15% Rabatt mit dem Code WEBDEVPOD21! Weitere Infos unter: heise.de/s/w58X


    Schaunotizen

    [00:01:52] Bazel
    Lukas erzählt uns von seinen Erfahrungen mit Bazel, einem polyglotten Build-System, das schnelle, inkrementelle Builds sowohl lokal als auch auf CI/CD ermöglicht. Ziel von Bazel ist es einen sehr genauen Abhängigkeitsbaum zu definieren, der erlaubt nur Änderungen zu kompilieren. Wir vergleichen mit Gradle, Facebook’s Buck. Bazel startete als internes Tool bei Google, damals noch Blaze genannt. Da Google alles in einem großen Monorepo entwickelt, zahlt es sich aus wenn Zehntausenede Entwickler nicht immer alles durchbauen müssen, um kleine Änderungen festzustellen. In Bazel schreibt man eigene Build-Files mit Starlark, einem Python Dialekt. Mit Hilfe dieser Dateien baut Bazel einen Abhängigkeitsbaum auf, kann Kompilate dank Remote Cache Server sehr gut cachen. Der Unterschied zu Systemen wie Nx liegt vor allem darin, dass jedes Artefakt genau bestimmt werden kann und man so unabhängig von Git Commits wird. Zusätzlich erlaubt man den Einzug von schnellen und iterativen Entwicklungs-Tools, wie ES Dev Server, ES Build, u.ä. Zu guter Letzt reden wir auch noch von Sketchmine, einem ambitionierten Projekt aus Angular Sketch Files zu generieren. Videos gibt es dazu auch: Stahlstadt.js, Angular Connect. Lukas ist übrigens Contributor bei den Node.js Regeln von Bazel und freut sich über viel Feedback!

    • 1 Std. 13 Min.
    Revision 458: Cypress

    Revision 458: Cypress

    In dieser Revision dürften wir Priyanka Kore und Tobias Struckmeier von der Adesso als Gäste begrüßen und mit Ihnen über End-to-End-Testing mit Cypress sprechen.
    Schaunotizen

    [00:00:29] Cypress
    Bevor sich unser Gespräch auf Cypress einschießt, klären wir, inwiefern Tests hilfreich sind, welche Software-Test-Methodiken es gibt, und wie diese alle sich zur berühmten Testing-Pyramide zusammenfügen:

    End-to-End-Tests (E2E) decken das ganze System ab und sind damit die umfassendsten Tests, sie durchzuführen stellt einen allerdings vor so manche Herausforderung:

    ggf. fehlt die nötige Infrastruktur dafür
    das Setup ist aufwändig
    sie laufen langsam und sind ressourcenhungrig
    das Management von Testdaten ist nicht einfach
    sie sind schwer in bestehende Projekte zu bringen
    und sie harmonieren nicht immer mit hochdynamischen SPA

    Die meisten der genannte Probleme lassen sich darauf zurückführen, dass E2E-Tests über das recht eigene Selenium Webdriver gesteuert und sie in üblichen Browsern auf diversen Betriebssystemen durchgeführt werden. Mit dieser Vorgehensweise bricht Cypress und löst damit die meisten der oben genannten Probleme – und nimmt natürlich auch gewisse Nachteile in Kauf.
    Cypress nutzt vom Fleck weg bestehende Browser im System und unterstützt alle Chromium-basierten Browser und den Mozilla Firefox. Desweiteren bringt Cypress auch einen eigenen Browser mit für den Fall, dass kein unterstützter Browser vorhanden ist, sowie hilfreiche Zusatztools wie Mocha, eine Assertion Library, Launcher/Runner, Reporter und einen Proxy. Unterstützt wird all das von einer exzellenten Dokumentation Cypress ist also schnell und ohne großen Aufwand installiert, es läuft deutlich schneller als Selenium, zum einen weil es lokal läuft, zum anderen weil man bei der Interaktion mit dem DOM anders vorgehen kann als in Selenium und es lassen sich Dinge wie XHR-Calls und/oder Testdaten durch integrierte Tools sehr einfach simulieren. Und schließlich kann man Tests bei Fehlern sofort stoppen und ein Entwickler übernimmt die Fehlersuche in dem noch offenen Browser.
    Wie erwähnt, hat Cypress natürlich auch Nachteile, welche die folgenden wären:

    Es werden nur Chromium- und Mozilla-Browser unterstützt
    Cypress kann keine Tests durchführen, die mehr als einen Origin gleichzeitig umfassen
    Cypress kann nicht mehrere Tests parallel durchführen, sofern man nicht deren payed Service nutzt
    Es gibt keinen Standard-Weg Up- und Downloads zu testen, stattdessen viele mögliche Hacks

    Außerdem sprechen wir im Verlauf der Sendung über über die automatische Erzeugung von bebilderten Anleitungen via Cypress-Book und über das Testen von einzelnen Komponenten in Isolation.

    • 1 Std. 21 Min.
    Revision 457: Funktionale Programmierung mit Tobi Timm

    Revision 457: Funktionale Programmierung mit Tobi Timm

    Developer und Speaker Tobi Timm, Senior Product Engineer bei SinnerSchrader, Koorganisator bei Nodeschool MUX/AUX und React Munich, erzählte Stefan, Schepp und Vanessa über funktionale Programmierung und endliche Zustandsmaschinen in JavaScript.
    Schaunotizen

    [00:00:29] Funktionale Programmierung en Vogue
    Durch die immer höhere Popularität von progressiven Frontend-Frameworks wie React.js und Vue.js, die jeweils Ansätze der Funktionalen Programmierung (FP) aufweisen, erlaubt die FP an sich einen Aufschwung in der Web Entwicklung. Neben Elm, ein von Haskell inspiriertes Framework, gibt es für JavaScript-Entwickler und -Entwicklerinnen die Bibliothek Ramda.js. Für ESLint steht das Plugin eslint-plugin-functional zur Verfügung. Das wohl wichtigste Paradigma der Funktionalen Programmierung besteht daraus, das ausschließlich Funktionen geschrieben werden. Die Konzepte kommen von Haskell, LISP, OCaml oder auch Scheme, einem Vorgänger von Javascript. Funktionen gelten als „First Class Citizen“ und werden dabei auch „Pure Functions“ genannt. Diese generieren bei gleichem Input immer den gleichen Output und verwenden keine Variablen außerhalb ihres Scopes. Ein Vorteil von Funktionaler Programmierung ist dadurch, dass Nebenläufigkeiten verhindert werden und der Code weniger fehleranfällig ist. Getestet werden müssen dann Werte von außerhalb, wie z.B. Nutzereingaben oder Antworten von APIs. Für den Einstieg in die FP in einer bestehenden Codebase, empfiehlt Tobi z.B. For-Schleifen durch Funktionen wie .map(), .filter() und .reduce() zu ersetzen. Zum Lernen empfehlen wir die Videos von Dr. Boolean.
    Finite State Machines
    Etwas, das ähnliche Effekte wie die FP erzeugt, sind State Machines und State Charts. XState von David Khourshid ist hier das Framework für pure Javascript Entwicklung. Wie auch bei der FP ist die Lernkurve allerdings etwas höher, doch es scheint sich zu lohnen, sich mit diesem Thema zu befassen.

    • 1 Std. 18 Min.
    Revision 456: Aktuelle Entwicklungen in Node.js mit Golo Roden

    Revision 456: Aktuelle Entwicklungen in Node.js mit Golo Roden

    Node.js-Ninja Golo Roden, Big Boss bei The Native Web, schaute mal wieder vorbei (zuletzt: 160, 314) und informierte Stefan und Peter über die neuesten Neuerungen in Node.
    Schaunotizen

    [00:00:30] Neues aus Node.js
    Anlässlich des Release von Node 15 ist ein Rundumschlag angebracht! Zu den wesentlichen Neuheuten gehört NPM 7, worin diverser Ärger mit package.json und package-lock.json ausgeräumt wird. Wir lassen es uns bei dem Thema natürlich nicht nehmen, auch die Volksfront von Judäa und die judäische Volksfront zu erwähnen, den Sinn von SemVer zu hinterfragen und am Ende in den etablierten Standardisierungs-Pessimismus abzugleiten. An konkreten Node-internen Änderungen bequatschen wir String#replaceAll, HTTP/3, den AbortController und das Hickhack um Streams in allen Formen. Warum es immer noch kein Fetch in Node gibt (nur als Library, wobei die populärere Löung ist) besprechen wir genau wie den aktuellen Stand an der Deno-Front (siehe auch: 10 Things I Regret About Node.js und Revision 428). Zum Abschluss kommen wir um das Thema Nachhaltigkeit in OSS nicht herum und plädieren für restriktivere Lizenzen (z.B. AGPL, wie’s auch Golo bei seinem Wolkenkit macht). Zum Ausprobieren der diversen Node-Versionen emfehlen wir nvm und Volta.

    • 1 Std. 36 Min.
    Revision 455: Sulu CMS

    Revision 455: Sulu CMS

    Heute haben wir gleich zwei Gäste zum Thema Sulu CMS: Thomas Schedler und Roland Golla.
    Schaunotizen

    [00:00:28] Sulu CMS
    Sulu ist ein PHP-basiertes CMS, das mit dem Framework Symfony gebaut ist. Einst als Agentur CMS gestartet, erfreut es sich mittlerweile größerer Beliebtheit. Als Core-Developer gibt uns Thomas gute Einblicke in den Werdegang und die Features von Sulu CMS, Roland untermauert mit praxisnahen Beispielen.
    Wer einen Start mit Sulu bekommen möchte, kann sich beispielsweise dieses Video anschauen. Außerdem hat Roland eine ganze Serie an Video-Tutorials zum Thema aufgenommen. Ein Demo-Projekt gibt’s hier. Auch zum Headless-Betrieb ist das CMS geeignet. Wer einen tieferen Einblick sucht, der ist mit der Dokumentation gut bedient.

    • 1 Std. 3 Min.
    Special Edition: State of CSS 2020

    Special Edition: State of CSS 2020

    Stefan und Peter trafen sich um ausnahmsweise mal nicht über TypeScript zu sprechen! Stattdessen geht um die Ergebnisse des State of CSS 2020!
    Schaunotizen

    [00:00:45] State of CSS 2020
    Wir sprechen über einige Teile der Umfrage-Ergebnisse im Detail (etwa Grid, Subgrid, Masonry-Layout und Flexbox) und überspringen die weniger spannenden. Ausgiebige Brandmarkung erfahren nervige Features (Scroll Snap, position:fixed) und nervige Trends (CSS in React), während wir erneut Anlass finden, BEM zu lobpreisen. Und besonders freut uns natürlich, dass ihr uns in der Kategorie „sonstige Podcasts“ auf einen Mittelfeld-Platz gewählt habt!

    • 1 Std. 27 Min.

Kundenrezensionen

4.8 von 5
51 Bewertungen

51 Bewertungen

Julinb ,

Super Webentwickler Podcast

Immer sehr interessant euch und euren Gästen zuzuhören man lernt immer etwas dazu.

Andreas Kriegsloch ,

Besser als Blogs lesen

Witzig sich beim Radfahren Code snippets vorzustellen. Funktioniert aber ganz gut.

M.Enaah ,

Top Podcast zu Webentwicklungsthemen

Sehr interessant und informativ.

Top‑Podcasts in Technologie

Zuhörer haben auch Folgendes abonniert: