Webpack FTW

Code examples:
https://github.com/k9ordon/webpack-ftw

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