62
beyond and ES2015

ES2015 and Beyond

Embed Size (px)

Citation preview

Page 1: ES2015 and Beyond

beyondand

ES2015

Page 2: ES2015 and Beyond

ES.next ?

harmony ?

ES6 ?

ES2015 ?

Page 3: ES2015 and Beyond

ES2015July 2011 - June 2015

Page 4: ES2015 and Beyond

New features• classes • arrows • enhanced object literals • template strings • destructuring • default + rest + spread • let + const • iterators + for..of • generators • unicode • modules • module loaders • map + set + weakmap + weakset • proxies • symbols • subclassable built-ins • promises • math + number + string + array + object APIs • binary and octal literals • reflect api • tail calls

Page 5: ES2015 and Beyond

Jay PhelpsSenior Front end engineer | Netflix Twitter: @_jayphelps

Page 6: ES2015 and Beyond

Block ScopeInstead of Function Scope

Page 7: ES2015 and Beyond

Before

Page 8: ES2015 and Beyond

after

Page 9: ES2015 and Beyond
Page 10: ES2015 and Beyond

constants

Page 11: ES2015 and Beyond
Page 12: ES2015 and Beyond
Page 13: ES2015 and Beyond

Chrome 41

Browser Support

EDGE 12

Safari nope

Firefox 44

Page 14: ES2015 and Beyond

Destructuring

Page 15: ES2015 and Beyond

Before

Page 16: ES2015 and Beyond

after

Page 17: ES2015 and Beyond

Swapping variables

Page 18: ES2015 and Beyond

Destructuring parameters

Page 19: ES2015 and Beyond

Destructuring parameters

Page 20: ES2015 and Beyond

Chrome 45

Browser Support

EDGE 13

Safari nope

Firefox 22

Page 21: ES2015 and Beyond

Arrow Functions

Page 22: ES2015 and Beyond

Before

Page 23: ES2015 and Beyond

after

Page 24: ES2015 and Beyond
Page 25: ES2015 and Beyond

lexical `this`

Page 26: ES2015 and Beyond

lexical `this`references parent scope `this`

Page 27: ES2015 and Beyond

lexical `arguments`references parent scope `arguments`

Page 28: ES2015 and Beyond

Chrome 45

Browser Support

EDGE 13

Safari nope

Firefox 22

Page 29: ES2015 and Beyond

classes

Page 30: ES2015 and Beyond

Before

Page 31: ES2015 and Beyond

after

Page 32: ES2015 and Beyond

syntactic sugarstill uses Prototype-based inheritance

Page 33: ES2015 and Beyond

Must use `new`

Page 34: ES2015 and Beyond

Must use `new`

Page 35: ES2015 and Beyond

classes are not hoistedUnlike function declarations

Page 36: ES2015 and Beyond

classes are not hoistedUnlike function declarations

Page 37: ES2015 and Beyond

classes are not hoistedUnlike function declarations

Page 38: ES2015 and Beyond

class expressionsSimilar to Function Expressions

Page 39: ES2015 and Beyond

Must call `super`before accessing `this`When you extend, your constructor

Page 40: ES2015 and Beyond

Inheritance

Page 41: ES2015 and Beyond

Inheritance

Page 42: ES2015 and Beyond

Inheritance

Page 43: ES2015 and Beyond

Inheritance

Page 44: ES2015 and Beyond

extend built-ins

Page 45: ES2015 and Beyond

only works with native es2015 supportextending build-ins

not with transpilers alone

Page 46: ES2015 and Beyond

Chrome coming soon in 49

Browser Support

EDGE 13 behind a flag

Safari basic support in 7.1, full support 9

Firefox basic support in 2 (yes, two!), full support 34

Page 47: ES2015 and Beyond

How can I play today?i.e. I have to support Internet Explorer

Page 48: ES2015 and Beyond

Use a transpiler

Page 49: ES2015 and Beyond
Page 50: ES2015 and Beyond
Page 51: ES2015 and Beyond

Lets gossip

Page 52: ES2015 and Beyond

rumored features… es2017++ ?!

Page 53: ES2015 and Beyond

Disclaimer:

Page 54: ES2015 and Beyond

EnumsAxel Rauschmayer

Page 55: ES2015 and Beyond
Page 56: ES2015 and Beyond

https://gist.github.com/rauschma/f3e77132319e09b94722

Page 57: ES2015 and Beyond

Pattern Matching !!!Yehuda katz

Page 58: ES2015 and Beyond

pattern matching !!!

Page 59: ES2015 and Beyond

https://github.com/natefaubion/sparklerSimilar syntax of

Page 60: ES2015 and Beyond

Optional type annotations like Flow or TypeScript

Macros like sweet.js

Bonus guesses

Page 61: ES2015 and Beyond

your voice mattersi.e. bug the tc39 members

Page 62: ES2015 and Beyond

Twitter: @_jayphelpsThat’s all folks