Augmenting Toolset - Yarn + React + Webpack

Augmenting Toolset: Yarn + React + Webpack

I have used Yeoman for scaffolding out my Angular applications.  It is a great tool, and does a lot of the repetitive work that goes with creating web applications.  It also introduced me to NPM and Bower, which provides the tools needed for improving development workflows.  Tools such as Grunt, for running tasks; Jasmine and Karma, for writing and running unit tests; and also automated CSS and JS optimizations which can be run as grunt tasks.  Now that I have an appreciation for these tools, I need to determine the best method for discovering new tools which will benefit my workflow.  These tools can change at anytime, so I should be able to drop them from my tool-belt, and pickup the latest and greatest.

Where do I start?


AngularJS is a complete web application framework.  It is an easy framework to learn, as it is highly opinionated, meaning a lot of the decisions have been made for you.  There is also a fairly large community behind it, so it is not very hard to find support.  By comparison, React is a very young library, but there are many developers migrating towards it when compared to the newer Angular 2.  And for good reason, with Angular 2’s drastically changing in terms of semantics and architecture, the learning curve is much greater than React.  A few things to learn about are how it leverages the virtual DOM, the Component Model, and server side rendering.

Package Manager

NPM is slow, and there are security concerns with the packages that can run code on installation.  Facebook recently released a new package manager called, Yarn.  A sort of super charger for NPM.  It is caches each package it downloads for offline access, it resolves mismatched versions of dependencies, and uses a deterministic algorithm for installs.  Oh, and it is backwards-compatible with npm.

Task Runner

Grunt is great for automating simple tasks, it has a large collection of plugins which you can customize for various builds.  Gulp is similar to Grunt, in that it automates tasks.  However it is written in JavaScript with a node streams approach, which gives it faster builds, and greater flexibility in creating complex build tasks.  There is also Webpack, which is a module bundler for managing client-side resources.

My goal:

  • Learn React
  • Use Yarn instead of NPM
  • Replace Grunt with Gulp for creating my build tasks
  • Leverage Webpack in my build process (all I know is that it is magical)
  • I want to start with nothing, no boilerplate, no scaffolding, nothing.

Update (5-8 hours later)

There are just too many options and decisions to make.  So after a handful of hours reading and doing various things, I have found this: (Yarn, Gulp, ES6, Babel, Webpack, React, Redux, ImmutableJS)

It basically touches on exactly what I want to learn.  The chapters provide enough detail that you will learn the differences between each technology, while the tutorial itself shouldn’t take more than a few hours to complete.  Also, the tutorial uses ES6 syntax.  Which is a nice preparation, if you are not using it already (I have used it minimally), but I also believe it will become more widely used compared to TypeScript.

The walkthrough is great, and I highly recommended it.

A few more:

Setting Up a React.js Environment Using Npm, Babel 6 and Webpack (NPM, ES6, Babel, Webpack, React)

Leave a Reply

Your email address will not be published. Required fields are marked *