ES6 Workshop

The what, why, and how of the new features in JavaScript

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal, Inc.

@kentcdodds

Special Shoutouts

Staying awake.......

Please Stand...

What this workshop is not

  • A demo of every single feature of ES6
  • Given by a member of the TC-39 / avid spec reader
  • Step-by-step guide for exactly how you should add ES6 to your project at work
  • Boring / hands off

What this workshop is

  • A demo of most of the features in ES6 (the ones you're likely to use regularly).
  • Given by a coder who's used ES6 since Babel was 6to5
  • Giving you the tools you need to figure out the best way to use ES6 in your project
  • Interactive, exciting, and fun!

Learn
Code
Repeat

Upgrade an App to use ES6

Let's
Get
STARTED!

Steps...

$ git clone https://github.com/kentcdodds/es6-workshop.git

$ cd es6-workshop

$ npm run setup

$ npm start

Open up the project in your favorite editor

If you have yarn installed, you can run
`yarn run setup:yarn`

instead of

`npm run setup`

let & const 

Block-scoped binding constructs

Template Literals

Super awesome upgrades to string composition

Tag`Template Literals`

Some weird wizardry...

New core object APIs

Some handy new helpers and such

Destructuring

Pulling variables out of objects and arrays

Modules

Language-level support for module definitions

Object Literals

Language-level support for module definitions

Parameters

Defaults & Rest

Rest/Spread Operator

...apply me

Arrow Functions

Syntactic sugar and lexical binding

Classes

Improvements over prototype for OO programming

Sets

Solution to the "unique items in an array" problem

Maps

Like objects + non-string keys

WeakMaps

Like objects + non-string keys

Promises

source of never-ending jokes

async/await

not in ES7 (that's not a thing) :)

App Time!

Steps...

git clone https://github.com/kentcdodds/es6-todomvc.git

cd es6-todomvc

npm run setup:workshop

Open http://localhost:8080

Resources

Thank You!

Copy of ES6 Workshop

By Lindsey Dragun

Copy of ES6 Workshop

ES6 Workshop. The what, why, and how of the new features in JS

  • 360