Webpack, Gulp, and Babel, Oh My!

10595a629dac3c6424f69ead1b44cb13?s=47 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.

10595a629dac3c6424f69ead1b44cb13?s=128

jakedohm

September 27, 2018
Tweet

Transcript

  1. 6.
  2. 7.
  3. 8.
  4. 9.

    Modern Front-End Dev Tools 1. Build tools (task runners &

    bundlers) 2. Compilers (Babel) 3. Polyfills (cross-browser compatibility) 4. Pre-processors (LESS/SASS)
  5. 16.

    Compatibility For? ✨ Shiny new language features (like ES6+) Pre-processed

    languages like SASS,
 LESS, TypeScript, and CoffeeScript
  6. 20.

    Task runners are a way to automate repetitive tasks, in

    a declarative step-by-step manner.
  7. 23.
  8. 24.
  9. 25.
  10. 26.
  11. 27.
  12. 28.
  13. 30.
  14. 32.
  15. 34.
  16. 35.
  17. 36.
  18. 37.
  19. 43.
  20. 46.
  21. 58.
  22. 60.

    “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.”
  23. 62.

    • Task Runners: Use Babel as a plugin • Bundlers:

    Use Babel as a loader Integrating Babel Into Your Build Toolchain
  24. 65.

    “A polyfill is a piece of code that provides the

    technology that you expect the browser to provide natively.”
  25. 66.
  26. 68.

    Polyfills are necessary because there are some new features that

    are so completely different, that they cannot be (reasonably) compiled to ES5 code.
  27. 72.
  28. 77.
  29. 79.
  30. 80.
  31. 82.
  32. 83.
  33. 85.

    • Task Runners: Use SASS/LESS as a plugin • Bundlers:

    Use SASS/LESS as a loader Installation/Usage
  34. 86.
  35. 91.
  36. 93.
  37. 97.