$30 off During Our Annual Pro Sale. View Details »

Webpack FTW

Webpack FTW

Klemens Gordon

February 25, 2016
Tweet

More Decks by Klemens Gordon

Other Decks in Technology

Transcript

  1. SHIPPING A FRONTEND

    View Slide

  2. KLEMENS GORDON
    Frontend Developer karriere.at
    likes .JS and STUFF
    @thisisgordon

    View Slide

  3. IRL

    View Slide

  4. bundling, precompiling,
    transforming, factor out, extract
    text, code splitting, commons
    chunks, post-loaders, wtf, yadda
    yadda yadda … to send css and js
    files to our friend browser.

    View Slide

  5. WTf

    View Slide

  6. OUR FRIEND
    BROWSER LIKES JS
    AND CSS AND
    ASSETS AND STUFF

    View Slide

  7. “FRONT-END OPS”
    1. history of shipping frontend
    at karriere.at
    2. webpack examples

    View Slide

  8. Browser
    eats
    Programmer
    programms

    View Slide

  9. timetravel ...

    View Slide

  10. once upon a time … ~2005 v1
    - ~ 1 developer
    - windows xp was the hottest shit
    - there was no iphone
    - cleartype was opt in
    - internetexplorer ...

    View Slide

  11. karriere.at v1 - 2005
    shipping source files

    View Slide

  12. script2.js
    styles.css
    Browser
    script2.js
    styles.css
    Programmer
    script1.js script1.js

    View Slide

  13. why its bad to ship js and css as
    sourcefiles:
    (a mvp list)
    - performance (requests, big files)
    - code gets messy
    - ……..............................

    View Slide

  14. timetravel ...

    View Slide

  15. later … ~2009 v2
    - more developer (2-3)
    - rise of the jquery
    - gui is getting more complexe (autocompletes, ajax ftw, yadda)
    => more frontend code

    View Slide

  16. View Slide

  17. autocomplete.js
    styles.css
    Browser
    autocomplete.jquery.js
    styles.css
    Programmer
    jquery.js
    page1.js
    page2.js
    autocomplete.jquery.js
    styles.css
    page1.min.js
    jquery.js
    load me first
    load me on
    page 2
    before jquery
    load me on
    page1
    load me on
    page2
    load me
    everywhere
    compress
    page2.min.js

    View Slide

  18. - load order
    - dependencies
    - post processing

    View Slide

  19. more
    timetraveling

    View Slide

  20. v3 … ~2013
    - ~ 5 devs
    - even more client app stuff
    - responsive
    - amd patterns (with curljs)
    - grunt.js - concat all the things
    - less

    View Slide

  21. - @unscriptable
    John Hann
    “Introducing RaveJS”

    View Slide

  22. Browser
    page1.less
    Programmer
    page1.js
    page2.css
    page2.js
    autocomplete.less
    autocomplete.js
    a/_partial.js
    a/_partial.css
    b/_partial.js
    bundled: amd:
    page2.js
    page2.less
    autocomplete.cs
    autocomplete.js
    b/_partial.js
    a/_partial.less
    a/_partial.js
    core.js
    vendor/polyfill
    page1.css
    page1.js
    common.css
    common.js

    View Slide

  23. AMD
    DEPENDENCIES

    View Slide

  24. POST PROCESS
    HANDCRAFTED
    BUNDLES ARRAY
    & SINGLE MODULES

    View Slide

  25. GOES OUT

    View Slide

  26. - module has dependencies -> load order
    - browser gets small entry files
    - more shared code
    BUT
    - manual concat is a pain (amd fallback)
    - .less and .js has separate dependency trees

    View Slide

  27. v4 ~2016

    View Slide

  28. View Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. 1. bundle
    2. the css thing
    3. loaders
    4. code splitting

    View Slide

  33. Installation
    npm install webpack -g
    npm install webpack-dev-server -g

    View Slide

  34. module-b.js
    1 Simple Bundle
    bundle.js
    contains everything
    module-a.js
    requires module b
    entry.js
    requires module a

    View Slide

  35. 2 the css thing
    entry.js
    bundle.js
    contains everything
    npm i css-loader style-loader -D
    entry.css
    module-b.css
    module-b.js
    module-a.css
    module-a.js

    View Slide

  36. 3 loaders
    entry.es6.js
    bundle.js
    contains everything
    npm i babel-loader babel-core babel-preset-es2015 -D
    entry.css
    module-b.css
    module-b.es6.js
    module-a.css
    module-a.es6.js
    hyperlink

    View Slide

  37. 4 code splitting
    entry1.js bundle1.js
    npm install extract-text-webpack-plugin -D
    module-a.js
    entry2.js
    module-b.js
    bundle2.js
    commons.js

    View Slide

  38. more stuff:
    - analyse - https://webpack.github.
    io/analyse/
    - dev server hot module replacement -
    https://webpack.github.io/docs/hot-
    module-replacement.html
    - production builds

    View Slide

  39. one more
    timetraveling

    View Slide

  40. ~2016
    HTTP2
    SHIPPING SOURCE FILES LIKE ITS 2005

    View Slide

  41. View Slide

  42. questions?

    View Slide