Endlich Webpack-Master: Ein kurzer Rückblick auf unseren Workshop mit bebraw

Back to overview

Karfreitag, 14:45 Uhr. Unser Kölner Office direkt im Schatten des Kölner Doms füllt sich mit Web Developern. Worauf sie warten? Auf einen jungen Mann aus Finnland, auf Juho Vepsäläinen, in der Entwickler-Szene bekannt als bebraw. Was sie verbindet? Die Lust und die Neugierde auf den Module Bundler Webpack. Sie alle sind der Einladung von uns und Cologne.js, der Kölner Community für Java-Script Developer, gefolgt, bei einem Workshop von einem der Core-Entwickler hinter Webpack zu lernen und sich auszutauschen.

15:05 Uhr. Los geht’s. 24 Augenpaare richten sich nach vorne, als bebraw in die Welt von Webpack entführt. Vor kurzem gründete er die Bewegung SurviveJS als Antwort auf die „JavaScript-Fatigue“, um die erlangten Erfahrungen mit Webpack und React weiterzugeben. Heute berichtet er aus erster Hand und stellt Teile seines neuen Buchs „Webpack – From Apprentice to Master“ vor.

Startschuss für Teil 1 – From Apprentice to Journeyman. Einführung in Webpack, Konfiguration, Bündelung von Assets: bebraw beginnt bei den Basics und gibt einen Überblick über die Community, in der Benutzer für Features voten können, bevor er die verschiedenen Bausteine von Webpack und deren Zusammenspiel erklärt.

Dann geht es in die Tiefe der Konfigurationen. Ein nettes Feature, das wenige kennen: Webpack unterstützt mehrere Konfigurationen, sodass das Bundling parallel ausgeführt werden kann. An einem kleinen Beispiel-Projekt spielen wir die grundlegenden Konfigurationen durch.

Unsere Lessons learned: Wir wissen, wie wir gezielt angeben, welche Assets gebundled werden und welche nicht, wie wir Pfadangaben umschreiben können und wie wir unsere Assets optimal für den Cache aufbereiten können.

16:20 Uhr. Den Lehrlings-Status lassen wir hinter uns und sind nun auf Journeyman-Level angelangt. Auf alle Fragen der „Webpack-Gesellen“ hat bebraw die passende Antwort parat und wir nähern uns dem zweiten Talk zu Advanced Webpack.

16:30 Uhr. Bereit für Teil 2 – From Journeyman to Master! Code so aufteilen, dass Bausteine nur dann geladen werden, wenn sie wirklich benötigt werden – Webpack macht’s möglich. Und dank zahlreicher Features und ergänzender Plugins lässt sich mit Webpack die Ladezeit weiter reduzieren.

bebraw gibt eine hilfreiche Übersicht über die besten und beliebtesten Plugins in der Szene. Von Code-Linting, bis zu Cross-Compiling und dynamischer Einbettung von kleineren Assets ist alles dabei, was das Herz begehrt. Doch manchmal reichen die automatischen Strategien zur Optimierung nicht aus. Für diesen Fall zeigt Juho, wie Developer selbst in Webpack bestimmen können, wo und unter welchen Bedingungen der Code aufgesplittet wird und wie Webpack für eigene Anwendung optimal eingesetzt werden kann.

17:40 Uhr. bebraw gibt Tipps aus erster Hand – und die Workshop-Teilnehmer tippen fleißig mit. Für den Fall, dass es noch kein bestehendes Plugin gibt, gewährt der Core-Developer einen Blick hinter die Kulissen. Wie arbeitet Webpack intern und wie kann man sich mit seinem Code dort einklinken? Anhand eines Beispiels gehen wir die Schritte durch und schreiben unser erstes Webpack-Plugin.

18:30 Uhr. Yeah, Master-Status erreicht! Zumindest wenn es nach dem Titel des Workshops geht 😉

Zeit für ein kühles Getränk und den Austausch unter Gleichgesinnten. „Mehr Webpack geht kaum. Das Angebot von Juho Vepsäläinen, einem Core-Mitglied, in einem Workshop in die Tiefen von Webpack vorzudringen, ist eine einzigartige Gelegenheit, sich das nötige Wissen anzueignen, um noch performantere Frontend-Applikationen bauen zu können“, erklärt Sebastian Tilch, einer der Organisatoren der Kölner JavaScript-Community cologne.js.

Und wir freuen uns, dass wir bei diesem coolen Event Gastgeber sein durften. Hat Spaß gemacht! Danke, bebraw! Danke, Cologne.js! Danke an alle Teilnehmer!

 

Back to overview