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.

Transcript

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

   View Slide

2. Jake Dohm
   Web Developer
   

   View Slide

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

   View Slide

4. Why Should I Use
   Build Tools?
   

   View Slide

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

   View Slide

6. View Slide

7. View Slide

8. View Slide

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)
   

   View Slide

10. #1
    Build Tools
    

    View Slide

11. Benefits of a Build Step
    

    View Slide

12. ⚡
    Performance
    

    View Slide

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

    View Slide

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

    View Slide

15. 
    Compatibility
    

    View Slide

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

    LESS, TypeScript, and CoffeeScript
    

    View Slide

17. % Task Runners
    Bundlers
    Two Types of Build Tools
    

    View Slide

18. %
    Task Runners
    

    View Slide

19. What is a task runner?
    

    View Slide

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

    View Slide

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

    View Slide

22. Core Concepts
    

    View Slide

23. Plugins
    

    View Slide

24. Tasks
    

    View Slide

25. View Slide

26. Watchers
    

    View Slide

27. View Slide

28. 
    Bundlers
    

    View Slide

29. What is a bundler?
    

    View Slide

30. View Slide

31. How do bundlers work?
    

    View Slide

32. View Slide

33. Core Concepts
    

    View Slide

34. Input
    

    View Slide

35. Output
    

    View Slide

36. Loaders
    

    View Slide

37. Plugins
    

    View Slide

38. Main Benefits
    

    View Slide

39. #1
    Imports
    

    View Slide

40. Imports are great for a
    bunch of reasons
    

    View Slide

41. 1. Tool Independence
    

    View Slide

42. 2. Explicit References
    

    View Slide

43. View Slide

44. 3. Modularity
    

    View Slide

45. 4. Dependency
    Management
    

    View Slide

46. View Slide

47. #2
    Hot Module Reloading
    

    View Slide

48. #3
    Performance
    

    View Slide

49. 1. Tree Shaking
    

    View Slide

50. 2. Code Splitting
    

    View Slide

51. Choosing A Bundler
    

    View Slide

52. Choosing A Build Tool
    

    View Slide

53. Signs You Should Bundler
    

    View Slide

54. 1. You’re Using a

    JS Framework
    

    View Slide

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

    View Slide

56. 3. You enjoy pain and
    suffering.
    

    View Slide

57. #2
    Compilers
    

    View Slide

58. View Slide

59. What does it do?
    

    View Slide

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.”
    

    View Slide

61. Awesome!
    How can I use it?
    

    View Slide

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

    View Slide

63. Configuration
    

    View Slide

64. #3
    Polyfills
    

    View Slide

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

    View Slide

66. View Slide

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

    View Slide

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

    View Slide

69. Polyfill Options
    

    View Slide

70. #1
    Roll Your Own
    

    View Slide

71. #2
    Babel Polyfill
    

    View Slide

72. View Slide

73. #4
    CSS Pre-processors
    

    View Slide

74. Pre-processed Languages:
    SASS & LESS
    

    View Slide

75. Features & Benefits
    

    View Slide

76. 1. Variables
    

    View Slide

77. View Slide

78. 2. Partials
    

    View Slide

79. 3. Mixins
    

    View Slide

80. View Slide

81. 4. Nesting
    

    View Slide

82. View Slide

83. View Slide

84. SASS vs LESS
    

    View Slide

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

    View Slide

86. PostCSS
    

    View Slide

87. What Is PostCSS?
    

    View Slide

88. 
    Who has used PostCSS?
    

    View Slide

89. 
    Who has used AutoPrefixer?
    

    View Slide

90. 

    Confession Time
    

    View Slide

91. View Slide

92. What It Isn’t
    

    View Slide

93. Lastly…
    

    View Slide

94. We’ve only scratched
    the surface
    

    View Slide

95. One Final Note
    (for real this time)
    

    View Slide

96. You might not need
    these tools.
    

    View Slide

97. 
    Thanks!
    

    View Slide