Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Was macht eigentlich ein Bundler?

Avatar for Lars Hupel Lars Hupel
February 02, 2022
Programming
0
77

Was macht eigentlich ein Bundler?

In der Frontend-Entwicklung kommt man selten ohne JavaScript aus. Gestandene Backend-Profis sehen sich dann mit einer komplett neuen Toolchain konfrontiert, die vor unbekannten Fachbegriffen nur so strotzt. Ein Webpack möchte mit Loadern die Packages bündeln, aber selbstredend mit aktiviertem Babel-Support, damit man auch zu ES6 transpilieren kann. Wie meinen?! In diesem Vortrag werden wir uns – ausgehend von JavaScript, CSS und HTML – die Aufgaben einer Frontend-Toolchain ansehen und deren Strategien, wie sie ein performantes Resultat erzeugen. Lasst uns gemeinsam Trees shaken!
Avatar for Lars Hupel

Lars Hupel

February 02, 2022
Tweet

More Decks by Lars Hupel

See All by Lars Hupel
Digital Cash: Secure wallets for online and offline payments
Avatar for Lars Hupel larsrh
0
10
Digital Euro Update
Avatar for Lars Hupel larsrh
0
50
Kugelsichere Architektur mit formalen Methoden
Avatar for Lars Hupel larsrh
0
37
Der Digitale Euro: Was, Warum, Wie?
Avatar for Lars Hupel larsrh
0
82
Digital Cash: What It Is and How It Works
Avatar for Lars Hupel larsrh
0
77
When testing just doesn't cut it (Lambda Days edition)
Avatar for Lars Hupel larsrh
0
57
Designing CBDCs for Seamless Integration with External DLTs: Strategies and Solutions
Avatar for Lars Hupel larsrh
0
70
1000 auf einen Streich
Avatar for Lars Hupel larsrh
0
120
When testing just doesn't cut it
Avatar for Lars Hupel larsrh
0
64

Other Decks in Programming

See All in Programming
ニーリーQAのこれまでとこれから
Avatar for Nealle nealle
2
630
Носок на сок
Avatar for Bo0oM bo0om
0
1.2k
エンジニアが挑む、限界までの越境
Avatar for Nealle nealle
1
320
UMAPをざっくりと理解 / Overview of UMAP
Avatar for kaityo256 kaityo256
PRO
3
1.5k
API for docs
Avatar for Soutaro Matsumoto soutaro
4
1.7k
Browser and UI #2 HTML/ARIA
Avatar for ken7253 ken7253
2
170
Beyond_the_Prompt__Evaluating__Testing__and_Securing_LLM_Applications.pdf
Avatar for Mete Atamel meteatamel
0
110
The New Developer Workflow: How AI Transforms Ideas into Code
Avatar for Daniel Sogl danielsogl
0
110
Instrumentsを使用した アプリのパフォーマンス向上方法
Avatar for hinakko hinakko
0
240
ComposeでWebアプリを作る技術
Avatar for てべすてん tbsten
0
130
The Missing Link in Angular’s Signal Story: Resource API and httpResource
Avatar for Manfred Steyer manfredsteyer
PRO
0
140
note の Elasticsearch 更新系を支える技術
Avatar for chov(Kohei T) tchov
9
3.5k

Featured

See All Featured
Why Our Code Smells
Avatar for Brandon Keepers bkeepers
PRO
336
57k
Distributed Sagas: A Protocol for Coordinating Microservices
Avatar for Caitie McCaffrey caitiem20
331
21k
Creating an realtime collaboration tool: Agile Flush - .NET Oxford
Avatar for Marc Duiker marcduiker
30
2k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
Avatar for Addy Osmani addyosmani
5
600
Sharpening the Axe: The Primacy of Toolmaking
Avatar for Bryan Cantrill bcantrill
41
2.3k
Fashionably flexible responsive web design (full day workshop)
Avatar for Andy Clarke malarkey
407
66k
RailsConf & Balkan Ruby 2019: The Past, Present, and Future of Rails at GitHub
Avatar for Eileen M. Uchitelle eileencodes
137
33k
Navigating Team Friction
Avatar for Lara Hogan lara
185
15k
The Cult of Friendly URLs
Avatar for Andy Hume andyhume
78
6.3k
Side Projects
Avatar for Sacha Greif sachag
453
42k
The World Runs on Bad Software
Avatar for Brandon Keepers bkeepers
PRO
68
11k
Docker and Python
Avatar for Tania Allard trallard
44
3.4k

Transcript

  1. Was macht eigentlich ein Bundler? CODE DAYS / 02.02.2022 LARS

    HUPEL @LARSR_H
  2. None
  3. None

  4. HTML Kapitel 1

  5. HTML-Grundlagen <!DOCTYPE HTML> <html> <head></head> <body> <h1>Hello World!</h1> Lorem Ipsum

    </body> </html> html head body h1 Hello World! Lorem Ipsum

  6. Browser arbeiten (meistens) linear html head body h1 Hello World!

    Lorem Ipsum

  7. HTML kann viel mehr ... • • • • •

    • JavaScript Grafiken Stylesheets Schriftarten <iframe> ...

  8. HTML CSS JavaScript Content Logic Layout

  9. HTTP Kapitel 2

  10. HTTP- Grundlagen Browser Server GET / GET /main.css GET /img1.png

    GET /img2.png
  11. None
  12. None
  13. None

  14. HTTP-Performance 1.1 Keepalive • • • • • • seit

    1991 zahlreiche Performance- Verbesserungen hauptsächlich getrieben von der Industrie Grundideen: Anfragen parallelisieren Verbindungen reduzieren nicht alle Anwendungen profitieren von HTTP/2+ 2.0 Multiplexing & Push 3.0 UDP+QUIC+TLS

  15. Caching Kapitel 3

  16. Ressourcen & Caching HTTP/2+ ist cool, aber: Je weniger Daten

    über die Leitung gehen müssen, desto besser! → Performance durch Caching

  17. CACHE CACHE CACHE CACHE CACHE

  18. Wie funktioniert Caching? • • • • • • •

    • • es gibt mehrere Arten von Caches: Browser CDN/Edge Proxies Grundidee: zu jeder Anfrage wird die Antwort + Validität gespeichert Beispiele: „für 1 Tag cachen ohne Rückfrage“ „cachen solange sich der Hash nicht geändert hat“ „unveränderlich → dauerhaft cachen“
  19. None

  20. Bundling Kapitel 4

  21. Bundler zur Hilfe! • • • • Hauptaufgaben: wir können

    wie vom Backend gewohnt entwickeln das Resultat ist für Browser leicht verdaulich deswegen auch bekannt als „Frontend- Toolchain“ oder „Asset-Toolchain“

  22. HTML CSS JS HTML CSS JS CSS JS TS JSX

    SCSS

  23. HTML CSS JS CSS JS

  24. Genereller Ablauf (nur JS) 1. 2. 3. 4. 5. 6.

    7. Hauptmodul laden Abhängigkeitsbaum konstruieren zusätzliche Ressourcen laden und konvertieren statische Analyse und Optimierungen unnötige Abhängigkeiten entfernen („Treeshaking”) Code in (ältere Version von) JavaScript übersetzen Code minifizieren

  25. import React from "react"; const tree = ( <ul> {

    items.map(item => <li>{item}</li> ) } </ul> ); JSX

  26. import React from "react"; const tree = ( <ul> {

    items.map(item => <li>{item}</li> ) } </ul> ); JSX

  27. import React from "react"; const tree = ( <ul> {

    items.map(item => <li>{item}</li> ) } </ul> ); const tree = React.createElement( "ul", null, { children: items.map(item => React.createElement( "li", null, item ) ) } ); JSX

  28. // lib.js import {a} from "ext-lib"; export const b =

    3; export a; // main.js import {b} from "./lib.js"; console.log(b); Dead code

  29. // lib.js import {a} from "ext-lib"; export const b =

    3; export a; // main.js import {b} from "./lib.js"; console.log(b); Dead code

  30. // lib.js import {a} from "ext-lib"; export const b =

    3; export a; // main.js import {b} from "./lib.js"; console.log(b); 🪓 🪓 Dead code

  31. // lib.js import {a} from "ext-lib"; export const b =

    3; export a; // main.js import {b} from "./lib.js"; console.log(b); // bundle.js const b = 3; console.log(b); 🪓 🪓 Dead code

  32. class Person { constructor(name) { this.name = name; } hello()

    { return `Hello ${this.name}`; } } ES6+

  33. class Person { constructor(name) { this.name = name; } hello()

    { return `Hello ${this.name}`; } } ES6+

  34. var Person = (function () { function Person(name) { this.name

    = name; } Person.prototype.hello = function () { return "Hello ". concat(this.name); }; return Person; }()); class Person { constructor(name) { this.name = name; } hello() { return `Hello ${this.name}`; } } ES6+

  35. import "./styles.css"; CSS-in-JS

  36. import "./styles.css"; CSS-in-JS

  37. (()=>{"use strict";var t={918:(t,n,r)=>{var o=r(81),e=r.n(o),c=r(645);r.n(c)()(e()).push([t.id,"p {\n color: red;\n}\n",""])},645:t=>{t.exports=function(t){var n=[];return n.toString=function(){return this.map((function(n){var

    r="",o=void 0!==n[5];return n[4]&&(r+="@supports (".concat(n[4],") {")),n[2]&& (r+="@media ".concat(n[2]," {")),o&&(r+="@layer".concat(n[5].length>0?" ".concat(n[5]):""," {")),r+=t(n),o&&(r+="}"),n[2]&&(r+="}"),n[4]&&(r+="}"),r})).join("")},n.i=function(t,r,o,e,c) {"string"==typeof t&&(t=[[null,t,void 0]]);var a={};if(o)for(var i=0;i<this.length;i++){var u=this[i] [0];null!=u&&(a[u]=!0)}for(var s=0;s<t.length;s++){var p=[].concat(t[s]);o&&a[p[0]]||(void 0!==c&&(void 0===p[5]||(p[1]="@layer".concat(p[5].length>0?" ".concat(p[5]):""," {").concat(p[1],"}")),p[5]=c),r&& (p[2]?(p[1]="@media ".concat(p[2]," {").concat(p[1],"}"),p[2]=r):p[2]=r),e&&(p[4]?(p[1]="@supports (".concat(p[4],") {").concat(p[1],"}"),p[4]=e):p[4]="".concat(e)),n.push(p))}},n}},81:t=> {t.exports=function(t){return t[1]}}},n={};function r(o){var e=n[o];if(void 0!==e)return e.exports;var c=n[o]={id:o,exports:{}};return t[o](c,c.exports,r),c.exports}r.n=t=>{var n=t&&t.__esModule? ()=>t.default:()=>t;return r.d(n,{a:n}),n},r.d=(t,n)=>{for(var o in n)r.o(n,o)&&!r.o(t,o)&&Object.defineProperty(t,o,{enumerable:!0,get:n[o]})},r.o= (t,n)=>Object.prototype.hasOwnProperty.call(t,n),r(918)})(); CSS-in-JS import "./styles.css";

  38. Ratschläge Kapitel 5

  39. Frontend ist anders ... • • • „unscheinbare“ Architekturentscheidungen können

    große Auswirkungen haben gute Kenntnis von HTML, HTTP und Browsern sind essenziell Frontend wird leider oft nicht gut verstanden oder gar ignoriert

  40. Schätzfrage: Wie viele Abhängigkeiten hat eine frische React-App?

  41. Schätzfrage: Wie viele Abhängigkeiten hat eine frische React-App? 2782

  42. Frontend- Frameworks haben erhebliche Komplexität. Seid nicht faul und baut

    lieber Dinge von Hand!

  43. Konfiguration der JS-Tools ist schwierig. Macht kein Cargo Culting! Versteht,

    was ihr tut!

  44. HTTP ist das Protokoll des Webs. Arbeitet mit ihm, nicht

    gegen es!

  45. HTML ist die Sprache des Webs. Erfindet das Rad nicht

    neu! Der Browser ist euer Freund!

  46. Frontend ist eine eigene Disziplin mit eigenen Regeln. Betrachtet Frontend

    vom ersten Tag an in eurer Architektur!

  47. Was zählt ist die Usability. Messt Performance! Denkt immer an

    die User!

  48. Q&A Lars Hupel [email protected] @larsr_h www.innoq.com innoQ Deutschland GmbH Krischerstr.

    100 40789 Monheim +49 2173 333660 Ohlauer Str. 43 10999 Berlin Ludwigstr. 180E 63067 Offenbach Kreuzstr. 16 80331 München Hermannstr. 13 20095 Hamburg Erftstr. 15-17 50672 Köln Königstorgraben 11 90402 Nürnberg
  49. None