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

Webpack, Gulp, and Babel, Oh My!

jakedohm
September 27, 2018

Webpack, Gulp, and Babel, Oh My!

In the fast-paced front-end development landscape, it can feel overwhelming to try to keep up with all of the new shiny tooling. In this talk, we'll do a fly-over of the most common and popular build tools for all things front-end (CSS, JS, etc.). You'll walk away with a high-level understanding of what each tool does, and when you should reach for it.

jakedohm

September 27, 2018
Tweet

Other Decks in Programming

Transcript

  1. Webpack, Gulp, and
    Babel, Oh My!

    View full-size slide

  2. Jake Dohm
    Web Developer

    View full-size slide

  3. Let’s Talk About
    Modern Front-End Tooling

    View full-size slide

  4. Why Should I Use
    Build Tools?

    View full-size slide

  5. TLDR;
    So you can ship different
    code than you write.

    View full-size slide

  6. Modern Front-End Dev Tools
    1. Build tools (task runners & bundlers)
    2. Compilers (Babel)
    3. Polyfills (cross-browser compatibility)
    4. Pre-processors (LESS/SASS)

    View full-size slide

  7. #1
    Build Tools

    View full-size slide

  8. Benefits of a Build Step

    View full-size slide


  9. Performance

    View full-size slide

  10. When we write code,
    it should be optimized
    for humans

    View full-size slide

  11. When we ship our code,
    it should be optimized
    for the browser

    View full-size slide


  12. Compatibility

    View full-size slide

  13. Compatibility For?
    ✨ Shiny new language features (like ES6+)
    Pre-processed languages like SASS,

    LESS, TypeScript, and CoffeeScript

    View full-size slide

  14. % Task Runners
    Bundlers
    Two Types of Build Tools

    View full-size slide

  15. %
    Task Runners

    View full-size slide

  16. What is a task runner?

    View full-size slide

  17. Task runners are a way to
    automate repetitive tasks, in
    a declarative step-by-step
    manner.

    View full-size slide

  18. Task runners don’t do
    anything to your code
    out of the box

    View full-size slide

  19. Core Concepts

    View full-size slide

  20. What is a bundler?

    View full-size slide

  21. How do bundlers work?

    View full-size slide

  22. Core Concepts

    View full-size slide

  23. Main Benefits

    View full-size slide

  24. Imports are great for a
    bunch of reasons

    View full-size slide

  25. 1. Tool Independence

    View full-size slide

  26. 2. Explicit References

    View full-size slide

  27. 3. Modularity

    View full-size slide

  28. 4. Dependency
    Management

    View full-size slide

  29. #2
    Hot Module Reloading

    View full-size slide

  30. #3
    Performance

    View full-size slide

  31. 1. Tree Shaking

    View full-size slide

  32. 2. Code Splitting

    View full-size slide

  33. Choosing A Bundler

    View full-size slide

  34. Choosing A Build Tool

    View full-size slide

  35. Signs You Should Bundler

    View full-size slide

  36. 1. You’re Using a

    JS Framework

    View full-size slide

  37. 2. You’re Using a
    Package Manger for
    Front-End Dependencies

    View full-size slide

  38. 3. You enjoy pain and
    suffering.

    View full-size slide

  39. What does it do?

    View full-size slide

  40. “Babel is a toolchain that is mainly used
    to convert ECMAScript 2015+ code into a
    backwards compatible version of
    JavaScript in current and older browsers
    or environments.”

    View full-size slide

  41. Awesome!
    How can I use it?

    View full-size slide

  42. • Task Runners: Use Babel as a plugin
    • Bundlers: Use Babel as a loader
    Integrating Babel Into
    Your Build Toolchain

    View full-size slide

  43. Configuration

    View full-size slide

  44. #3
    Polyfills

    View full-size slide

  45. “A polyfill is a piece of code that provides
    the technology that you expect the
    browser to provide natively.”

    View full-size slide


  46. Compilers and Polyfills go
    hand-in-hand, but they
    serve different purposes

    View full-size slide

  47. Polyfills are necessary because there are
    some new features that are so completely
    different, that they cannot be (reasonably)
    compiled to ES5 code.

    View full-size slide

  48. Polyfill Options

    View full-size slide

  49. #1
    Roll Your Own

    View full-size slide

  50. #2
    Babel Polyfill

    View full-size slide

  51. #4
    CSS Pre-processors

    View full-size slide

  52. Pre-processed Languages:
    SASS & LESS

    View full-size slide

  53. Features & Benefits

    View full-size slide

  54. 1. Variables

    View full-size slide

  55. SASS vs LESS

    View full-size slide

  56. • Task Runners: Use SASS/LESS as a plugin
    • Bundlers: Use SASS/LESS as a loader
    Installation/Usage

    View full-size slide

  57. What Is PostCSS?

    View full-size slide


  58. Who has used PostCSS?

    View full-size slide


  59. Who has used AutoPrefixer?

    View full-size slide


  60. Confession Time

    View full-size slide

  61. What It Isn’t

    View full-size slide

  62. We’ve only scratched
    the surface

    View full-size slide

  63. One Final Note
    (for real this time)

    View full-size slide

  64. You might not need
    these tools.

    View full-size slide