Folge 29 - webpack und andere Module Bundler

Wir tauchen ein in die Welt der Module Bundler und beschäftigen uns hauptsächlich mit webpack. Wie setzen wir es in unseren Produkten ein, was waren Hürden, die uns auf dem Weg begegnet sind und welche Plugins und Loader sind für uns unerlässlich?

Endlich waren wir mal wieder in gewohnter Runde im heimischen Konferenzraum beisammen und konnten so auch Feedback von euch beantworten und mit ein paar Themen aufräumen.

Leider hat diese Folge auch etwas Trauriges: Unser Podcast-Papa Mario verlässt Lotum und versucht sich an einem eigenen Unternehmen. Dafür wünschen wir ihm alles erdenklich Gute! Toll, zu was du diesen Podcast gemacht hast!

Plugins, die wir gut finden:
https://github.com/webpack-contrib/url-loader
https://github.com/webpack-contrib/webpack-bundle-analyzer
https://github.com/jantimon/html-webpack-plugin

Schweine des Tages, unsere Pick of the Day:

Sebi und sein redis ebook: https://redislabs.com/ebook/foreword/
Mario mit der Frage nach Augen-Lasern: http://worldeye.de/augenlasern/relex-smile/
Fabi mit Mobilfunk-Werbung: https://freenet-funk.de/

Transkript

Dennis: Hallo und herzlich willkommen zur programmier.bar Folge 29. Ja, einen schönen Guten Tag, Guten Abend, Guten Morgen, je nachdem wann und wo Ihr uns gerade hört. Ich freue mich heute sehr, in dieser Runde nochmal hier wieder zu sein. Mein Name ist Dennis, ich moderiere heute ein bisschen durch die Folge, und habe unsere drei Stammgäste wieder dabei. Warum das zukünftig vielleicht nicht mehr so ist und ich häufiger Moderator bin, dazu kommen wir am Ende der Folge. Aber erst mal stelle ich die Runde nochmal vor. (Mario: Ich bin jetzt schon total gespannt.) Du bist schon total gespannt. Wie alle. Wer redet denn dazwischen? Das ist der Mario.

Mario: Hallo. 

Dennis: Hallo Mario. Wie geht es?

Mario: Sehr gut. 

Dennis: Sehr gut. Du warst lange im Urlaub.

Mario: Das stimmt. Ich war sehr lange im Urlaub und ich kann vielleicht-. Vielleicht kann ich das auch als Pick machen, aber generell vielleicht als Tipp: lasst Euch keine sehr starke Massage geben kurz bevor Ihr eine Flugreise machen wollt.

Fabi: Mein Tipp wäre, lasst Euch nie eine schwache Massage geben. Ich hasse schwache Massagen.

Mario: Das stimmt, aber ich hatte eine sehr starke und dann hatte ich blaue Flecken am Rücken und musste in dem Economy-Class-Flug hinten sitzen natürlich. Und also, das ist-. Wirklich, es war furchtbar. Ich konnte keine Sekunde schlafen und habe mich sehr selbst bemitleidet.

Dennis: Du warst wahrscheinlich im asiatischen Raum.

Mario: Das ist richtig, ja. 

Dennis: Die sind auf Dir rumgelaufen bei der Massage? (lacht)

Mario: Ja, aber das-. (lacht) Also ich habe mehrere Massagen bekommen im Urlaub, (Lachen) und die mit dem Rumlaufen, die war super. Aber am Ende habe ich eine bekommen, das war die-. (Gelächter)

Dennis: -draufeingeschlagen.

Mario: ... #00:02:00# Die hat sich halt wirklich sehr-. Ich habe sie dazu auch ermutigt, aber ich habe jetzt so ein paar (Gelächter) ... #00:02:08# am Rücken die sehr verspannt waren, die also wirklich so wie so Knoten waren, die auch Geräusche gemacht haben, (?wenn sie da mit den Fingern drangegangen ist.) Sehr unangenehm. (Fabi: ?Lambada haben die gesungen.) Und sie meinte, sie kriegt die raus und dann geht es mir besser. Also habe ich gedacht, ja dann, hau rein, versuch das. (Fabi: Hau rein.) Und das war währenddessen schon sehr schmerzhaft und ja, die wie gesagt-.

Dennis: Und mittelfristig? Also hat das irgendetwas gebracht? Oder war nach dem Flug trotzdem alles-.

Mario: Also ich habe mir vielleicht auch dadurch, aber ich habe mir auf dem Flug-. Es kann aber auch sein, dass ich, Kind so halb im Arm die ganze Zeit hatte-. Aber da habe ich mir während des Fluges, auf dem Rückflug, den Rücken so verdreht, dass es jetzt alles viel schlimmer ist als vorher. (lacht) Also, ich weiß nicht, ich kann die Effekte nicht mehr voneinander isolieren.

Dennis: Sehr gut. Hört sich nach einem erfolgreichen-.

Mario: (lacht) Abgesehen davon war es ein sehr schöner Urlaub.

Dennis: Ja. Ja, neben uns sitzen außerdem der Fabi.

Fabi: Ja, hallo. Es tut mir sehr leid, dass ich schon reingesprochen habe, bevor Du mich genannt hast.

Dennis: Kein Problem. Sehr gerne.

Fabi: Ich gelobe Besserung. 

Dennis: Du hast ja, glaube ich, erst zwei Podcasts ausgesetzt oder so. Das heißt, Deine Stimme ist wirklich die, (Fabi: Okay.) die den Leuten (?vielleicht) am bekanntesten ist.

Fabi: Gut, dann werde ich ab jetzt immer dreist reden, auch wenn Du mich nicht vorstellst.

Dennis: Das ist gut. Und wir haben noch Sebi dabei.

Sebi: Hallo! Ich habe nicht reingeredet. 

Dennis: Du hast nicht reingeredet, Du hast Dich ordentlich zurückgehalten. Möchtest Du noch irgendetwas zum Besten geben?

Sebi: Nein. Also, ich habe sonst-. Ich war nicht im Urlaub. Und San Francisco habt Ihr ja mitbekommen. Das war es.

Dennis: Ja. Das haben wir alle mitbekommen, das stimmt. Unser heutiges Thema ist Webpack. Und vielleicht auch andere Module Bundler. Das werden wir gleich sehen. Aber bevor wir darauf einsteigen, haben wir noch eins, zwei Sachen, die wir aus den letzten Folgen ein bisschen beantworten müssen. Das ist nämlich mal-. Wir hatten ja ein paar Special-Folgen zwischendurch, also einmal die aus San Francisco, dann hatten wir eine mit Speaker vom Meet-up die letzte. Das heißt, dass wir hier gemütlich im Konferenzraum sitzen, (?das ist zwar) ein bisschen her. Und dann nutzen wir doch mal, um da auf ein paar Sachen einzugehen. Mittlerweile erreichen uns ab und zu E-Mails, was uns sehr, sehr freut und auch motiviert, hier immer weiterzumachen, also. Ihr könnt uns jederzeit gerne schreiben. (?Jetzt machen) wir diesmal Anfang Sebi, an welche E-Mail-Adresse kann man sich wenden?

Sebi: podcast@programmier.bar

Dennis: Sehr gut. (?Hast Du geübt?)

Sebi: Ich habe eine E-Mail beantwortet. (Lachen)

Dennis: Sehr schön. Oder an unsere Twitter-Account, der lautet, Fabi?

Fabi: Können wir nochmal zurückspulen, Du stellst mir die Frage mit der E-Mail-Adresse? (Lachen) Also, auf Instagram heißen wir programmier Punkt bar.

Dennis: Oh, sehr gut.

Fabi: Ja. Auf Twitter heißen wir-. (?Wann war der letzte Instagram-Post?) (Dennis: Ja.) (Gelächter) Ich, ja, also, ich gelobe jetzt Besserung. Also ich war so ein bisschen-. Wir waren ja in San Francisco und da waren wir so sehr begeistert, von allem, was wir gesehen haben und es war super easy, das zu machen. Jetzt sind wir hier im Büro und es ist ein bisschen schwieriger, zwischen all der Zeit, die man programmiert, auch noch schöne Bilder von allem zu machen. Wir werden uns die nächsten Wochen mehr schminken, (Gelächter) schönere Outfits anziehen und auch mehr Bilder machen.

Dennis: Cool. Sehr gut. Sehr schön. 

Fabi: (?Also, was war jetzt) unser Twitter-Account?

Dennis: @programmierbar. (Fabi: Richtig. Ohne Punkt.) Ohne alles.

Fabi: Siehst du mal. 

Dennis: Das ist einfach.

Fabi: Ja. 

Sebi: Ohne alles, (?der letzte Instagram Post.) (Gelächter)

Dennis: Ja, dann haben wir noch eine Sache, Sebi da wollte-. Da haben wir auch von einigen Seiten so ein bisschen Ärger bekommen, weil wir Windows gebasht haben. 

Sebi: Was, wir beide?

Dennis: Ja, (Sebi: Nie.) ich glaube. Wir waren auch mitverantwortlich.

Sebi: Was? Ich? Haben wir so lange keine Folge mehr aufgenommen? Kann ich mir gar nicht vorstellen. (Mario: Ja, das ist schon länger her.)

Dennis: Das kannst Du Dir gar nicht vorstellen? (Sebi: Also.) Ja. Nein. Wir haben natürlich ist unser Bild ein bisschen gefärbt und das ist, glaube ich, auch in Ordnung. Und ich glaube, wir haben auch in der letzten Folge ja gesagt, wir beide, die darüber gesprochen haben, sind zwei wirkliche Apple-Fan-Boys, wo die Meinung vielleicht nicht ganz objektiv immer ist.

Sebi: (lacht) Was? Doch! (Gelächter)

Dennis: Nein. (Sebi: Okay.) Wir finden es natürlich gut, dass es alle Systeme gibt. Nichtsdestotrotz, also ich glaube daran ändert nichts-. Das war ja auch die Frage, warum nutzen so viele Entwickler Mac? Ich glaube, da waren auch ein paar ganz sinnvolle Argumente, die wir so gebracht haben und wir nutzen ja auch Macs. Ja. (Gelächter) ... #00:06:35#

Sebi: Ich weiß gar nicht, ob Du mit der Aussage jetzt so viel zurückgerudert bist, dass Du ... #00:06:38#

Dennis: Die Aussage ist eigentlich, ich will Windows nicht schlecht machen, ich will den Mac gut machen. Also, ich will (Fabi: Vor allen Dingen-.) (?ich bin Fan davon). Aber, dass es Fälle gibt, wo es sinnvoll ist, ein Windows-.

Fabi: Ich würde Dir vor allen Dingen auch unterstellen, dass Du vielleicht gar nicht so genau Bescheid weißt über Windows aktuell. So (?hast Du) wie viel Zeit hast Du mit Windows zehn verbracht?

Dennis: Windows zehn? Ja.

Sebi: Die sind schon bei zehn?

Dennis: Genau. (Gelächter) Nein, ich habe-. Ein paar Stunden? (Sebi: Okay.) Immerhin.

Fabi: Ich habe Parallels zu Windows zehn auf meinem Mac. 

Dennis: Ja. Wofür brauchst Du das?

Fabi: Ich habe das nur, um, wenn ich meinen Computer an mein Auto anschließen will und Fehlermeldungen zurücksetzen will, (Lachen) dann laufen alle diese lustigen Programme (Dennis: Sehr gut.) nicht auf Mac, leider. Und das ist auch der einzige Grund, weshalb ich Parallels habe.

Dennis: Das offizielle ist, die Fehlermeldungen zurücksetzen. (Fabi: Genau.) Ja. Sehr schön. Dann würde ich gerne noch auf eine E-Mail eingehen, die wir bekommen haben. Und zwar von Tobias, der fragte uns (Fabi: Einiges.) einiges. Unter anderem: in Folge 23 haben wir von Lotum geredet und dass wir nicht so groß sind und deswegen noch Meetings machen können innerhalb der ganzen Firma mit allen Leuten zusammen. Aber wir haben irgendwie nie verraten, wie viele wir sind. (Fabi: 600.) (Lachen) (Mario: In einem sehr kleinen Raum, keine Stühle und auch kein Licht.) Ja, aber ich weiß gar nicht, wie viele Leute sind wir da eigentlich genau?

Fabi: Also ich sage immer so knapp 30, wenn mich jemand fragt.

Dennis: Das ist die richtige Antwort. Damit liegst Du sehr gut. (Fabi: Ja?) Ja. Wisst Ihr das genauer, oder sagt Ihr auch so knapp 30?

Sebi: Ich würde sagen 28. 

Dennis: Du würdest sagen 28. Okay. (Mario: Ja.)

Fabi: Also noch so viele, dass man vielleicht im Kopf nachzählen könnte, wenn man möchte. (Sebi: Ja.) (Mario: Definitiv.) 

Dennis: Das mache ich übrigens immer anhand der Büros. Also, (Fabi: Ja.) wenn ich das mal mache, und-. 

Fabi: Wie viele Büros haben wir denn?

Dennis: Wir haben sechs Büros (Mario: Räume.) Sechs Büroräume, einen Konferenzraum. 

Sebi: Das könnte man ja so verstehen, dass wir sechs Dependenzen haben, verteilt über die ... #00:08:50# Es geht um Zimmer. (lacht)

Fabi: Obwohl die Aussage ja sogar fast, wenn wir die Folge rausbringen, schon gar nicht mehr gilt. (?Dadurch dass) wir nächsten Monat wahrscheinlich in ein neues Büro ziehen. 

Dennis, Sebi: Ja.

Dennis: Auch das erzählen wir, glaube ich, schon länger im Podcast.

Fabi: Ja, das erzählen wir ja auch schon länger in der Firma. (Lachen) (Sebi: Aber es ist immer nächsten Monat.) (Lachen) Aber diesmal wirklich. Unser Mietvertrag geht ja nur noch bis Ende Juni, habe ich gehört. 

Dennis: Ja, das bedeutet nicht unbedingt etwas. (Gelächter) Also (?wir müssen vielleicht) irgendwelche Strafen (?dann zahlen) (Gelächter). (Sebi: Oder auf der Straße arbeiten.) Sagen wir mal so, ich glaube, man kann sagen, diesen Sommer. (Sebi: Ja. Okay.) Damit sind wir auf der sicheren Seite. 

Sebi: Seltsamerweise, ganz untypisch größere Bauprojekte dauern manchmal länger als geplant.

Fabi: Ja, wie Software-Bauprojekte auch.

Dennis: Oh, gute Brücke. Mann, Mann, Mann, so eine gute Brücke (Gelächter) #00:09:36# Genau. (?Anknüpfen) so ein bisschen wie groß sind unsere Teams? Sebi, kannst Du mal kurz sagen, wo unsere Teams gerade, unsere Entwicklerteams strukturiert sind?

Sebi: Vier, vier, zwei.

Dennis: Also drei Teams?

Sebi: Drei Teams.

Dennis: ... #00:09:56# (Mario: Fast richtig.) (Sebi: Fast richtig.) Vier, drei, zwei, oder? (Sebi: Hast Du Dich nicht dazugezählt? Okay.) (Fabi: Nein. Dennis ist ja der Product-Owner.)

Fabi: (?Lass uns zur nächsten Frage gehen, oder?) ... #00:10:09# (Durcheinanderreden) (Sebi: Jetzt hat die Brücke aber funktioniert.)

Dennis: Sehr gut. Wir sprechen von einem Product-Owner. Ist das jemand Externes? Nein. Das ist der Besitzer des Unternehmens. Je nach Team ja-. (Sebi: -aber nicht zwangsläufig.) Und gibt es dort einen pro Team oder wie muss ich mir das vorstellen? Genau, also wir haben grundsätzlich, ich glaube, das haben wir mal irgendwo angesprochen-. Wir haben eine Zeit lang sehr strikt nach dem Scrum-Prozess, haben wir uns hier-. (Lachen) ... #00:10:35# Ja, doch wir haben schon versucht, relativ uns an das Framework, was ja gar nicht so viel als Rahmenbedingung gibt uns daran zu halten. Also, das ist einfach ein agiler Entwicklungsprozess und aus dem Kontext gibt es auch den Begriff des Product-Owners, der eben die Rolle hat, die Tasks, die es gibt, zu priorisieren. Mario als Agil, Du kannst bestimmt nochmal die ganz offizielle Bezeichnung nennen.

Mario: Im Grunde genommen ist es wirklich das, darauf lässt es sich gerade nach dem Scrum-Regelwechsel, so wenn Du mich jetzt so plötzlich fragst, ist das tatsächlich eigentlich auch die einzige wirkliche Definition davon. Ist eigentlich, dass es die Aufgabe des Projekt-Owners ist, die Priorisierung der Tasks. Das heißt, der entscheidet einfach nur, was als nächstes gebaut wird. Das heißt, darin steckt ja auch so ein bisschen implizit, dass er jetzt nicht irgendwie dem Team übergeordnet ist oder so. und das heißt auch nicht, dass er diese Tasks selber erstellen muss, das heißt auch nicht, dass er selber in irgendeiner Form mit dem Konzept zu tun haben muss, sondern eigentlich ist einfach nur die Aufgabe des Projekt-Owners, sicherzustellen, die Tasks so zu priorisieren, dass der meiste Wert mit dem besten Wert-Arbeit-Verhältnis erstellt wird. So würde ich es zusammenfassen. 

Fabi: Und in der Regel in größeren Firmen ist es dann auch so, dass man halt irgendwelche, ich will Stake-Owner sagen, Quatsch, wie heißen sie-? (Sebi: Stakeholder?) Stakeholder. (Lachen) Stakeholder gibt, mit denen man sich dann eben absprechen muss und in Briefs und so weiter (?die Sachen) machen muss. Da wir ein bisschen kleiner sind-. Wir haben den Begriff einfach beibehalten und letztendlich ist es aber schon so, dass auch da so ein bisschen einfach die Produktstrategie und das Weiterentwickeln des Produktes, auch sich die Zahlen angucken, (Mario: Genau. Analysepart.) sehr viel, genau, Analysesachen-. Sind einige Sachen in dieser Rolle eben untergebracht. Ich bin einer davon, eben für das Produkt ... dein Wort. Und arbeite da mit drei Entwicklern in einem Team zusammen. Und dann gibt es noch zwei weitere Teams und da ist dann einer unserer Gründer der Product-Owner von im Moment. Genau, hat sich einfach so ein bisschen ergeben durch die Zeit, dass wir diese Strukturen haben. Ja.

Dennis: So sieht es aus. Wollen wir auch gerade noch auf die andere Frage eingehen. Hast Du die auch noch im Kopf, Fabi?

Fabi: Nein, die habe ich nicht mehr im Kopf. Aber ich weiß noch, es war keine softe Frage, eine inhaltliche Frage.

Dennis: Stimmt, es war irgendwas mit Zahlen, was mir eigentlich grundsätzlich sehr gut gefällt. (Lachen) Ich habe aber nicht abgesprochen mit Euch, ob Ihr das überhaupt beantworten könnt. Sebi, Ihr sagt, Ihr verwendet Google Instanzen mit vier CPUs und startet dann bis zu 30. Ich habe das nachgeschaut. Instanzen ist acht CPUs und mehr kosten im Verhältnis zur CPU Anzahl immer genau viel. Wieso setzt Ihr trotzdem auf Instanzen mit vier CPUs und den damit verbundenen Overhead der Datenübertragung zwischen Instanzen?

Sebi: Den Overhead-Part habe ich nicht verstanden. Aber das andere, warum nehmen wir dann nicht einfach die mit 196 CPUs so ungefähr. Eben aus dem Grund, weil wir gar nicht so viele brauchen. Die Feingranulare, die Instanzen mit CPUs ausgestattet sind, so Feingranulare können wir die auch hoch und runterfahren und dann ein bisschen genauer, so ein bisschen sparen), ein bisschen anpassen an die-. (Dennis: Also an die tatsächlichen Ressourcen, weil die Stufen kleiner sind.) Genau. Wenn man es auf die Spitze treibt mit dem 196 CPU-Ding, dann hätten wir das eben an der Backe und dann müssten wir für die ganze Zeit zahlen, würden aber vielleicht nur zwei davon verwenden.

Fabi: Ja, und ich meine, zu der Netzwerkübertragung-. Also wir nutzen das ja innerhalb beispielsweise von Kubernetes und da ist es ja so-. Ich glaube jetzt auf unserer eigenen Instanz, die wir im Moment haben mit zwei CPUs lassen wir jeweils zwei Container oder Pots laufen und die interagieren ja auch nicht mit sich gegenseitig. Also diese Netzwerklatenz haben wir ja ohnehin von klein zu dem Server, dadurch, dass die nicht miteinander interagieren, haben wir den Punkt erstens gerade gar nicht. Also nur halt wenn wir zu einer Datenbank gehen oder zu unserem Redis, das aber so oder so auf separaten Instanzen laufen würde, selbst wenn wir es nicht im Kubernetes wie bei uns gehostet haben würden. Aber wir sind jetzt auch gerade dabei, bei uns im Quiz Planet noch ein weiteres Back-End hinzustellen, was wir microservice-artig aufziehen wollen. Also wo wir wirklich verschiedene Services haben, die miteinander interagieren. Also so, Client stellt eine Anfrage, es gibt mehrere Services, die miteinander interagieren und für sich gestellte Funktionalitäten abbilden. Und da würden wir mal sehen, wie hoch diese Netzwerklatenz ist. Wir glauben eigentlich, dass wenn das gehostet ist zumindest (?was wir auch viel jetzt auf der Cloud Next) gehört haben, eigentlich kein großes Problem darstellen sollte, solange die alle in derselben Region sind. Aber darüber können wir vielleicht auch nochmal in den nächsten Folgen ein bisschen was erzählen, wie hoch diese Netzwerklatenz wirklich ist. Aber ich glaube, wie der Sebi auch sagt, hat nicht so wirklich etwas mit dem Grundproblem zu tun. Geht einfach um Feingranularität und dass wir eben diese großen Instanzen gar nicht brauchen. Uns ist ja egal, ob wir zehn Pots à ein CPU oder fünf Pots mit zwei CPUs da stehen haben. (?Nur bei zehn Pots können wir Granulare, ein weiterer kostet auch nur ein CPU.)

Dennis: Genau. Cool. Jetzt hast Du leider eben Microservices gesagt und nicht Micro Frontends, dann hätten wir gleich noch auf eine andere Frage eingehen können, aber das sparen wir uns für eine der nächsten Folgen auf. 

Fabi: Ja, aber das ist echt cool. Also wir haben wirklich seit der letzten Folge sehr, sehr viele E-Mails und auch über andere Kanäle irgendwie Zuschriften bekommen. Ich glaube, ich kann die Leute echt nur ermuntern. Wir freuen uns immer sehr, antworten immer gerne und wenn das passt und möglich ist, auch hier in der Folge. (Dennis: Ja, das stimmt.) (Mario: Das ist klasse.)

Sebi: Das heißt, wir starten jetzt-?

Dennis: Wir starten jetzt mit dem Thema. (Sebi: Die Teamaufnahme. (lacht)) 

Fabi: Apropos Aufnahme, (?ich wollte aufnehmen), ich gucke mal nach ob es noch läuft. Ich habe ein bisschen Angst, dass ich mich jetzt rum kümmere. Es läuft noch. Sieht gut aus. 

Dennis: Easy. Dann ist es ja gut. Webpack, unser heutiges Thema. (Sebi: Cool, cool, cool.) Wie so häufig vergessen wir vorher zu definieren, wer macht dazu eine Intro? Sebi.

Sebi: Ja, ich fange-. (Dennis: Biete Dich mal an.) Ich probiere es mal heute. Weil ich ja auch sonst eigentlich nicht so viel zu dem Thema zu sagen-. (Dennis: Verkauf Dich doch nicht unter Wert.) Nein, also schürt wahrscheinlich höhere Erwartungen, aber ich finde es auf jeden Fall cool, dass wir mal das Thema Web-Bundler ansprechen, um zu erzählen, warum es das eigentlich gibt oder wo man, also was eigentlich die Notwendigkeit von so einem Ding ist. Und ich fange heute an, weil ich ein bisschen aus der Vergangenheit erzähle, wo wir das noch nicht hatten. Damals. Als wir noch alle auf Windows-. Nein. (Lachen)

Dennis: Aber kannst Du erzählen, was ein Module Bundler ist oder was der eigentlich genau macht?

Sebi: Also wir-. Es geht ja immer darum, eigentlich um eine Internetseite irgendwie zu bauen. Und dann irgendwann ist man auf die Idee gekommen, wie kann ich eine Internetseite noch schneller machen. Und da, zum Beispiel ein Konzept, um Internetseiten zu beschleunigen, ist dass man weniger Requests macht. Also anstatt acht oder sechzehn CSS-Dateien auf die Seite zu packen, sagt man eben lieber eine. Und das Gleiche gilt dann auch für JavaScript-Dateien. Und, ich weiß nicht, ob ich das schon mal erwähnt hatte, aber wir hatten oder-. Bei den mobilen Telekom Proxy 2008-. Also wenn du ein Telekom-Handy hattest und bist damit ins Internet gegangen und hast eine Internetseite angefragt, dann hat der Proxy von der Telekom tatsächlich die CSS- und JavaScript-Dateien von der HTML-Seite (?geinlined), so dass er nur noch eine HTML-Seite ausgeführt hat. Also, so crazy. Mittlerweile macht der das nicht mehr. Was ganz gut ist, weil dann muss man sich auch nicht mit den Fehler rumärgern auf dem Gerät, die der Proxy erzeugt hat. So, und also zum einen geht es darum, eben die Requests zu verringern und zum anderen wollen wir natürlich immer so wenig wie möglich dann an den Client ausliefern. Also zum Beispiel auch so wenig wie möglich Leerzeilen. Also minifizierter Code ist kleinerer Code und wird von den Browsern genauso verstanden, aber ist eben für uns schwieriger zu lesen. Und das sind dann Arbeitsschritte. Also man möchte natürlich bei der Entwicklung irgendwie ein bisschen Ordnung haben und Struktur. Alles in verschiedenen Dateien, dass man Sachen leicht findet, dass die auch schon formatiert sind et cetera. Diese ganze Struktur, die man eben zum Durchlesen von den Sachen braucht, braucht der Browser dann am Ende nicht mehr. Das heißt, man möchte ganz gerne anders entwickeln als das beim Endkunden dann im Production-System aufläuft. Ja, und diese Transformation dann von so habe ich meinen Code entwickelt und so liefere ich ihn aus, die muss ja irgendwie stattfinden. Und damals haben wir das bei ... #00:19:35# noch alles händisch gemacht, also selbst unsere Skripte geschrieben, wie einen CSS Präprozessor und haben dann die JavaScript-Dateien konkateniert. Und dann in einem nächsten Prozess die JavaScript-Dateien minifiziert, die CSS- Dateien minifiziert, das HTML minifiziert, was man alles so machen kann. Also alles händisch gemacht und hochgeladen und fertig, und-. (Dennis: Händisch heißt Datei für Datei, oder wie?) Also, händisch heißt, dass wir es alle-. Also, dass wir die ganzen Tools dafür selbst geschrieben hatten. Und ja das hatte auf der einen Seite den Vorteil, wir kannten unsere Tools, auf der anderen Seite wir mussten halt alles selbst schreiben.

Dennis: Aber das heißt, Development-Flow, ihr hattet dann JavaScript-seitig für Eure Seite mehrere einzelne JavaScript-Files und dann wurde irgendein Prozessor drüber habt laufen gelassen, oder habt Ihr ein großes gehabt und nur so etwa wie mininfiziert und Leerzeilen raus?

Sebi: Wir hatten auch schon mehrere Build-Steps, einmal das Konkatenieren der JavaScript-Dateien zu einer Datei. Dann das-. Dann haben wir Sachen daraus ersetzt und also-. Wir hatten diesen Google-Closure-Compiler, der ist darüber gelaufen, der hat das so ein bisschen schlau minifiziert und danach hatten wir nach dem Google-Closure-Compiler noch einen weiteren Minifizierungsschritt, den wir selber gebaut hatten, der Variablen-Namen und Strings nochmal kleiner gemacht hat. Ja, das so. Ja. Und dann muss man sich eben vorher Gedanken machen so, wie will ich das jetzt eigentlich alles zusammenbauen, und wir haben jetzt das ganze Thema Bilder und Assets noch überhaupt nicht angesprochen. Weil, dann haben wir das eben dann, auch wenn man besonders kleine Gifs hat oder so, dann wollen wir eben dafür nicht einen extra Request machen, sondern das kann man dann inlinen mit einer Dataware, das haben wir alles händisch gemacht. So, und an die Stelle, wir müssen alles händisch machen und uns überlegen, was irgendwie das Coolste ist, da, in diese Kerbe schlägt dann ein Module Bundler. So, (?jetzt könnte ich vielleicht an den) Fabi-.

Fabi: Ja, also wenn ich es jetzt zusammenfasse, hattet Ihr da eigentlich schon so einen eigen gebauten Module Bundler eigentlich so, der-. (3: Genau.) Was kam bei Euch dann-? Was war der Output bei Euch am Ende? Da kam raus einige HTML-Files, ein paar wenige JavaScript-Files, oder waren die alle inline im HTML-? Oder habt Ihr ein JavaScript-File gehabt und ein bisschen inline im HTML oder war das so alles über Skript-Text, wurde diese eine JavaScript-File geladen?

Sebi: Also jede HTML-Seite-. Also das war noch so mit, ich klicke auf einen Link und dann wird eine neue Seite geladen-. Damals. (Lachen) Also, jede HTML Seite hat die gleiche CSS- und die gleiche JavaScript-Datei inkludiert. (Fabi: Okay.) Weil, ja, halt wegen Browser-Cache und so weiter, das wurde dann (?immer) einmal geladen und dann auf den Folgeseiten war es halt super schnell da. So die Idee, ja, da haben wir nicht weiter dran herumgebastelt. Also das heißt, eine HTML-, eine JavaScript, eine CSS. (Fabi: Ja.) Ja. 

Fabi: Ja, und dann ist eigentlich-. Gerne, Dennis?

Dennis: Macht man dieses Minifizieren von JavaScript, dass man es nicht mehr lesen kann, nur aus Kleinermach-Gründen, oder auch damit einer sich den Code nicht angucken kann?

Sebi: Angucken kannst Du ihn Dir immer. Aber verstehen kannst Du ihn wahrscheinlich-. Du sowieso nicht-. Nein, aber-. (Gelächter)

Fabi: Nur mit einer Lupe. Nein auch nicht, weil er ganz klein ist.

Sebi: Ja, Du hast Recht, also ich glaube, wir minifizieren den auch, damit man nicht irgendwie besonders leicht verstehen kann oder so. Also, weil wir haben jetzt aktuell haben wir nicht so viele Schmerzen mit das ist so groß und so weiter, weil das ja bei Webpack-. Kommen wir vielleicht noch drauf. (Gelächter) Bei Webpack ist irgendwie alles automatisch so unter der Haube, dass das minifiziert wird, aber kommen wir zu dem-. Ich hatte das jetzt die ganze Zeit nicht auf dem Schirm, so Uglify brauchen wir unbedingt, weil Paranoia haben wir nicht. 

Dennis: Okay.

Fabi: Also, Hauptgrund ist schon größer. 

Sebi: Genau, ja und im Endeffekt macht ein Module Bundler ja eigentlich genau das, vielleicht nicht, dass man am Ende ein JS File hat und mehrere HTML-Files. Im Endeffekt wird daraus ja ein großes Module-File. Also, es baut die im Endeffekt- Also ein Module Bundler hat eigentlich intern so ein bisschen so einen Dependency Graph und weiß halt, was importierst du wo und dann in den JavaScript-Files, was für Dateien hast du, jeglicher Art. Also, ich glaube die meisten können irgendwie out of the box irgendwie JavaScript und JSON, zumindest kann das, glaube ich, Webpack so out of the box, so ohne, dass du irgendwelche zusätzlichen Loader oder Plugins hast. Aber eigentlich kann es durch Extension, je nachdem, was für ein Framework man da nutzt, wird eigentlich alles, was ich irgendwie benötige an Abhängigkeiten, eben von diesem Module Bundler gehändelt und am Ende eins bis X Bundles daraus gebaut. Und, ja diese eins bis X hängt so ein bisschen von dem eigenen Use-Case ab. Also eins bis X könnte beispielsweise bedeuten, man macht so etwas wie Dinge, die sich nicht so oft verändern so etwas wie vielleicht meine ein Vendor Bundle, meine Abhängigkeiten, also alles, was meine Node Modules sind, die ich irgendwie einbinde, vielleicht ein eigenes Bundle, so dass, auch wenn sich meine Applikation verändert, aber vielleicht nicht meine Abhängigkeiten, ist das noch weiter im Browser-Cache und der Rest nicht. Also die Applikation wird neu geladen, aber eben nicht mein Vendor Bundle, aber es gibt auch verschiedenste Gründe dafür, das in einzelnen Bundles dann zu machen. Bei Single-Page-Applications macht es nicht so viel mehr Sinn als meistens Vendor und ein weiteres. Bei uns ist es beispielsweise bei Quiz Planet alles in einem Bundle, weil wir das ja auf Facebook hosten und leider da Caching nicht funktioniert über Deployments hinweg. Also, wir geben im Endeffekt Facebook ein ganzes Paket und die setzen noch ein paar Hashes vorne dran, so dass der Browser-Cash dann leider nicht mehr funktioniert. Genau, aber im Endeffekt kommt bei so einem Module Bundler ein File raus, was alles tut, was Sebi bei Kingme vor zehn Jahren noch händisch und vielleicht nicht überall gemacht hat. Ja, dann macht das im Endeffekt dieser Module Bundler und macht daraus eine Datei.

Mario: Also, das würde ich auch sagen ist so die Besonderheit von, also nicht Module Bundlern, Webpack. Keine Ahnung, also dass wir diesen Dependency Graph haben, weil das ist ja dann schon so ein bisschen schlauer als wir das damals gemacht haben. Da haben wir ja einzelne Dateien geschrieben und die dann einfach hintereinander gepackt. Und hier schaut sich Webpack, liest sich, hat nun gesagt, ich habe hier einen Einstiegspunkt, das ist meine Hallo Punkt JS und dann öffnet die Webpack diese Datei und guckt sich an sind hier andere JavaScript-Dateien, die importiert werden müssen. Und dann importiert der so langsam alle durch und baut dann so einen Abhängigkeitsgraph auf und zieht die dann in der richtigen Reihenfolge halt rein in eine Datei. So ein bisschen schlauer als wir das damals gemacht haben. 

Fabi: Ja und das ganze kann dann auch sehr viel weitergesponnen werden, dass ja einige dieser Module Bundler ja auch so etwas können wie Tree Shaking, das heißt wenn ich aus diesem Hello JS-. Wenn Hello JS beispielsweise zwei Sachen exportiert und ich nur eine Sache davon importiere, und diese wiederum eben nicht alle Abhängigkeiten benötigt, die Hello JS hat, werden halt auch nur die miteingebunden, also dieser Dependency Graph, ja, ist dann auch so-. Also aufbauend auf diesen Dependency Graph gibt es eben dann auch Treek Shakings, um zu schauen, was brauche ich denn eigentlich wirklich. Also nicht alles, was eine Datei, die ich importiere auch importiert, brauche ich unbedingt für meine Funktionalität.

Dennis: Und kommt es da zu Fehlern, weil irgendetwas nicht erkannt wird, oder dann doch irgendetwas fehlte, weil-? (Sebi: Nein. Niemals. (lacht) Nein. Hast Du mal-? (lacht)) Weiß ich nicht, da habe ich mir gerade so, dass man irgendwie im Nachhinein-. (Sebi: Das, was weggeshakt wurde vom Tree-?) Ja, oder weil-. 

Fabi: Oder vielleicht auch mal eine Datei ... #00:27:38# oder man macht kein CSS dazu oder so. Oder lässt mal wahllos ein Zeichen aus.

Sebi: Oder irgendwo kommt noch ein JavaScript-File hinzu, wo der Dateiname dynamisch erzeugt ist und deswegen-. So etwas (?in der Art). 

Mario: Ja, (?da) machst du tatsächlich ein Fässchen auf. Da also-. (lacht) Dynamisch erzeugte Dateinamen kann eben dieser beim Bildprozess laufende Web Bundler, also da hat er ein bisschen Schmerzen mit. Da müsste man ihm sagen, nein, nimm alles in dem Ordner, was auch immer-. Also, ja, das ist jetzt doof. Dennis! (Dennis: Was ist denn los?) Jetzt hör doch mal auf, wir wollten doch-. Also ich hatte eigentlich vor, diesen Webpack jetzt gut darzustellen. (Lachen)

Dennis: Okay, also es kommt zu keinen Fehlern (Mario: (lacht) Richtig, richtig.) und-.

Fabi: Nein ich glaube wir werden ja gleich noch ein bisschen am Beispiel vom Webpack mal durchgehen, was das alles so benötigt, dass Webpack eben die Dinge tut und da ist es durchaus so, es kann einem ab einem bestimmten Level auch ein bisschen teilweise vielleicht auch mal Kopfschmerzen bereiten so. Aber vielleicht bevor wir da so ein bisschen reingehen, können wir nochmal-. Wir haben ja gesagt, okay, unser Thema ist Module Bundler am Beispiel von Webpack. Aber wir können ja trotzdem nochmal kurz drüber reden, was gibt es denn eigentlich da draußen, einfach nur, damit wir das ganze auch mal so ein bisschen genannt haben und mal nicht Webpack hier als das einzig wahre hinstellen, was man nutzen kann. 

Dennis: Und gleichzeitig damit auch noch eine Twitter-Frage beantworten. (Fabi: Die da wäre?) (Mario: Wie super Du das heute machst.)

Dennis: Freakmania, würde ich ihn einfach mal aussprechen, hatte nämlich unter anderem gefragt: Gibt es Alternativen? (Fabi: Ja. Fragezeichen.) Und da ist noch eine andere Frage, aber ich glaube, da kommen wir anhängend-. (Fabi: Die merkst Du Dir, ja? Du streust die Fragen ein.) Die mache ich. Wenn Du nicht automatisch wieder gleich eine Überleitung bietest. Du hast die beiden Worte eben schon mal in den Mund genommen. Die kommen bestimmt nochmal.

Fabi: Ich bin mal gespannt. Ja, genau, es gibt auf jeden Fall Alternativen. Also da draußen gibt es das eine oder andere, also man-. Webpack ist so, glaube ich, mit das Verbreitetste und ich glaube, die, von denen man ein bisschen was erzählen kann sind Rollup, Parcel und Browserify. Das sind eigentlich auch Dinge oder Module Bundler, die wir teilweise sogar in einzelnen Projekten einsetzen. Also wir haben-. (Sebi: Alle, alle.) Alle setzen wir ein? Rollup setzen wir bei unserer Rocket JS ein. 

Dennis: Warum da nicht Webpack?

Sebi: Weil das der Benni aufgesetzt hat. (Gelächter) 

Fabi: Also wenn man ... #00:30:02#.

Dennis: Hat ihn etwas am Webpack gestört, oder kannte er Webpack nicht?

Sebi: Ich glaube, das kam daher, weil Rocket JS eine Library ist, die wiederum in andere Projekte eingebunden worden ist. Und da hat Rollup vermutlich ein schöneres Template gehabt oder so, dass das da vielleicht so seine Stärken hatte. 

Fabi: Ja, also, ich glaube auch, wenn man viele Artikel irgendwie so liest, ist Rollup meistens das, was empfohlen wird für eben solche Libraries, die man irgendwie baut. Ich glaube, dass grundsätzlich Rollup JS-. Also, der Benni hat es eingesetzt, weil er einen Großteil, glaube ich im Rocket JS-. Also er hat es auch konfiguriert und so, der könnte wahrscheinlich ein bisschen mehr darüber erzählen. Aber, ich glaube, dass Rollup JS besonders stark ist bei diesen ESX Modulen, es ziemlich klein bekommt am Ende durch Tree Shaking und so. Also, so die richtigen Vorteile weiß ich eigentlich auch nicht. Aber Rollup wird auf jeden Fall bei den Bibliotheken, die man entwickelt, auf jeden Fall häufig genommen. Und ich glaube, ansonsten Webpack hat halt eine sehr große Durchdringung, weil sie erstens viele Dinge recht früh gemacht haben. Also ich glaube früher als andere Module Bundler. Gerade auch wenn man es jetzt anspricht mit diesen ESX Modulen und CommonJS Modulen, da war Webpack ziemlich der Vorreiter, dass die das als erstes auch unterstützt haben und-. (Dennis: Was sind das?) Im Endeffekt sind das Arten, wie ich andere JavaScript-Files importieren kann. CommonJS kommt aus Node.js, also aus dem Back-End Bereich, das kennt man mit dieser Require-Schreibweise. Das sind eigentlich so Common JS Module, wo ich einfach, ja, verschiedene Module laden kann. Und im Endeffekt ist mit ECMAScript 2015 kamen diese ECMAScript Module, die das ganze dann auch für den Browser unterstützen. Und die Schreibweise ist ein bisschen unterschiedlich, wie sie intern funktionieren ist ein bisschen unterschiedlich und beides zu unterstützen kann eben Webpack, was aber ein bisschen relevanter ist eigentlich für Leute, die Libraries entwickeln und Sub-Libraries haben, die entweder Common JS Libraries sind oder so eine ECMAScript Library. Das geht jetzt glaube ich ein bisschen in die Tiefe, aber so grundsätzlich Common JS kommt aus dem Back-End aus dem Node.js und ECMAScript Module, ES-Module, setzen das ganze für den Browser um, was auch die meisten oder eigentlich alle modernen Browser auch schon die letzten Versionen eigentlich so unterstützen. Genau. Und ansonsten, also wenn man nochmal auch in puncto Vorreiterschaft, war glaube ich Webpack früh jemand, der so etwas wie Tree Shaking konnte. Also ich habe noch ein bisschen Artikel auch vorher gelesen vor unserem Podcast, wo verglichen wurde, was kann denn A, was kann denn B. Und ein Artikel Ende letzten Jahres meinte, bei Rollup beispielsweise noch, ja, kann kein Tree Shaking. Und der hat auch einen sehr, sehr großen Vergleich gemacht mit Performance, wo auch Webpack, was die Minifizierung eigentlich über alle Modularten und so etwas auch hinweg, also auch über Common JS Module und somit am besten war. Nicht überall am besten, aber im Durchschnitt überall am besten war. Aber der nächste Artikel zum Beispiel, der jetzt vor zwei Monaten war, war dann, Rollup unterstützt jetzt auch Tree Shaking seit Februar, worauf sie irgendwie alle seit zwei Jahren da gewartet haben. Also von daher, ich glaube, die nähern sich erstens sehr stark an und sind aber dann, teilweise gehen in unterschiedliche Nischen. Also, ich glaube, Parcel wirbt so ein bisschen mit zero Configuration, also eigentlich ohne große Konfigurationen kann da so ein kleiner Dev-Server hochgefahren werden und baut dir schon erst mal alles so, dass du nicht groß etwas konfigurieren musst. Aber das ist genau halt auch der Punkt. Das ist sehr gut so für das schnelle Entwickeln, aber wenn es dann wirklich darum geht, große Applikationen damit zu bundlen und du am Ende eben diese Konfigurationsmöglichkeiten haben willst, die dir zwar auch Kopfschmerzen bereiten, ist man relativ schnell wieder bei Webpack. Und in den selben Topf würde ich auch, ich weiß nicht, Sebi, ob Du da ein bisschen mehr drüber weißt, Browserify schmeißen. Ich glaube, das ist auch, was Konfiguration und so angeht, auch nicht so schlecht. Aber-.

Sebi: Also bei Parcel-. Zumindest hatten wir Parcel ja ausgetauscht, hatten wir als erstes als Bundler für unser Admin Back-End genommen. Admin Front-, End-Back-End, Back-End Front, also, das was keiner sieht, (Lachen) weil es eben schnell gehen musste und dann Parcel eben dieses zero Configuration Promise hatte und das hat auch eigentlich ganz gut funktioniert. Da muss man nichts weiter machen und was ganz cool ist an Parcel, ist, dass es die ganzen Loader automatisch nachlädt, ohne dass ich die selber konfigurieren muss. Ganz einfach. Nur eben, wie Fabi schon sagte, man kann halt nichts konfigurieren. So, und ab da-.

Dennis: Was ist denn ein Loader? (Sebi: Ein-. Och Dennis!) Was ist denn los? (Lachen)

Sebi: Ja, okay. Vielleicht noch die Frage von Fabi wegen dem Browserify? (Dennis: Ja, natürlich.) Ich habe die Frage schon wieder vergessen. Aber wir hatten das-. (Gelächter) ... #00:35:25# (Durcheinanderreden) 

Dennis: Gleicher Topf wie Webpack, Fragezeichen?

Sebi: Gleicher was? 

Dennis: Topf.

Fabi: Das mit dem Deckel.

Sebi: Wir hatten Browserify, meine ich, eingesetzt-. (Dennis: Browserify oder Browserify?) Browserify. (Dennis: Browserify. Browserify.) Bundle B. (Dennis: (?Avengers oder Avengers?) (Lachen) (Dennis: Okay, weiter.) (?Gab es) doch letztens eine große Diskussion drüber. (Dennis: Pronunciation oder Pronunciation?) (Fabi: Ja. Dennis oder Dennis?) (Lachen) (Dennis: (?Jetzt antworte mal auf Deinen Favoriten.) Wir haben mal, ja, (Dennis: Ja, was denn jetzt?) das anders eingesetzt. Das war eine Freude. (Dennis: Ist das jetzt im gleichen Topf wie Webpack oder nicht?) Im gleichen Topf wie Rollup, weil wir das auch mal so nebenbei angespielt hatten. (Fabi: Also für uns im gleichen Topf.) Für uns im gleichen Topf, fanden das gut und reden jetzt nicht weiter drüber. (Dennis: Ich glaube, Sebi ist ein bisschen verwirrt mittlerweile, was die Frage angeht.) ja, okay, aber-.

Fabi: Also wir klammern Browserify mal ein bisschen aus, weil da habe ich jetzt auch nicht so viel Erfahrung mit. 

Dennis: Wir gehen davon aus, dass es ähnlich zu Webpack ist.

Fabi: Ja, oder wir nehmen einfach alle Aussagen zurück. 

Sebi: Und behaupten das Gegenteil. Also, Loader. (Dennis: Danke.) Gut. Loader bei Webpack sind die einzelnen Programme, die für die Verarbeitung eines bestimmten oder einer bestimmten Dateiart oder verschiedener Dateien zuständig sind. Beispiel: ein Loader kann alle Bilder bearbeiten. Vielleicht. Wenn er will. Nein. Überzeugt Dich nicht, Dennis? (Fabi: Sollen wir-?) (Dennis: Mach mal weiter.) Also, ein Loader könnte zum Beispiel alle JavaScript-Dateien verarbeiten, ein Loader könnte zum Beispiel alle CS-Dateien verarbeiten. 

Dennis: Warum heißt der Loader? (Sebi: Und nicht Loader?) (Gelächter)

Fabi: Weil er Dateien lädt, mit denen er das macht und die am Ende wieder ausspuckt. Also, wir können es vielleicht mal am Beispiel von Quiz Planet machen und mal schauen, was wir da so für Loader haben. Also grundsätzlich ist es so, dass bei Webpack bringt out of the box, (?ich habe ja schon am Anfang gemeint), JavaScript-Loader oder, und (?JS Loader) mit. Und alles andere-. 

Dennis: (?Du warst) Fabi, wunderbar! Nur, dass Du es gleich weißt und noch mitbeantworten kannst: Habt Ihr (?Plug-Ends) Loader, die als zwingend notwendig bezeichnet und warum?

Fabi: Ja. Kann ich vielleicht gleich mitbeantworten, (Dennis: Sehr gut.) aber wir gucken jetzt mal hier in unsere Webpack Punkt, Common Punkt JS-Datei in Quiz Planet. Und da haben wir verschiedenste Loader. Ich glaube, das interessanteste Beispiel ist da eigentlich unsere CSS-Dateien, die in unserem Fall nicht CSS, sondern Less Dateien sind. Also, da haben wir nämlich mehrere Loader. Was man in Webpack machen kann, ist, solche Loader chainen. Also, man kann sagen hier, der erste Loader lädt die Datei und macht folgendes. Der zweite Loader lädt dieselbe Datei und macht anderes. Und man definiert das eigentlich so, dass man Webpack sagt, hier, (?sagt ihm Test), sagt ihm, nach dem Schema sollen die Dateien aussehen. In dem Fall Punkt Less Dateien, mach mit denen folgendes. Und bei uns sind das fünf Loader, die wir haben. Wir haben zuerst einen Less Loader, der einfach-. Mist, so genau, was jeder einzeln macht, weiß ich nicht. Ich kann Dir sagen, was am Ende rauskommt (?wenn wir fünf Schritte).

Sebi: Ich kann Dir helfen. 

Fabi: Okay, Sebi, hau raus. (?Hast Du es offen?) Der erste ist der Less Loader. Was macht der Less Loader?

Mario: Der lädt die Less Dateien. (Dennis: Hätte ich jetzt auch gesagt.)

Sebi: Also dieses komplette Ding springt ja nur an bei Punkt Less Dateien. So, und Less ist ein CSS Präprozessor mit einem eigenen Syntax und das muss ja übersetzt werden von dem Less Syntax in einen ganz normalen CSS Syntax. Und das macht der Less Loader.

Fabi: Genau und wir haben aber fünf Loader davon. Der Less Loader, dann kommt der Resolve URL Loader, der wiederum kümmert sich, glaube ich, wenn wir da so Sachen haben wie, der Background soll aus einer Datei bestehen, dann wird da ein Pfad angegeben, dann wird nimmt dieser Resolve URL Loader-. Der Sebi wackelt so ein bisschen mit dem Kopf.

Sebi: Ich glaube, der ist nur für unseren speziellen Fall, dass wir relative und absolute URLs irgendwie toll, einzigartig (?händeln) wollen, weil die-. Ja, aber, ich glaube, den können wir weglassen. Der ist ein bisschen special. Wegen unserem-. Wenn wir innerhalb von den View-Dateien relative Pfadangaben haben, hätte out of the box der Less Loader immer den Pfad relativ zur Position der Less Datei genommen (Fabi: Ja stimmt.) und nicht zur Punkt View Datei oder irgendwie so etwas war das.

Mario: Also, das heißt im Grunde genommen, um Dennis Frage-. Ich versuche Dennis’ Frage zu beantworten, was ist eigentlich ein Loader? Die Loader sind quasi die Teile davon, die versuchen, das ganze darein zu packen. Also sozusagen das Gegenteil-. Nein. Nein.

Dennis: Du kannst es doch bestimmt mit Audiosprache ausdrücken habe ich überlegt, oder? (Audiosprachlaute) So, es kommen Signale (?rum)? Und das Signal wir durch irgendwelche, ja-. Im Grunde genommen ähnlich wie ein Kompressor, wahrscheinlich.

Fabi: Ja, da kannst Du auch verschiedene-. Also Du hast die halt auch chainen. Im Endeffekt macht-. (Mario: Ja stimmt.) Also vom Grundprinzip her nimmt ja ein Loader eine Datei, macht etwas damit und gibt sie wieder aus für den nächsten Loader. Solange bis alle Loader für diesen Dateityp fertig sind. Und am Ende kommt dann etwas raus, so wie du die Datei haben willst. Bei uns fängt es halt mit den Less Dateien an, mit dieser Punkt Less Datei, dann wird daraus-. 

Dennis: Mal ganz kurz, also weil-. Oder hatten wir das in der CSS Folge? Less ist eine Ergänzung-.

Sebi: CSS Präprozessor, also ein eigener Syntax, um Hilfsfunktionen zum Schreiben von CSS zur Verfügung zu stellen. 

Dennis: Okay. Danke. Fabi, Du darfst fortführen.

Fabi: Genau. Eigentlich (?war) ich gar nicht mehr so viel weiter. Ja, im Endeffekt kommen dann die Dateien so raus, wie du sie halt in deinem Bundle, was später Webpack an diesem Beispiel daraus macht-. Ja, einfach, bereitet die auf und macht sie fertig. Genau, und davon gibt-. Ja. Jetzt sind wir schon beim Thema Loader, was schon etwas tiefer ist, was die Webpack-Konfiguration angeht und die kann ich halt im Endeffekt nachladen. Die sind Open Sources, das sind einfach Node-Modules, die ich lade, meine Package JSON definiere und sage halt hier, ich hätte gerne folgenden Loader, den ich dann in meiner Web Punkt com-Datei, ja, einfach referenzieren kann. Wenn ich da jetzt den Less minus Loader habe, dann schaut der halt einfach in meinen Modules, gibt es da irgendetwas, was Loader heißt und nutzt dann diesen.

Dennis: Auf die Gefahr hin, ein bisschen zu springen gerade-. (Mario: Haben wir jetzt schon so wenig gemacht.) (Lachen) Genau, wo wir beim Thema sind. Vielleicht nochmal ganz kurz so grundsätzlich: was ist Webpack? Wie komme ich an Webpack? Wie starte ich das? Wie läuft das? Welche Umgebungen hat das? Was brauche ich dafür? Sagen wir mal so die-.

Fabi: Bei Webpack musst du eigentlich nicht viel machen, außer wenn Du ein Node-Projekt hast, sagst Du einfach, oder ein JavaScript-Projekt, sagst Du einfach (?NPM) install, dann sagst Du Webpack und wenn Du möchtest auch Webpack minus CLI. Nein, nicht nur wenn Du möchtest, solltest Du schon beides machen. Webpack ist im Endeffekt auch geschrieben in JavaScript und, ja, kümmert sich um dieses gesamte Bundling. Also, auch diese ganzen Loader sind in JavaScript geschrieben, also es ist im Endeffekt einfach eine Klasse, die eine bestimmte Funktion haben muss. Ich weiß gerade den Name gar nicht. Diese Funktion wird halt immer von Webpack aufgerufen und sagt halt hier, wenn die Funktion aufgerufen wird, kriegst du meinen gesamten processing context mit und kannst damit an Dateien, die an diese Funktion übergeben werden, irgendetwas machen und lieferst sie am Ende in einem Crawl Back wieder zurück. Genau, und ich nutze dann im Endeffekt Webpack auch über die CLI. Also meistens hat man dann in seiner Package JSON irgendwelche vordefinierten Skripte, die dann halt sagen, beispielsweise bei uns gibt es die Schritte Bild Doppelpunkt Local, Bild Doppelpunkt Dev und Bild Prot. Und die haben dann einfach einen Befehl Webpack CLI. Und dann wird ein Webpack Config File mitgegeben. Wir haben für jede unserer Umgebung, Local, Dev und Prot, ein eigenes Config-File, die wiederum auf einem gemeinsamen basieren. Also ein Grundding, Basis-File kann man Webpack (?von CommonJS), wo der Großteil drinsteht und dann für die einzelnen Umgebungen haben wir dann eigene Konfigurations-Dateien, die nochmal für die Umgebung spezifisch etwas machen. Beispielsweise, weil wir natürlich in-. Willst Du noch etwas-? Ich habe gerade in bisschen Angst, jetzt wird gerade-. Der Dennis hat gerade-. Ich gucke gerade die ganze Zeit den Dennis an und hinter dem Rücken wird scheinbar gelacht. 

Mario: Ich habe verständnisvoll genickt und Sebi macht sich über mich lustig, weil er glaubt, dass ich es doch nicht verstanden habe. 

Sebi: Der Mario hat so ausgesehen, als würde er Musik hören. 

(lachen)

Mario: Nein, ich habe genickt, weil ich das Gefühl hatte, ah, jetzt habe ich es verstanden.

Fabi: Das ist ja schon mal nicht schlecht, aber es hat mich leicht verunsichert. Mario, hör auf zu nicken! (Mario: Entschuldigung.) Nein, das warst nicht Du, es war so eine Kettenreaktion. Dennis hat gelacht, weil Sebi gelacht hat, Sebi hat gelacht, weil-. (Dennis: -Mario genickt hat.) Ich muss mich ein bisschen offener hinsetzen, so dass ich Euch alle sehe. (Lachen)

Sebi: Sorry, jetzt haben wir Dich rausgebracht. 

Mario: Damit Du Dich noch besser ablenken lassen kannst, meinst Du?

Fabi: Genau. Nein, aber so Dinge, wie dass wir beispielsweise in Dev auch gerne Source Maps haben wollen-. Also, im Endeffekt, wenn Webpack das ganze minifiziert und kleiner macht aus TypeScript JavaScript macht, möchten wir aber beim Debuggen, wenn wir beispielweise einen Browser auch zum debuggen haben wollen, gerne Source Maps haben, um im Browser eben TypeScript-Code sehen zu können und nicht den JavaScript-Code. Oder in Production haben wir ein Tracking Tool, das nennt sich Sentry und da laden wir auch die Source Maps hoch, dass die Fehler nicht komplett kryptisch aussehen und wir irgendwie sehen, an der Stelle ist ein Fehler aufgetreten. Das ist dann irgendwie die komisch hässlichen Variablen, ja, mit komischen Zeilen, die alles in Zeile eins ist, ja, genau-. Also so Dinge sind dann halt spezifisch für die einzelne Umgebung, aber das ist dann auch immer abhängig von dem, was jeder so ein bisschen braucht und benötigt. Aber da kommen dann auch die Stärken von Webpack (?zum Tragen), dass man eben für die einzelne Umgebung bestimmte Dinge genau machen kann. Ja.

Sebi: Okay. So Überblick. Du sagtest ja, also wie komme ich dran. Also kurz über NPM. Und sollen wir jetzt wieder zurück zu den Loadern springen? Weil, es ging ja auch noch so ein bisschen, was halten wir für essentielle Loader oder auf welche würden wir niemals verzichten wollen. Also vielleicht-. Ach so, ja-. Nein, gerne, springen wir nochmal, ja.

Dennis: Wir springen nochmal. Also, das ist dieses Ding und Du hattest gerade von unterschiedlichen Konfigurationen gesprochen. Was ist noch-? Also gibt es noch irgendwie eine Datei? Dieses (?Package JSON-Ding) wahrscheinlich, oder? 

Fabi: Ja, aber das hat nichts mit Webpack zu tun. 

... #00:46:30# (Durcheinanderreden)

Dennis: Okay, was brauche ich noch zwangsweise? Was ist eine minimale Webpack-Konfiguration?

Fabi: Das-. Wundervolle Frage, Dennis! Mann, Mann, Mann. Willst Du? Soll ich?

Sebi: Ich wollte nur-. Also, Du weißt mehr wahrscheinlich. Ich wollte nur, ich glaube, ab Webpack vier haben sie auch zero config mit ganz guten Standard Parametern, so. (Mario: Das stimmt.) Und das heißt also minimal gar nichts und jetzt-.

Fabi: Genau, Minimal bedeutet aber zumindest einen, glaube ich, auch über diese Webpack CLI, wenn man gar keinen Config-File hat, einen Entrypoint zu definieren. Entrypoint bedeutet, was ist die Startdatei, von der aus auch dann dieser Dependency Graph aufgebaut wird. Ist meistens irgendwie eine Index JS oder Index TS. Bei uns, in unserem-. Bei uns ist es auch eine Index TS bei Quiz Planet. Genau. Das heißt, von der wird angefangen, von der wird der Dependency Graph aufgebaut und wenn die Applikation aufgerufen wird, wird das sozusagen der erste Einstiegspunkt. Und, genau, den brauchst Du sozusagen. Webpack muss wissen, wo es anzufangen hat.

Dennis: Aber, das fasst ja jetzt nicht nur JavaScript-Dateien oder ... #00:47:39# Dateien an, sondern auch HTML-Dateien. Richtig? (Fabi: Das ist richtig, ja.) Wie komme ich jetzt, wenn ich eine Startdatei in Index TS angebe, wie komme ich von da dann, wie kommt Webpack da dann auf die alle HTML-Dateien?

Sebi: Das ist eine sehr gute Frage. Gar nicht. Eigentlich gar nicht. Wenn Du es out of the box nimmst, erzeugt es Dir nur eine neue JavaScript-Datei. Die müsstest Du dann in eine HTML-Datei referenzieren. Aber es gibt so etwas wie Plug-Ins, (Fabi: Genau.) die, Fabi-? Schnell. Wie das genau funktioniert, das ist ein ganz großes Rätsel, aber es gibt ein HTML-Webpack-Plug-In, was, glaube ich, bei uns dafür zuständig ist, oder?

Fabi: Ja, nein, also man muss eigentlich-. Es ist ein Zusammenspiel aus diesen Loadern und den Plug-Ins. Also Plug-Ins gibt es verschiedene. Wir haben beispielsweise-. Ja, jetzt springen wir wirklich wieder. Aber, ja, das Plug-In bei uns macht beispielsweise etwas. Dieses HTML-Webpack-Plug-In-. Es gibt einen Standard-Loader, der einfach sagt, okay, nimm folgende HTML-Files und kopiere sie halt auch irgendwo mit hin. Aber, wir haben jetzt beispielsweise noch Plug-Ins, die dann noch ein bisschen über solche Loader hinausgehen. Zum Beispiel dieses HTML-Webpack-Plug-In macht folgendes. Wir haben eine Index HTML Datei, wo bestimmte Sachen ersetzt werden, weil wir haben-. Diese Index HTML-Datei ist für unser Dev-Environment und für unser Production-Environment leicht unterschiedlich. Und weil wir anfänglich dafür zwei verschiedene Dateien hatten und das eben nicht so kompliziert machen wollten, haben wir auch ein Webpack-Plug-In, was dieses Template nimmt und bestimmte Parameter (?injiziert). Also Environment-Variablen wie in welchem Environment befinde ich mich, welche Versionsnummer habe ich und noch so ein paar andere, die halt eben wichtig dafür sind. Und dieses Webpack-Plug-In macht genau das, dass wir anstatt zwei Index HTML-Dateien für die jeweilige Umgebung nur eine haben und darin Dinge verändert. Also man schreibt dann in diese Index HTML spezifische Sachen rein, die halt von diesem Plug-In kommen. Also, das ist eine bestimmte Schreibweise, ich glaube, das fängt irgendwie an mit irgendwas Unterstrich, Webpack, Unterstrich, Environment, irgendetwas. Müsste ich jetzt auch mal nachgucken, wie das File genau aussieht. Also das ist dann spezifisch halt zu diesem Plug-In, was man sich noch reinladen kann. Genau. Und standardmäßig, wenn man nichts definiert, würde Webpack einen Dist-Folder erzeugen. Und in diesem Dist-Folder befinden sich alle Dateien, die sozusagen der Bundler dann, Webpack dann gebaut hat. Also, das könnte in einer Datei sein, das könnte in mehreren Dateien sein. Genau.

Sebi: So, und weil nur Webpack in der Konfiguration ja weiß, wie viele JavaScript-Dateien, wie viele verschiedene-. Fabi meinte ja, das (?Vendor) zum Beispiel, wenn man seine Node-Modules separat halten möchte von seiner Applikation. Und weil das ja abhängig ist von der Konfiguration, ist dieses Webpack HTML-Plug-In dafür da, damit man das nicht, wenn du die Konfiguration änderst, auch deine HTML-Datei ändern musst. Sondern dass dann in die HTML-Datei die Script-Tags eingefügt werden.

Dennis: Ist das ein (?SNC) Plug-In?

Sebi: Ja.

Fabi: Eins, auf das Du nicht verzichten würdest?

Sebi: Och, ja. Also, nein. Also, wie man mag. Fabi? (Gelächter) (Fabi: Ja-.) Ich würde auf andere nicht verzichten. Ich finde das nicht so wichtig. Zum Beispiel haben wir ja bei uns in der HTML-Datei die CSS-Datei hart, hart referenziert, also die wird auch glaube ich nicht ersetzt. Und ich würde eher weniger auf diese Image Loader verzichten, weil ich das irgendwie so eine ganz coole Funktionalität finde, dass die Bilder kopiert werden (lacht).

Dennis: Also die werden in Base64 kodiert, oder was macht das?

Sebi: Ja, wobei, das haben wir ausgeschaltet. Aber, das fände ich, coole Sache-. Ja, also die Bilder beziehungsweise das Webpack-Ding liest sich ja alles durch. Welche Dateien muss es zusammensammeln und alles in den Dist-Ordner kopieren, damit eben auch dieser Dist-Ordner nicht viel zu groß wird, sondern wird dann auch selektiert. Wenn ich das Bild nicht auf meiner Internetseite verwende, dann brauche ich es auch nicht irgendwie hochladen auf mein Webspace. Dafür ist das da. Und das heißt, dann Webpack sieht alle Dateien, die ich irgendwie verwende. Und in dem Prozess, wo es die eben sieht, da springen ja dann die Loader ein, oh, ich sehe jetzt gerade eine JPEG-Datei, also habe ich hier einen Loader, der JPEG-Dateien irgendetwas mit machen will. Und dann springt der an und dann guckt der sich die JPEG-Datei an und sieht, oh, die ist aber kleiner als zehn Kilobyte. Also kann ich die auch ersetzen durch einen Base64 kodierten String. Oder, oh, die ist aber größer. Also muss ich die JPEG-Datei kopieren in den Dist-Folder und jetzt nur die URL zurückliefern. Das macht der dann. Ja, und das macht der dann auch für Sounds, Videos, Schriftarten. Gut. Das Ding heißt-. Wie heißt das? URL-Loader? Habe ich vergessen. Also es ist so ein Loader. Und den oder diese Schritte mit gerade Bilder und (Fabi: Der heißt URL-Loader, ja.) Sounds und so etwas, den finde ich schon ganz cool. Und ansonsten ist natürlich essentiell irgendwie TypeScript, TS Loader, also dass man TypeScript in JavaScript umwandelt. Sonst funktioniert halt gar nichts im Browser. Und für den Fall, dass man nicht so sehr auf TypeScript abfährt, dann braucht man wahrscheinlich auf jeden Fall den Babel, damit man am coolsten, hipsten ES.next, weiß ich nicht, 2019 Syntax programmieren kann und sich nicht so viele Sorgen machen muss, dass das auch in älteren Browsern funktioniert. 

Dennis: Die ganzen Loader und die Plug-Ins und so weiter, die Ihr cool findet, die packen wir auch nochmal in die (?Show Notes)? (Mario: Ja.)

Fabi: Die packen wir auch nochmal in die Show Notes, auf jeden Fall. ... #00:53:45# Oh Gott, dann müssen wir uns ja merken, was die alles erzählt haben. Aber nochmal zu den HTML-Dateien, also wir haben, wir entwickeln-. Oder, unsere Applikation ist ja eine (?View-Applikation). Das heißt da sind diese ganze dynamischen Views, die dann angezeigt werden auf jeden Fall in unserem JavaScript Bundle am Ende mit drin. Aber diese statischen Dateien, wie diese erste Index HTML, die eben nicht referenziert wird-. Also, die erste Index HTML referenziert ja dann meinen JavaScript-Code, der ausgeführt würde. Und das wiederum würde über einen Plug-In reinkommen. Also, wir hatten ja gesagt, wir haben diese HTML Webpack-Plug-In, was diese Index HTML lädt und noch so Parameter (?injiziert). Das haben wir jetzt aber noch nicht so lange. Davor hatten wir nur das Copy-Webpack-Plug-In und das kopiert eben alle statischen Dateien, mit denen nichts mehr getan werden soll an bestimmte Orte. Und da war vorher unsere Index HTML drin und jetzt sind da noch so Dinge drin, wie-. Wir haben so AGB-Seiten und so etwas, mit denen eigentlich nichts gemacht werden muss, die nur reinkopiert werden sollen. Die sind noch in diesem Copy-Webpack-Plug-In.

Dennis: Was mich jetzt noch-. Was ist denn jetzt der genaue Unterschied zwischen Plug-Ins und Loadern? Weil, wenn Du jetzt gerade gesagt hast, der Plug-In, also es gibt ein Plug-In, was statische Dateien einfach rüberkopiert und ein Plug-In, was was lädt und damit etwas macht-. Oder ist das einfach nur so eine Definitionssache, sind sie eigentlich sehr gleich geschrieben?

Fabi: Im Endeffekt, ich würde sagen-. Oder willst Du was? (Sebi: Nein, ich will nicht, aber ich würde, wenn Du nicht-.) (Lachen) Loader sind dafür da, die (?produzieren) glaube ich alles, was über diesen Dependency Graph irgendwie aufgebaut wird und das am Ende in ein Modul gepackt wird. Also, wenn wir alles das, was am Ende in dem einen Bundle landet, das machen diese Loader. Also alle Dateien, die davon irgendwie geladen werden, weil der weiß, okay, Datei A referenziert Datei B, übernehmen diese Loader, dass die im Endeffekt damit etwas machen, um am Ende dieses eine Bundle da raus zu bekommen. Und Plug-Ins sind meiner Meinung nach im Endeffekt noch dafür da, damit alles, was da drum rum noch irgendwie geschehen muss, damit ich eine funktionierende Applikation daraus bauen kann, übernehmen Plug-Ins. Also so etwas wie statische Assets zu kopieren. Dann, ja zum Beispiel dieses HTML Webpack Plug-In-. Wir haben ja noch irgendeinen Plug-In, was die Versionsnummer und die Environment-Variablen injizieren in diese Webpack-Konfiguration. So würde ich es zumindest, glaube ich, beschreiben.

Sebi: Doch, ja. Alles, was außen rum, was dafür, wofür du keine Loader nehmen kannst, nimmst du einen Plug-In.

Fabi: Genau, was im Endeffekt nicht durch die Loader durchläuft.

Sebi: Und, ja, manchmal geht es auch so ein bisschen Hand in Hand wie bei diesem View Loader, weil alle View Dateien, die-. View-Dateien, das sind diese Single-File-Components, wo du HTML und JavaScript und CSS in einer Datei schreibst. Und der View Loader, der splittet das ja dann nochmal auf. Also die Loader, von der Reihenfolge, wie du sie konfigurierst, gehen von oben nach unten und dann so wenn, die-. (Fabi: Von oben nach unten?) Also, die (?Rules) gehen von oben nach unten, die Loader gehen von unten nach oben. (Fabi: Das fand ich auch sehr strange auf jeden Fall so. Es fängt hinten an, rechts im ... #00:57:03#) ja, ganz. 

Dennis: Und die Plug-Ins sorgen dafür, dass die alle mehr machen können? (Sebi: Genau.) Okay. 

Sebi: Hey, Plug-Ins. (Dennis: Ha, so. Das ist ja gar nicht-.) Gar nicht kompliziert.

Dennis: Aber ich kriege so langsam ein ganz gutes Bild davon. Ihr habt das am Anfang so dargestellt, als wir in der Vorbesprechung waren, ja, Webpack kann man nicht so viel drüber sagen. 

Mario: Da bin ich immer sehr skeptisch, wenn das jemand behauptet.) 

Dennis: Gibt dann ja doch schon einige Details. (Sebi: Ja.) Aber, wir sind ja auch noch gar nicht fertig.

Sebi: Nein. (Fabi: Stimmt.) Ich will das nur noch kurz erzählen, weil wir das erst neulich eingebaut haben. Falls irgendjemand Quiz Planet über das Wochenende nicht spielen konnte-. (Gelächter) Also-. (Fabi: Dann hat das damit nichts zu tun.) Das hatte damit auf gar keinen Fall irgendetwas zu tun. Polyfills, weil wir ja jetzt gesagt haben es gibt Babel und Babel transpiliert JavaScript in verständliches JavaScript für ältere Browser. Gibt es immer noch ein paar Funktionalitäten, die im neuen JavaScript hinzugekommen sind, die Babel nicht einfach so ersetzen kann, sondern da muss man Polyfills für verwenden. Polyfills sind JavaScript-Programme, die Funktionalität nachreichen, die erst, also die quasi rückwärts gefüllt werden dann. Zum Beispiel so etwas wie eine Funktion (?Array includes) oder so. Also, dass ich gucken kann, ist das Element eigentlich in dem (?Array) drin. Das hat man eben vorher nur mit Index off irgendwie rausbekommen. Und jetzt gibt es eben noch eine andere Schreibweise dafür. Und solche Sachen, die einfach nur hinzukommen, die werden halt nicht transpiliert in irgendetwas anderes, sondern da muss man einen Polyfill für nachliefern. So, und unter anderem also müssen wir auch Polyfills nachliefern für ein paar Sachen und dafür haben wir ja einen eigenen Einstiegspunkt. Das heißt alles, was gepolyfilled wird bei uns ist eine eigene JavaScript-Datei, die geladen werden muss, bevor überhaupt unsere Hauptapplikation anfängt zu arbeiten. So, und das macht Webpack für uns ganz komfortabel.

Dennis: Aber das wird überall dann geladen? Die Polyfills?

Sebi: Überall. Überall.

Dennis: Also auch da, wo es dann die Funktionalitäten schon gäbe? 

Sebi: Ja, aber da werden die nicht ersetzt, aber geladen wird es. Das ist ein bisschen-.

Fabi: Und das war jetzt unser Problem da am Wochenende?

Sebi: (lacht) Was? Problem? Jeder über Android fünf hatte kein Problem. (Lachen) Ich weiß nicht. Das Problem war am Wochenende, dass die-. Muss ich kurz nachdenken. Ach, so, genau. Wir hatten ein neues Update unseres (?Error Tracking SDCas) und das Error Tracking SDCa brauchte ein paar Polyfills. Und das haben wir aber erst am Montag dann herausgefunden. Und dadurch, dass das halt im Error Tracking war, sind auch keine Errors aufgetreten, weil die konnten ja nicht getrackt werden. Weil sie waren ja nicht… #01:00:16#. Aber das haben wir dann auch herausbekommen. Aber, hey, Polyfills und Webpack, so schließt sich der Kreis.

Fabi: Und, aber da hast du ja gerade den Punkt genannt, dass das ein separater Einstiegspunkt-. Ich glaube, das hatten wir vorhin nicht so ganz erklärt, weil wir ja bei minimaler Konfiguration waren und gesagt haben: Was muss ich denn konfigurieren? Und dass ich halbwegs sagen kann: Der Einstiegspunkt ist meine Index-TS und bei diesen (?Entry-)points kann ich eben auch mehrere definieren. Also ich kann sagen: Mein Haupteinstiegspunkt ist die Index-TS. Und wenn ich jetzt noch sage: Wir haben ein Beispiel (?sozusagen): Unser Eintrag bei Quizplanet ist game:blablablaindextspolyfill:polyfillts. Und was im Endeffekt Webpack dann daraus macht, wenn es weiß, da sind zwei Einträge, hat es jeweils einen… #01:00:57#, für eben jeweils einen dieser Einstiegspunkte und baut zwei verschiedene Bundles daraus. Das kann dann jetzt eben dieser Polyfill-Punkt sein. Es kann-. Wir hatten das eine Zeit lang mal, weil wir unser Logging-Framework laden wollten, bevor der Rest der Applikation geladen wurde, falls irgendwie beim Laden an der Abhängigkeit irgendetwas fehlschlägt-. Hatten wir da auch einen eigenen Einstiegspunkt, das sich dann Logger nannte. Und dann konnten wir das laden, danach erst andere Abhängigkeiten, weil es einerseits unsere eigene App-Code war. Andererseits das, was wir auch noch von Facebook als STK laden wollen. Und da habe ich, da wir alle Fehler mitbekommen wollten, hatten wir das einmal in einem eigenen Bundle drin. Beispielsweise, man kann da auch mehrere Bundles bauen je nach Anwendungsfall. Und da ist ein ganz-. Weil wir noch bei Loadern und Plug-ins waren, die ganz interessant sind, was ein echt ganz cooles Plug-in ist, ist, das-. Ich glaube es heißt, ich habe das noch offen, Webpack-Bundle-Analizer. Das ist ein Plug-in, was man eigentlich nicht durchgehend drin hat, aber das kann man auch immer mal wieder in seine Konfigurationsdatei packen. Wenn man den Bundle drin hat, was passiert ist im Endeffekt im Nachgang zu dem Wandeln, wird dann Browser geöffnet, wo du so eine Treemap-Visualisierung bekommst von allen Dingen, die in deinem Bundle drin sind. Und je nachdem wie groß diese viereckige sind, die man da visualisiert sieht, desto größer ist die Datei und so. Und da kann man gerade wenn man mehrere Bundles hat wirklich schauen: Habe ich denn da alles richtig gemacht mit dem Import? Oder habe ich nicht irgendwie mich da irgendwie doppelt referenziert? Und sind meine Bundles jetzt auch wirklich so groß, wie sie sein sollen? Dadurch kann man auch noch einmal identifizieren, weil wir auch viel dabei sind, Performance zu optimieren: Was sind denn eigentlich die Punkte, wo wir noch ein bisschen Performance optimieren können? Warum ist ein bestimmter Block so groß wie er ist? Und kann man daran noch etwas drehen oder ist da wirklich nur das drin, was wir benötigen? Genau, das ist echt, das ist ein ganz cooles Plug-in, das wir sehr viel nutzen auch.

Dennis: Es sieht auf jeden Fall auch sehr cool aus, finde ich. Da läuft so ein-. 

Fabi: Tierfilm-Animation, ja. 

Dennis: Es loopt gerade und das ist, ja-

Sebi: Das ist richtig cool.

Dennis: Hypnotisierend. 

Sebi: Großartig.

Fabi: Ja, das ist sehr gut. 

Mario: Insgesamt klingt dieses Webpack ziemlich hilfreich. Also ich habe jetzt nicht, glaube nicht, jedes Detail verstanden, aber es klingt insgesamt schon nach etwas, was einem ganz schön viel hilft.

Fabi: Ja, auf jeden Fall. (I1: … #01:03:20#.) Man muss sich aber durchaus auch ein bisschen damit beschäftigen. Ich war eine Zeit lang immer, habe ich gesagt, ich war froh, dass sich der Benny darum gekümmert hat. Weil das für mich irgendwie so, jetzt ursprünglich mal konfiguriert ist, war da auch sehr tief drin. Weil man kann halt wirklich sehr, sehr, sehr viel machen. Wir haben ja jetzt wirklich nur absolut an der Oberfläche gekratzt. Also Webpack kann auch noch ein paar Sachen mehr. Auch so ganz interessante Dinge, wie noch …#01:03:43#, wenn man den Dev-Server nutzt. Also der kann Out-of-the-Box und Dev-Server nehmen, wo die Applikationen automatisch-. Man muss sich im Endeffekt erst einmal das Bundle erstellen lassen vom Webpack. Dann einen eigenen Server hochfahren, der es anzeigt so für das lokale Entwickeln, so dass man Webpack out of the Box, dass du dem sagst: "Fahr mal einen Server hoch und mach mal alles ganz automatisch." Und da gibt es Hot-module-replacement. Das heißt, wenn er merkt, eine Datei wird verändert, dann muss nicht das ganze Bundle neu gebaut werden, die Seite wird neu geladen. Sondern sie schaffen es irgendwie, diesen Code dann zu initiieren, ohne dass sich die Seite neu lädt. Also wenn du nur einen bestimmten (CSS-Teil) geändert hast, dass im Endeffekt sich nicht beim Entwickeln die Seite neu laden lassen muss. Und da gibt es noch ganz, ganz viel Schnickschnack. Also ich bin noch nicht durch die komplette Dokumentation von Webpack durch. Und es hilft sehr, sehr viel, aber man muss da ab einem bestimmten Punkt auch ein bisschen was wissen darüber.

Dennis: Ja, klar. Ich meinte jetzt nur, also da fand ich es jetzt tatsächlich ganz hilfreich so, dass Sie noch ein bisschen so aus der Historie erzählt hat. So, dass man diesen Kontrast auch hatte zu dem, wie man das sonst hätte lösen müssen alles. Das klingt auf jeden Fall einfacher, definitiv.

Sebi: Das stimmt. Ja, ansonsten vielleicht, als Miniatur-Ausflug, was Anselm irgendwie die Woche machen wollte, war. Er wollte ein Hintergrund-Bild, was aus drei Bildern besteht, bauen. Was sich aber mit irgendwie fixen Abständen-. Er hat auf jeden Fall gesagt: Ok, er macht einfach eine SVG daraus und referenziert die Bilder aus dieser, innerhalb dieser SVG dann. Dass das dann schön ausgerichtet ist. Und hatte das dann irgendwie so gemacht, dass er in Webpack im eigenen SVG-Loader nur für dieses eine Bild gebaut hat. Was dann wiederum in dieser SVG-Datei die Bilder reingesetzt hat und hat erst-. Das war irgendwie ganz cool. Weil dann habe ich so: "Hut ab, cool, du hast dich mit Webpack angelegt." Ok, ich weiß auch nicht, warum ich das erzählt habe. Ich fand es (?irgendwie) ganz cool.

Fabi: Ja, definitiv. Will ich auch mal sehen.

Sebi: Das müssen wir uns mal angucken, gleich... #01:05:58#.

Fabi: Aber, ich glaube, wir haben genug gekratzt, oder? 

Dennis: Ja, ist, glaube ich, ganz gut. Wir haben noch irgendwie Filme gut, wenn die Leute uns schreiben, dann wollen wir auch auf möglichst viel davon eingehen. War noch ein weiterer Twitter-User, Alex, der fragte-. Am Anfang war ich mir nicht ganz sicher, ob ich die Frage-. Also ich bin mir immer noch nicht ganz sicher, ob ich die Frage verstehe. Aber ich lese vor: "Was sollte man alles mit Webpack machen und was sollte lieber MDS-Framework geregelt werden?" Also gibt es da irgendwelche Sachen-? Keine Ahnung. Gibt es Funktionalitäten, die Webpack hat, die manche Tracing-Frameworks haben? 6:50

Fabi: Puh. Ich glaube, da-. 

Dennis: Muss ich erst nachdenken. 

Mario: Wir brauchen so einen Jingle für nachdenken. 6:53

Fabi: Ja, ich glaube auch. Eine Trommelwirbel… #01:06:57#. 

Sebi: Jeder schreibt eine Antwort auf. 

Mario: Pass auf, falls du ankündigst. Trommelwirbel ankündigen, das kann ganz schön Arbeit kosten.

Fabi: Ja, also wirklich, zumindest-. Ich war gerade so ein bisschen am überlegen, dass Webpack ja auch die Möglichkeiten hat, dynamisch Bilder nachzuladen und so. Also das-. Das ist auf jeden Fall eine Möglichkeit, die wir über einen Menschen stellen, über Webpack lösen. Also es wirklich im Code später das Bild erst geladen wird, selbst wenn die Seite schon geladen wird. Dass man im Endeffekt im Nachgang so ein bisschen reinplöppelt, aber-.

Dennis: Dann würde ich sagen, Alex, schreib uns nochmal ein Beispiel.

Fabi: Ja, also wenn Alex ein gutes Beispiel hat, was man da-. Oder, Sebi, hast du noch eins?

Sebi: Nein, oder-. Mir fällt gerade nicht ein, wo die Überschneidung ist. Vielleicht wenn er da was hat, wo er so eine Überschneidung sieht, würde uns das helfen.

Dennis: Dann greifen wir das nächstes Mal auf. 

Sebi: Jeah, Alex, schreib uns.

Fabi: Mit einer kompetenten Antwort beenden wir diesen Informationsblock, oder? 

Dennis: Ist ja auch wichtig, dass man die Grenzen seines Wissens kennt.

Fabi: Ja, man soll immer aufhören wenn es am schönsten ist. 

Dennis: Ja, dann Fabi, ich glaube, du bist hier an der Sound-Machine, an der Aufnahme. 

Fabi: Achtung, Achtung. Ich drücke den Buchstaben S. (Musik) 

Dennis: Fantastisch. Jetzt hat besonders 56-Kay-Rockstar Tränen in den Augen. Der hat uns nämlich geschrieben wird, dass er den Pick-of-the-Day so schön findet. Den finden wir auch sehr schön. Herzlich willkommen beim Pick-of-the-Day. 

Fabi: Wer hat alles was? 

Dennis: Sebi. 

Sebi: Oh, ja, nein, was-? Ja, ich fange mal-. Seit wie vielen Folgen gibt es jetzt jedes Mal wieder eine Überraschung? Nein, ich fange jetzt einfach-. Ich verstehe mich wieder ein bisschen. Weil es ist ein sehr technisch-. Ich fand, mein Pick-of-the-day ist die, das e-book „Redis in action“ von Redis Labs. Die, fand ich, sind erstaunlich coole, tiefgehende Artikel über: Was kann ich wie in Redis lösen. 

Dennis: Tiefgehender als unsere Folge zu Redis?

Sebi: Noch-. Oh, oh mein Gott. Habe ich die gehört? War ich da dabei? Oh Gott. 

Dennis: Da warst du dabei, ja. #01:09:22#. 

Mario: Da ward ihr beide dabei.

Fabi: Ich fand nämlich auch, als ich den damals gelesen habe, fand ich das mega gut. Und ich erinnere mich zurück an unsere Redis-Folge, wo ich erzählt habe, dass wir da mal eine Sache umgesetzt haben, wo wir dann Suchalgorythmus in Redis umgesetzt haben. Was auch so in dieser Redis Labs, wie heißt das nochmal? (Sebi: I2: Redis in action.) Da stand nämlich genau das Beispiel so in der Art drin, also ich habe es ein bisschen abgewandelt. Ja, hat genau ein Montag gehalten, bis wir dann gemerkt haben, bei einem Cluster funktioniert das ganze aber nicht so wirklich. Nein, aber ich finde es auch sehr, sehr gut. Ich wollte das jetzt nicht schlecht reden. Ich fand es echt super interessant.

Sebi: Ja, ich hab jetzt ein (?Log), falls das-. Kann man ja(?irgendwann eine Folge über currency machen) oder auch nicht. Oder dann reden wir einfach alle gleichzeitig in der Folge. Nein. Also, ich bin fertig. (Lachen)

Dennis: Ja, Fabi. 

Fabi: Ich habe eine Vorgeschichte. Also ich bin, was mein Handy angeht und mein Mobilfunkvertrag, seitdem ich 14 bin, gebunden an T-Mobile. Fing damals an mit iPhone, weil ich unbedingt eins haben wollte. Jetzt kann man bestimmt auch-. Das war das iPhone 3. 

Mario: Du warst dann 14, als das erste iPhone rausgekommen ist? 

Fabi: Nein, ich weiß nicht. Wie alt war ich denn? Nein, ich war älter, ich war wahrscheinlich 16. Wie alt? … #01:10:42# 

Dennis: 2007 ist das erste rausgekommen.

Mario: Ist auch nicht wichtig.

Fabi: … #01:10:45# selbst rechnen, wie alt ich bin. 

Dennis: 2008 ist das 3 G dann-. 

Fabi: Dann war ich vielleicht 17. Ja, ich-. 2009 3GS. (Mario: Ist auch nicht so wichtig.) Ja, dann war es 2008, ok… #01:10:56#. 

Sebi: Ich weiß gar nicht, ob es gerechtfertigt ist. 

Fabi: Ja, ich war dann irgendwann 18… #01:11:01#. Ich bin sehr schlecht in Erinnerungen. Wir hatten, als wir in San Francisco waren, hat mich der Sebi nach Filmen gefragt, die ich mal gesehen habe und um was es ging. Schon nur zu sagen, welche Filme ich gesehen habe, war sehr schwer. Er hat mich auch nach Filmen gefragt, so: "Hast du den gesehen?" Und so: "Mhm. Weiß nicht. Erzähl mal was. Könnte sein." Also meine Erinnerung ist sehr schlecht. Von daher, irgendwas zwischen 14 und 20 war ich alt. Und bin seitdem Nutzer eines T-Mobile-Tarifs. Eines überteuerten T-Mobile-Tarifs. Und war immer zu faul, zu wechseln. Jetzt ist der erste Tarif, den ich wirklich eigentlich ganz cool finde. (Dennis: Funk.) Ja. Finde ich ganz cool. 

Mario: (?Hast du) auch Werbung für bekommen.

Fabi: Es war auch so eine Instagram-Werbung. Ich habe es mir angeguckt und dachte echt danach: Finde ich cool. 

Sebi: Wie schreibt sich das?

Fabi: F U N K ist von Freenet… #01:11:45#. Ist 02-Netz und ist ein täglich kündbarer Vertrag. Hast nur zwei Optionen. Entweder von 69 Cent, 1 GB am Tag oder für 99 Cent am Tag unendlich, unlimited. 

Dennis: Ich muss aber ganz ehrlich sagen. Also-. 

Fabi: Es hat noch ein paar Haken. 

Dennis: So richtig geil ist es ja dann irgendwie auch wiederum nicht. Ich meine, 30-.

Fabi: Ja, gut. Es kommt darauf an, mit was du es vergleichst und was du für ein Nutzer bist. 

Sebi: So, noch einmal. Was kann das jetzt?

Dennis: Ok, noch einmal in Ruhe. 

Sebi: Noch einmal für mich.

Fabi: Ganz einfach. SMS und Telefonieren ist mit drin. 69 Cent am Tag, 1 GB pro Tag, also 30 GB im Monat. Oder 99 Cent pro Tag, so viel wie du willst. 

B?: Unlimited. Das heißt, bei 30 Euro circa-. 

Dennis: 30 Euro im Monat für eine wirklich unlimited LTE-Flat, was verhältnismäßig günstig ist. 

Fabi: Genau, also wenn man-. Man muss natürlich vergleichen mit Nutzern, die halt vorher einen Unlimited-Vertrag haben, der wohl, glaube ich, der günstigste bei 60 anfängt. 

Mario: Nicht mehr?

Fabi: Nein, es ist wirklich-. Ich dachte auch, das ist sehr viel mehr. 

Mario: Ich sollte ganz dringend meinen Handyvertrag ändern.

Fabi: Du zahlst 80 für 3 GB, oder? 

Mario: Ja, so ungefähr.

Fabi: Ja und, aber… #01:12:53#. Ich meine, es hängt erst einmal insofern, dass es-. Im Ausland ist die Karte einfach abgeschaltet und funktioniert nicht. Und derzeit auch noch in Europa. Im Sommer soll wohl kommen, dass die Europa-Flat mit drin ist. Aber wenn du jetzt in die USA fährst, funktioniert die Karte einfach nicht. Aber du kannst halt auch deinen Vertrag dann für 14 Tage oder wie lange, bis-. Du kannst immer für 14 Tage den Vertrag aussetzen. Bis zu 14 Tage kannst sagen: 14 Tage will ich nicht mehr. Also, es ist nicht der absolut geilste Tarif, aber ich finde gerade mal so-. Irgendwie habe ich das Gefühl, dass ich da mal so ein bisschen etwas dreht und man nicht immer so Scheiss-Verträge bekommt. Und ich kann es täglich kündigen, ich habe bald keine zwei Jahre. 

Dennis: Hast du die denn schon? 

Fabi: Ich habe noch-. Ich bin noch in meinem T-Mobile-Vertrag drin, sonst-. Aber ich habe auch gesagt, ich würde es erst machen, wenn Europa-Flat mit drin ist. Weil das ist für mich gerade noch ein Argument, dass ich es nicht machen würde.

Dennis: Aber es gibt doch noch eine Idee-. Also ich habe es ein bisschen verfolgt. Ich weiß nicht, ob es schon funktioniert. Grundsätzlich wäre es ja richtig geil, wenn man den nehmen könnte als Zweit-SIM. Also du hast deinen normalen Vertrag und wenn du halt einfach mal viele Daten brauchst, kannst du die halt sofort einfach über die App dazubuchen. Und dafür bräuchtest du ja dann die Zweit-SIM, was ja theoretisch mit dem neusten iPhone und eSIM funktioniert. Also hat ja die Unterstützung für zwei SIM-Karten. Jetzt unterstützt Funk selbst kein eSIM. Aber, ich habe gelesen, wenn man selbst eine Prepaid-Karte, von der Telekom würde reichen-. Die kann man als eSIM registrieren. Dann kannst du die praktisch als Hintergrund-Ding haben, die Funk-SIM-Karte dir reinstecken und dann hast du beides auf einmal. Und dann kannst du dir einfach jedesmal, wenn du Daten brauchst, es einfach sofort unlimited dazubuchen. Und dann ist es nämlich wirklich tageweise. 

Fabi: Ich frage mich nur, ich weiß nicht, ob Funk-. Du würdest ja immer eine neue Handynummer dann bekommen bei Funk. Ich weiß nicht, ob die eine neue-. Ob Funk dir eine neue SIM-Karte zuschicken würde, weil du kannst bis zu 14 Tage aussetzen und danach ist der Vertrag beendet sozusagen. 

Dennis: Genau, du müsstest alle 14 Tage sowieso einmal anschalten. 

Fabi: Genau, das ist richtig. Ja, wenn du… #01:14:38#. 

Mario: Auf jeden Fall ist es cool. Ich finde-. Was du vorhin gesagt hast, ging mir auch so, als ich das gesehen habe. Das fühlt sich mal frisch an. Also es fühlt sich mal nach einem neuen Ansatz an und vor allen Dingen-. Ich war ja gerade auf Bali, wo ich dann irgendwie die Preise gesehen habe. Irgendwie, das waren 32 GB im Monat für umgerechnet knappe 4 Euro. Wo ich dann gedacht habe: Es ist so eine Unverschämtheit, was man hier einfach für-. Und danach war ich in Korea und in Seoul, was die erste Stadt ist, die schon 5 G tatsächlich ausgerollt hat, was auch einfach da bei den ganzen Verträgen komplett angemietet ist. Und da muss ich wieder zurück in die Mobilfunk-Steinzeit und, ja-. Deswegen fand ich es ganz cool, dann zu sehen, dass sich tatsächlich dort mal was tut. 

Fabi: Ja, das stimmt.

Dennis: Es fühlte sich an wie N26 im Banking-Sector. 

Fabi: Oder programmier.bar im Podcast-Sector. (Lachen) Ironie aus.

Mario: Ja. Oder Ironie an. Um zu meinem Pick zu kommen. Mein Pick ist nämlich, (Dennis: Ich verlasse mich auf dich.) dass ich eine Frage an dich habe. (Dennis: Danke.) Und zwar, würdest du sagen, dass Augenlasern auch das N26 unter den Sehhilfen ist, im Vergleich zu Brillen und Kontaktlinsen? Weil ich so ein bisschen da auch darüber nachgedacht habe, so die letzten Tage. Und dann ist mir wieder eingefallen: Der Dennis hat das ja gemacht. Deswegen dachte ich, ich frage dich einfach mal.

Dennis: Cool. Das ist eine gute Frage und ist eigentlich auch tatsächlich-. Für mich wäre es ein Pick of the day. Weil es für mich absolut positiv ist. Ich war ziemlich blind davor. Also ohne Brille minus acht Dioptrien plus Hornhautverkrümmung. Also so knapp bei den minus zehn rumgeschwappt. Ich habe mich viele Jahre gar nicht damit beschäftigt, weil ich einfach Angst davor hatte. Und habe so gedacht: Ey, lieber sehe ich etwas, bevor ich irgendwie-. Also Augenlicht ist halt etwas, was man nicht so gerne aufgibt. Und als ich mich dann mal mehr damit beschäftigt habe, ist das Risiko, dass du danach blind bist-. Also gibt es eigentlich praktisch nicht. Das ist gleich null. Und die Nebenwirkungen, die du haben kannst, halten sich ja so in Grenzen. Also das eine ist, es kann sein, dass du trotzdem noch danach eine Sehhilfe brauchst. Dann hast du halt irgendwie einen halben Dioptrien oder Dioptrien oder so etwas. Also das kann noch passieren. Kann theoretisch auch noch bei mir passieren, weil sich dann die Hornhaut irgendwann noch einmal anpasst nach Monaten oder wie auch immer. Und das andere sind trockene Augen. Das ist eine der anderen großen Nebenwirkungen, die es so gibt. 

Mario: Und dann auch dauerhaft. Also nicht nur kurz, oder?

Dennis: Jein, aber dauerhaft in den schlimmen Fällen, so zwei, drei Jahre oder so. Bis sich das einigermaßen wieder normalisiert hat. (Mario: …#01:17:19#.) Genau. Aber ich meine, es gibt auch viele Leute, die auf Augentropfen angewiesen sind, ohne dass sie eine Augen-OP hatten. Und war bei mir jetzt auch-. Ja, ich habe ein paar Monate lang oder ein paar Monate, ja, Augentropfen genommen. Jetzt ab und zu mal, alle zwei, drei Wochen habe ich ein bisschen mehr das Gefühl als früher. Aber überhaupt nicht störend. Und sonst ist einfach-. Man kann sich das nicht vorstellen, wenn man wirklich immer so auf die Brille angewiesen war, und dann einfach aufwacht und sehen kann. Und keine Brille mehr braucht. Was heißt aufwacht. Also die Operation dauert 15 Minuten. Man ist da drin, kriegt einmal Augentropfen in die Augen, setzt sich unter dieses Gerät und geht danach ohne Brille-. Ich bin mit der U-Bahn nach Hause gefahren. Also, das ist halt einfach abartig, dass das technisch so möglich ist. 

Mario: Ok, also, du würdest das empfehlen. 

Dennis: Ja. Und mittlerweile ist auch fast-. Nein, ist ziemlich genau jetzt ein Jahr her. Und ich wollte immer abwarten mit Empfehlungen bis dieser Zeitraum so ein bisschen ist. Weil eben dann noch Sachen auftreten können. Ist nichts aufgetreten, also ja. 

Mario: Cool. Gut zu wissen. 

Sebi: Ich bin mir trotzdem nicht sicher. Ich habe-. 

Dennis: Wenn sich einer wirklich noch einmal, also näher-. Es gibt noch so zwei Methoden, da würde ich-. Die neuere heißt ReLEx-Smile und ja-. (Mario: Relax Smile?) Ja, aber ReLEx mit zwei e geschrieben und dann Smile. Das ist irgendeine Abkürzung für irgendetwas Komisches. Und da ist das Ding, dass nicht-

Mario: Bestimmt ganz organisch zustande gekommen, diese Abkürzung. 

Dennis: Da wird normalerweise, also was man kennt, das heißt, die ganze Hornhaut einmal komplett so aufgelasert wird und dann hochgeklappt wird. Und dann wird da etwas weggelasert und dann wird das wieder zugeklappt. Und das ist dann nicht mehr. Sondern es wird praktisch dreidimensional eine Linse rausgelasert, aus der, in-. Also ohne, dass man praktisch einen Zugriff hat. Dann wird so ein winziger Schnitt an der Seite gemacht, der nur zwei Millimeter groß ist. Und mit der Pinzette wird einfach das Ding da rausgezogen. Und dadurch hast du halt viel weniger dieses Problem mit trockenen Augen, weil es gibt diesen Flap, der, wie der heißt, nicht-. So, ich glaube, das reicht… #01:19:17#.

Mario: Ich hoffe jetzt, dass wir nicht viele Zuhörer haben, die so Phobie haben, wenn irgendetwas ihre Augen anfasst. Da gibt es ja relativ sehr empfindliche… #01:19:24#. Gut. Aber vielen Dank Dennis. Sehr informativ. 

Sebi: Mir fällt noch ein, wir haben noch ein Moderationsupdate. (Mario: Ein Moderationsupdate?) Wolltest du nicht noch etwas? Ja, da-. 

Fabi: Wir haben doch erst noch ein Pick of the Day vom Dennis, oder-. 

Sebi: Das war doch jetzt lange genug… #01:19:39#. Ich fasse es nicht.

Mario: Ich würde auch sagen, der Dennis hat jetzt so viel-. Das war jetzt Pick of the Day… #01:19:44#.

Dennis: Ich habe jetzt sonst auch keines, ich mache ja-. Mario hat im vorhinein schon gesagt, dass wir da eventuell eine Frage haben... #01:19:49#.

Mario: Ich wollte damit nicht-. 

Sebi: Das ist nicht schlimm. Das ist gar nicht schlimm.) #01:19:54# 

Dennis: Das hast du perfekt gemacht. 

Sebi: Konkrete Zahlen. 

Dennis: Ich würde gerne noch auf unser Meetup hinweisen zunächst, das am 4. Juni stattfindet. Wieder hier bei uns in Bad Nauheim. Und zwar zum Thema Pattern Libraries im Zentrum von Entwicklung und Design. 

Mario: Und wer wird dieses Meetup halten? Also wer ist unser Speaker diesmal? 

Dennis: Jens. Und ich, mit diesem Nachnamen bin ich schon-. Ich habe versucht, so oft schon zu merken. Das ist so etwas wie-.

Mario: Sprich ein bisschen langsamer, Fabi schaut es gerade nach.

Dennis: Dochtkreis, Dochtkreis, Docht, Drocht. Dochtkreis. Dochtkreis. 

Sebi: Grochtdreis.

Mario: Ah, ja. Sag mal. Ok, ich verzeihe dir, dass du dir den nicht so gut merken kannst. 

Fabi: Hier steht: Vortrag von Jens zu Pattern Libraries. 

Sebi: Jens Grochtdreis, da steht es. 

Dennis: Grochtdreis, also td, Grochtdreis. Ja, da freuen wir uns sehr darüber. (Sebi: 4.6.) 4.6. Bad Nauheim, kommt gerne alle vorbei. 

Sebi: Wie immer mit gutem Essen und Bier. (Dennis: Ja.) Gute Laune. 

Mario: Dieses mal ja. 

Dennis: So, was hast du gerade angesprochen, Sebi?

Sebi: Du wolltest noch am Anfang-. Du hast eingeleitet heute mit "am Ende kommt noch was".

Dennis: Ja, damit leiten wir jetzt aus. 

Mario: Kommt was oder geht was?

Dennis: Ich fürchte, es geht was, Mario. 

Sebi: Da geht so einiges. (Wer kommt, der ging?).

Mario: Ja, das ist heute leider meine letzte Folge bei der programmier.bar, die ich-.

Sebi: Trauriger klinge. 

Fabi: Nein, nein, nein. Mario ist raus, gibt keine … #01:21:45#.

Mario: Siehst du mal. Ich habe mir jetzt viel mehr Mühe gegeben. Ich habe auch (?so traurige Dinge eingebaut heute). (Dennis: Trommelwirbel, Dinges und alles.) Ich muss auch noch arbeiten hier. 

B?: Ich weiß. Dass ich nicht-. Deswegen muss ich jetzt auch gehen. 

Mario: Ja, nein genau, ich weiß nicht. Es ist noch gar nicht so ganz 100 Prozent klar, was genau als nächstes für mich passieren wird. Ausser, dass ich halt mich selbstständig machen werde. Mit dem Martin zusammen, der, wer auch immer die frühen Folgen hier gehört hat, den kennt vielleicht auch noch. Genau, ja. Vielleicht, wenn es dann mal interessante Sachen passiert sind, vielleicht darf ich dann irgendwann noch einmal kommen und dann darüber etwas erzählen. 

Fabi: Da würden wir uns freuen. 

Mario: Ja, ich mich auch sehr. Ansonsten hat mir es sehr, sehr viel Spaß gemacht hier mit euch Nasen diesen Podcast aufzubauen. Und auch sonst zusammenzuarbeiten. Aber gut, dazu sage ich am Montag noch etwas, aber, ja-. Ich wollte mich noch einmal verabschieden auch von unseren Hörern, weil das doch sehr viel Spaß gemacht hat. Und jetzt auch zu sehen so, dass tatsächlich, wie wir heute auch gemerkt haben, die Leute inzwischen auch tatsächlich schreiben und so weiter. Das ist sehr, sehr cool. Und wenn Leute die (?Dinges) mögen, dann freut mich das auch. Weil gerade der Pick of the Day (?Ding) ist nämlich von mir, den habe ich gemacht. Ja, das ist traurig.

Fabi: Das ist traurig. Aber auch, glaube ich, an dieser Stelle vom restlichen Standard-Podcast-Team, die wir hier sitzen: Vielen Dank für all die Energie, die du hier reingesteckt hast und das so aufgebaut hast. Und, ich meine, das ist ja alles irgendwie auf deinen Sachen entstanden. Sei es die Technik, die wir nutzen. Sei es die-. Ja, alles drum herum mit Twitter und keine Ahnung was, ist alles Sachen, um die du dich gekümmert hast. Und die uns hierhin gebracht haben, wo wir jetzt sind. Wo wir mit viel Spaß heute zu quatschen und das ist sehr cool. 

Mario: Die Idee war auch von mir übrigens, ein Podcast zu machen.) 

Dennis: Der Vater, der Papa. Der Vater zieht weiter. 

Fabi: Aber wir wünschen dir auch viel Erfolg auf jeden Fall für … #01:23:55#. 

Mario: Ja, den wünsche ich mir auch. Genau.

Fabi: Aber das heißt ja trotzdem, dass du-. Mit unserem Podcast geht es trotzdem wie gewohnt weiter… #01:24:05#. Also nicht wie gewohnt, zu dritt, statt zu viert.

Dennis: Genau, da geht es weiter. 

Mario: Ja, aber ihr schafft das bestimmt noch hin und wieder, jemand zu akquirieren hier. Genau und wer wird-? Du wirst, Dennis, du wirst die Moderation, wie du eingangs gesagt hast, mehr übernehmen. Ja, dann ist das auch-. Ich hatte ein bisschen befürchtet, dass das der Fabi macht. Aber dann ist der Podcast ja auch in guten Händen, wenn du dich darum kümmerst. Das haben wir alle befürchtet. 

Fabi: Der Hauptgrund war, dass ich sonst innerlich nichts beitragen kann. 

Dennis: Ich habe nicht gesagt, das ist schade, dass er geht. 

Mario: Wir fangen nicht an, mit Sachen rausschneiden… #01:24:40#. Das wirst du bitter bereuen. 

Dennis: Was willst du denn machen? Der Schlüssel funktioniert ab Montag nicht mehr. 

Mario: Den Schlüssel habe ich schon abgegeben. 

Dennis: Ja, in dem Sinne, eine schöne Woche. Zwei schöne Wochen, ok. 

Mario: Ich dachte gerade, ihr kommt jetzt wöchentlich raus, das ist ja cool. 

Dennis: Noch nicht. Vielleicht ja irgendwann. Vielleicht irgendwann.

Fabi: Genau. Aber schickt uns weiter Feedback, wir haben uns wirklich-. Also ich habe mich die Woche sehr, sehr gefreut über die ganzen Mails, die reinkamen. Und die, die wir nicht hier besprochen haben, haben wir auch so beantwortet per E-Mail. Schickt uns gerne weiter Fragen. 

Dennis: An welche E-Mail-Adresse geht das, Fabi? 

Fabi: podcast@programmier.bar. 

Dennis: Sehr gut. Und der Twitter-Account? 

Sebi: @programmierbar. 

Dennis: Ihr seid perfekt. 

Fabi: Und Instagram programmier.bar. Programmier.bar. 

Dennis: Da könnt ihr Folgen lesen, aber keine Sachen drauf-. 

Fabi: Ja, genau. … #01:25:39#

Mario: Wir können ja jetzt einfach gleich ein Foto zusammen machen. Dann kann ich noch einmal winken und dann hast du schon ein Post.

Dennis: Ja, das ist schön. …#01:25:49#. 

Sebi: Auf jeden Fall ein Foto von Mario. Ich mache mal eins. 

Mario: Mach mal eins. 

Dennis: Ich glaube, jetzt musst du noch einmal eine Taste drücken, wenn ich das im Ablauf richtig im Kopf habe, oder? 

Mario: Was für eine Taste? Kommt nicht immer am Ende der… #01:26:04# 

Dennis: (?Haben wir alles) gesagt, was wir sagen müssen? Meetup hast du gesagt. 

Mario: Meetup habe ich gesagt. Du musst weg, haben wir gesagt.

Sebi: Dann dürfen wir noch auf Wiederschauen sagen, dann sage ich jetzt schon einmal… #01:26:12#.

Mario: Achso, vielleicht kannst du noch etwas, was auch immer gut ist-. Sich bedanken für die Reviews bei iTunes. Ja, das kommt auch immer gut an... #01:26:22#. Nein, das ist tatsächlich, weil das ist gut für uns. Und deswegen auch natürlich, wenn ihr den Podcast mögt, gut für euch. 

Dennis: Genau, richtig, also. Wenn ihr den Podcast mögt, dann gebt uns doch auch gerne eine Bewertung auf iTunes. Freuen wir uns sehr darüber.

Mario: Genau, man munkelt nämlich, dass es tatsächlich für die Suchalgorithmen und generell für diese Chart-Positionierung bei den ganzen Podcast-Sachen nicht unwichtig ist. Das zu identifizieren ist mir nicht gelungen, aber man munkelt das. 

Dennis: Wir haben den A-B-Test mit schlechten Folgen. 

Mario: Dann drück ich jetzt mal drauf, ok? 

Dennis: Du drückst drauf. Macht's gut. 

Mario: Feuer frei. 

Sebi: Auf Wiederschauen. (Musik) … #01:27:05# 

Mario: Jetzt muss ich noch meinen Laptop abgeben. 

Dennis: Nimm dir noch ein Bier mit. 

Mario: Das tue ich.


PodcastDennis Becker