ES6 Workshop

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

Kent C. Dodds

Utah

1 wife, 3 kids

PayPal, Inc.

@kentcdodds

@kentcdodds

kcd.im/es6-intro-slides

kcd.im/es6-intro-recording

Special Shoutouts

Staying awake.......

Please Stand...

What this workshop is not

  • A demo of every single feature of ES6
  • Given by an 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 lot of hands on exercises 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!

Quiz

Learn

Test

Repeat

Let's
Get
STARTED!

Project Setup

git clone https://github.com/kentcdodds/es6-workshop.git
cd es6-workshop
yarn run setup
yarn run autofill-email YOUR_EMAIL@DOMAIN.COM

Open up the project in your favorite editor

If you don't have `yarn` installed, install it

If you don't want to, you can just run `npm run setup` instead

Let's start here

Resources

Thank You!

@kentcdodds

kcd.im/es6-intro-slides

kcd.im/es6-intro-feedback

The following slides

Are from an older version of this workshop

before I had the quizzes in the repo.

I'm leaving them here because they may be useful to someone :)

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

Learn More: http://kcd.im/es6-modules-repo

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