Home/

...

/

Appendix A - roll your own environment

Appendix A - roll your own environment

If you already know how to set up the perfect development environment for modern JavaScript, go ahead and skip this section. Otherwise, keep reading.

If you don’t know and you don’t care about this right now: Use the starter project that came with the book. It’s what you would get after following this chapter.

A good work environment helps us get the most out of our time. We’re after three things:

  • code should re-compile when we change a file
  • page should update automatically when the code changes
  • dependencies and modules should be simple to manage

When I first wrote this chapter in April 2015, I suggested a combination of Browserify, Grunt, NPM, and Bower. This was the wrong approach. It was complicated, it wasn’t very extensible, and it was slow.

There were no sourcemaps, which meant your browser’s error reporting was useless. There was no hot loading, which meant your code had to process a gigantic 80,000 datapoint file every time you made a change.

It was a mess. I’m sorry I told you to use it. The old system is included in the appendix if you’re curious.

The new system is great. I promise. I use it all the time :)

Bundle with Webpack

Instead of using the old setup, I now think the best choice is to use a combination of Webpack and Babel.

Webpack calls itself a “flexible unbiased extensible module bundler”, which sounds like buzzword soup. At its most basic, Webpack gives you the ability to organize code into modules and require() what you need, much like Browserify.

Unlike Browserify however, Webpack comes with a sea of built-in features and a rich ecosystem of extensions called plugins. I can’t hope to know even half of them, but some of the coolest I’ve used are plugins that let you require() Less files with magical Less-to-CSS compilation, plugins for require-ing images, and JavaScript minification.

Using Webpack allows us to solve two more annoyances — losing state when loading new code and accurately reporting errors. So we can add two more requirements to our work environment checklist (for a total of five):

  • code should re-compile when we change a file
  • page should update automatically when the code changes
  • dependencies and modules should be simple to manage
  • page shouldn’t lose state when loading new code (hot loading)
  • browser should report errors accurately in the right source files (sourcemaps)

Compile with Babel

Webpack can’t do all this alone though – it needs a compiler.

We’re going to use Babel to compile our JSX and ES6 code into the kind of code all browsers understand: ES5. If you’re not ready to learn ES6, don’t worry; you can read the ES5 version of React+d3.js.

Babel isn’t really a compiler because it produces JavaScript, not machine code. That being said, it’s still important at this point. According to the JavaScript roadmap, browsers aren’t expected to fully support ES6 until some time in 2017. That’s a long time to wait, so the community came up with transpilers which let us use some ES6 features right now. Yay!

Transpilers are the officially-encouraged stepping stone towards full ES6 support.

To give you a rough idea of what Babel does with your code, here’s a fat arrow function with JSX. Don’t worry if you don’t understand this code yet; we’ll go through that later.

Press + to interact
() => (<div>Hello there</div>)

After Babel transpiles that line into ES5, it looks like this:

Press + to interact
(function () {
      return React.createElement(
        'div',
        null,
        'Hello there'
      );
    });

Babel developers have created a playground that live-compiles code for you. Have fun.

Quickstart

The quickest way to set this up is to use Dan Abramov’s react-transform-boilerplate project. It’s what I use for new projects these days.

If you know how to do this already, skip ahead to the Visualizing Data with React.js chapter. In the rest of this chapter, I’m going to show you how to get started with the boilerplate project. I’m also going to explain some of the moving parts that make it tick.

Your book package also contains a starter project. You can use that to get started right away. It’s what you would get after following this chapter.

NPM for dependencies and tools

NPM is node.js’s default package manager. Originally developed as a dependency management tool for node.js projects, it’s since taken hold of the JavaScript world as a way to manage the toolbelt. With Webpack’s growing popularity and its ability to recognize NPM modules, NPM is fast becoming the way to manage client-side dependencies as well.

We’re going to use NPM to install both our toolbelt dependencies (like Webpack) and our client-side dependencies (like React and d3.js). ...

Access this course and 1400+ top-rated courses and projects.