JS Next - Speaker Deck

Slide 1

Slide 1 text

W H AT ’ S C O M I N G A F T E R E S 6 B R I A N H O LT – @ H O LT B T

Slide 2

Slide 2 text

No content

Slide 3

Slide 3 text

No content

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

H O W D O E S J AVA S C R I P T E V O LV E ? • TC39 – Technical Committee 39 • The committee who meets to standardize ECMAScript • ECMA-262 • The actual document that defines what’s in the ECMAScript language • Ecma – formerly European Computer Manufacturer Association, now just Ecma • A group who oversees the standardization of many things, not just JS

Slide 10

Slide 10 text

H O W D O E S J AVA S C R I P T E V O LV E ? • ECMAScript • JavaScript is an implementation of ES. They’re could be other implementations; they’re just aren’t any of note. • ES3, ES5, ES6/ES2015, ES2016, ES2017, etc. • Major revisions of the language. With ES6/ES2015 we changed to a yearly release cycle. • We skipped ES4 for many reasons but chiefly lack of consensus. • Features are now added in stages.

Slide 11

Slide 11 text

E S 3 • Regex • String methods • Try / catch

Slide 12

Slide 12 text

E S 5 • JSON • Getters / setters • Strict mode • Reflection

Slide 13

Slide 13 text

E S 4 ? • Classes • Modules • Algebraic Data Types • Generators / Iterators • Destructuring • JSX lol (E4X) • Also the kitchen sink

Slide 14

Slide 14 text

No content

Slide 15

Slide 15 text

T H E E 4 X S TA N D A R D WA S D E P R E C AT E D B Y T H E M O Z I L L A F O U N D AT I O N I N 2 0 1 4

Slide 16

Slide 16 text

W H AT M A K E S I T I N T O J S • Enables new things you could not do before (e.g. generators) • Extremely common patterns that could interop with other features if added (e. g. promises) • Such common patterns that it makes sense to add to the language, especially if large or performance sensitive (e.g. JSON.stringify) • Everything else should be added by libraries / userland

Slide 17

Slide 17 text

S TA G E 0 • Strawman • Anyone can propose features to be added to JS • A member of TC39 must be one of the champions of the feature for it to make stage 1 • Many stage 0 proposals never make it to stage 1

Slide 18

Slide 18 text

S TA G E 1 • Proposal • High level API and example usage outlined • Not concrete yet, to be hammered out in committee and discussed how it will interact with other features • Still expected to change majorly before landing as a feature • Definitely still not a guarantee that it’s going to make it into JS

Slide 19

Slide 19 text

S TA G E 2 • Draft • Needs an draft document now, covers most use cases • The committee will start expecting this feature to land and adapt other feature accordingly • Incremental changes still expected • Expected to be a functioning Babel plugin • Far more likely now to make it into JS (still not guaranteed)

Slide 20

Slide 20 text

S TA G E 3 • Candidate • Spec must be exhaustive of every use case • Little-to-no changes expected; only those pushed by implementers (e. g. tail call recursion) • Expected to be implemented in one browser • Almost guaranteed at this point to make it in JS

Slide 21

Slide 21 text

S TA G E 4 • Finished • Test262 (the testing suite to test the spec) tests expected • Two browsers now implement it and been in the wild for a bit • No changes at this point

Slide 22

Slide 22 text

N E W V E R S I O N O F E S 2 0 X X • Every March a new version of ES20XX is cut with all the proposals that are at stage 4 • Miss the deadline? You wait until next March • From March to July only editorial changes are made • In July the spec is finalized and released

Slide 23

Slide 23 text

E S 2 0 1 7 • Object.entries / Object.values • async / await • str.padStart / str.padEnd • Object.getOwnPropertyDescriptors • Trailing commas in params • Shared memory / atomics

Slide 24

Slide 24 text

No content

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

B A B E L 6 WA S T H E M O S T I M P O R TA N T T H I N G I N R E C E N T J S H I S T O RY ⬇

Slide 27

Slide 27 text

# P R O P O S A L S I ’ M S T O K E D A B O U T $

Slide 28

Slide 28 text

O B J E C T R E S T / S P R E A D – S TA G E 3

Slide 29

Slide 29 text

R E G E X I M P R O V E M E N T S – S TA G E 3 • Lookbehind • Named Capture Groups • Better Unicode support • Supports features like matching only Greek characters • /s makes the period character really match all characters

Slide 30

Slide 30 text

D Y N A M I C M O D U L E S – S TA G E 3 • import() • Many of you will have seen this before due to Webpack code splitting • Semantically similar to require.ensure()

Slide 31

Slide 31 text

G L O B A L – S TA G E 3 • Instead of const globalObj = window ? window : global; you can just reference global and it will refer to window in browser and global in Node.

Slide 32

Slide 32 text

N E W A S Y N C C A PA B I L I T I E S • Async Iterator – Stage 3 • Since both the next value in the sequence and the "done" state of the data source must be known at the time that the iterator method returns, iterators are only suitable for representing synchronous data sources. • Observable – Stage 1 • Similar to iterators but instead of you pulling data of an iterator, an observable pushes data at you

Slide 33

Slide 33 text

A S Y N C I T E R AT O R

Slide 34

Slide 34 text

P R O M I S E . P R O T O T Y P E . F I N A L LY – S TA G E 3

Slide 35

Slide 35 text

N E W C L A S S S E M A N T I C S • Public class fields – Stage 3 • Private fields – Stage 3 • Class and property decorators – Stage 2

Slide 36

Slide 36 text

C L A S S P R O P E R T I E S Before After via michalzalecki.com/react-components-and-class-properties/

Slide 37

Slide 37 text

P R I VAT E C L A S S P R O P E R T I E S

Slide 38

Slide 38 text

D E C O R AT O R S

Slide 39

Slide 39 text

I N T L . S E G M E N T E R – S TA G E 3 • An API to separate strings into graphemes • Surprisingly hard and computationally intensive • Examples: • Io parlo italiano • ฉันพูดภาษาไทย • %

Slide 40

Slide 40 text

" % " . l e n g t h

Slide 41

Slide 41 text

Slide 42

Slide 42 text

["", "", "‍", "",].join("")

Slide 43

Slide 43 text

G E N E R AT O R S • Generator arrow functions – Stage 1 • function.sent – Stage 2

Slide 44

Slide 44 text

G E N E R AT O R A R R O W F U N C T I O N S – S TA G E 1 F U N C T I O N . S E N T – S TA G E 2

Slide 45

Slide 45 text

O P T I O N A L C H A I N I N G – S TA G E 1

Slide 46

Slide 46 text

I N T L . R E L AT I V E T I M E F O R M AT – S TA G E 2 • Gives relatives time strings for two dates. • “yesterday” • “ten minutes ago” • Internationalized! Built into the language!

Slide 47

Slide 47 text

D O E X P R E S S I O N S – S TA G E 1

Slide 48

Slide 48 text

A R R AY. P R O T O T Y P E . F L AT T E N – S TA G E 2

Slide 49

Slide 49 text

A R R AY. P R O T O T Y P E . F L AT M A P – S TA G E 2

Slide 50

Slide 50 text

P I P E L I N E O P E R AT O R – S TA G E 1

Slide 51

Slide 51 text

PA R T I A L A P P L I C AT I O N – S TA G E 1

Slide 52

Slide 52 text

S TA G E 0 WA R N I N G : T H E R E B E D R A G O N S H E R E

Slide 53

Slide 53 text

F U N C T I O N E X P R E S S I O N D E C O R AT O R S

Slide 54

Slide 54 text

PA R A M E T E R D E C O R AT O R S

Slide 55

Slide 55 text

WHATWG URL • Imagine not having to parse query strings or make your own URLs anymore

Slide 56

Slide 56 text

PAT T E R N M AT C H I N G

Slide 57

Slide 57 text

D E A D P R O P O S A L S

Slide 58

Slide 58 text

O B J E C T. O B S E R V E

Slide 59

Slide 59 text

S I M D

Slide 60

Slide 60 text

H O W D O I H E L P ? • Use the new features, break them, abuse them • Tweet / talk about them • Follow the tc39/proposals repo on GitHub • Propose your ideas • Contribute to Babel