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
- Aaron Frost & Axel Rauschmayer: original workshop (tests)
- Luke Hoban: es6features repo (several examples)
- Sebastian McKenzie: Babel (transpiler)
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.COMOpen 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
- kcd.im/es6-intro-slides - These slides
- kcd.im/es6-intro-repo - Workshop repo
- kcd.im/es6-intro-app - TodoMVC app repo
- kcd.im/es6-intro-features - Features repo
- kcd.im/es6-intro-compatibility - Compatibility Table
- kcd.im/esnext - TC39 ES proposals
- http://www.2ality.com - Fantastic blog by Axel Rauschmayer
Thank You!
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:workshopOpen http://localhost:8080
ES6 Workshop
By Kent C. Dodds
ES6 Workshop
ES6 Workshop. The what, why, and how of the new features in JS
