La Vie en Code Podcast

033: Dissecting Build Tools in JavaScript

033: Dissecting Build Tools in JavaScript

When you're first learning to code, it's easy to become overwhelmed by the veritable cornucopia of build tool options. Why are there so many? What do they do? What problems do they solve?

In this episode, we (not-too-deep) dive into Build Toolsspecifically, Package Managers, Task Runners, and Module Loaders and Bundlers.

Learn what each of these tool types do, and briefly compare the different tools themselves. By the end of this episode, you'll learn the problems that they solve, and how to make your life easier by applying them to your development workflow.

Hey everyone!

The Web Developer Roadmap by Kamran Ahmed (@kamranahmedse) provides a visual guide for navigating the complex world of web development.

This episode is a bit of an end cap to the Dissecting the Web Developer Roadmap series to address one of the themes that repeats across both the Front-End and Back-End portions: Build Tools.

I really felt that this area needed more attention, since time is everything when we're building projects and practicing our skills. The more you can accomplish in any given period of time, the shorter your entire career transition will be!

If you haven't checked out the rest of the series, you can hear all 4 episodes on the Dissecting the Web Developer Roadmap series landing page.

I hope you enjoy, and learn lots. 🙂

Episode Links

Updates and hand-picked resources related to the topics discussed in the episode—you're welcome! 😘

Get updates on Newbie Coder Problem Solving School!

Build Tools (General)

Why you need a build system like Grunt, Gulp or Brunch for your website

LearnCode.academy, Jan 2015

As the video summary reads, “A good build system will take your web development to a whole new level.” This video provides a solid overview of why that is, and how you can leverage it to build awesome websites and apps locally.

Package Managers

A Beginner's Guide to npm

SitePoint, Jan 2018

Sitepoint always makes great resources! They do a particularly good job here of explaining connections between Node.js and npm, and showing how to install it.

Yarn Crash Course

Traversy Media, 2018

Yarn is Facebook's package manager, which they build to meet their own particular needs. This video by Traversy explains the basics well.

Task Runners

Gulp vs Grunt vs Webpack: Comparison of Build Tools/Task Runners

DA-14 Software Development

I really liked this article (from March 2017) by Ukraine-based software development group DA-14 because it highlights the key differences between the Task Runners mentioned in the episode (NPM Scripts, Gulp, Grunt, CodeKit).

About NPM Scripts

The actual npm Scripts docs have lots of useful information! And they're right from the horse's mouth, so to speak. 🙂

Gulp JS Crash Course

Traversy Media, May 2017

A great “crash course” in Gulp: what it does, what problems it solves, and how to set it up to handle your development workflow.

Grunt JS: Quick Introduction

Tech CBT, Jul 2016

Not only does this video do a great job of explaining the concepts of minifying CSS and JavaScript even further than I did—it also goes into the actual details of how to use it. If you're curious about Grunt and what it does, this is worth a watch.

CodeKit—their own videos

CodeKit made videos for their own product, which I kind of wish everyone would do. They also broke them down into every type of task you could want to do, so you can easily learn about exactly what you want and need.

Module Loaders and Bundlers

Understanding RequireJS for Effective JS Module Loading

SitePoint, Jan 2013

This article is older (5 years as of date of episode airing), but it still provides a solid overview of what RequireJS (module loader) does, and how it works to improve your code modularity.

PackWars: Webpack vs Browserify vs SystemJS vs RequireJS

Opher Vishnia, Render Conf 2017

Designer/Developer Opher Vishnia gave a great talk at Render Conf on the multiple options for Module Bundlers (and Loaders, i.e. RequireJS), and highlights their differences and similarities. I really enjoyed watching this video, and learned a lot!

 

Thanks for Listening!

I’d love to hear your thoughts! Please leave a note in the comment section below.

Enjoy the Show?

Please consider subscribing and leaving a review on your favorite podcast app.

Your ratings and reviews really help, and I personally read each one. :)


Listen on Google Play Music