ndiesslin / es6-workshop

Workshop: What's New in ES6?

Setup

Prerequisites

To run this workshop, you need Node.js v5 or greater.

I also strongly recommend Firefox Developer Edition: JavaScript engines in browsers get updated far more frequently than Node does.

Mac users might need to install the XCode Command Line Tools: Open Terminal.app and run xcode-select --install to get rolling. Mac users might also be interested in the Homebrew package manager for getting everything installed and set up.

You're in good shape when git --version, node --version, and npm --version all report nice looking version numbers when run from the command line.

Getting the Workshop

Open a terminal and run git clone https://github.com/callahad/es6-workshop.git to get a local copy of the workshop.

Next, cd into es6-workshop and run npm install to fetch and locally install the workshop's dependencies.

You're in good shape when npm test reports "x skipped", where x > 0;

Using the Workshop

Fixing the Tests

Each file in the tests/ folder has a bunch of tests structure like this:

test.skip('test addition', t => {
    let x = 1 + 1;

    t.is(x, __);
})

Your goal is to make every "skipped" test a working, passing test:

1. First, change test.skip(...) to test(...) so the test runs.
2. Second, read through the comments and do as it instructs. Also, look for any __ blanks, and fill them in.

For instance, to make the test above pass, you would change it to:

test('test addition', t => {
    let x = 1 + 1;

    t.is(x, 2);
})

Checking your Work

Run npm test to run and report on every tests.

Run npm run watch to interactively report on tests as you work on each file.

I recommend having a terminal open with npm run watch going in it, so you can see what happens as you work. It re-runs a file's tests every time you save that file, so to trigger an update, save your work. :)

Experimenting

If you need to experiment, there are three great places to do so:

1. Your browser's developer tools.

   Your browser offers an excellent, interactive environment for testing. Crucially, your browser is likely to be more up to date than Node.js, especially if you're using a pre-release version like Firefox Developer Edition or Chrome Canary

2. The node REPL.

   Run node. Type JavaScript. Victory. Node offers tab completion, so you can do things like let s = 'hello'; s.<TAB> to see all of the available methods on s in a nicely formatted display.

   Two words of warning: Node doesn't get updated nearly as often as browsers, and Node's standard library includes things that aren't part of standard JavaScript, so take it with a grain of salt.

3. The online Babel REPL

   Babel converts modern JavaScript into backwards compatible JavaScript. It's pedantic about getting the details right, but it also tries to generate legible code.

   If you find yourself asking what some new syntax actually means, plugging it into Babel and trying to decipher the output is a great place to start.

Other Resources

This workshop just scratches the tip of the iceberg. Here are some other excellent resources.

Reference

• The Mozilla Developer Network (MDN) is the gold standard for JavaScript documentation. And it's a wiki, so you can contribute, too!

• tc39/ecma262 is the working repository for the standards committee behind JavaScript (officially "ECMAScript"). Every year, the "Stage 4" proposals get collected, frozen, and turned into the next version of ECMAScript. ("ES6" is really "ES2015", for instance.)

• Kangax's ES6 Compatibility Tables provide a comprehensive overview of the state of ES6 support in major browers and server-side JavaScript runtimes.

Books / Articles / Other

• You Don't Know JS is an exceptional series of books on modern JavaSCript. Free to read online.

• lukehoban/es6features has great, bite-sized overviews of the new features in ES6.

• We Have a Problem With Promises is the best article I've seen regarding common beginner and advanced mistakes when using Promises.

• My presentation on Promises, which includes the PouchDB callbacks to promises example in its demos/ folder