Embracing ES6

Transcript

1. Embracing ES6
2. ES6 history • ES6 is also known as Harmony • The correct term however is ES2015 (naming convention established) • Was finalised in June 2015 • Future versions will follow the ES[YYYY] pattern
3. ES6 release lifecycle • Yearly release schedule (yay) • Features that don’t make the cut take the next train • This release cycle will pressure browser vendors into quickly implementing new features
4. So … what is it? • Simply … next JS version • An evolution of the language (syntax and functionality) • Minimises the initial gap for true OOP developers • Better, faster, more reliable development
5. How to use it? • Browsers do not fully support ES6 features (though some are natively implemented) • You can still write ES6 code though • Use transpilers in your build process
6. Transpilers • Transpilers are simply JS-to-JS tools • They transform your ES6 code (and unsupported features) to ES5 code • Some features can’t be exactly transformed (let, const) so transpilers fall back to old stuff - var
7. Transpilers • Best transpiler ever: Babel • It has human-readable output • Babel also works server-side (for Node) • Babel has a thriving ecosystem that already supports some of ES2016 and has plugin support
8. Transpilers • Use babel to transpile ES6 to ES5 for static builds • Use babelify with Gulp, Grunt or simple npm run (usually with browserify for require statements) • Use babel-node with any version of node, as it transpiles modules into ES5
9. Install babel & configure the build process
10. Let & const • Better alternatives to the var keyword • Let and const fix something that was confusing in JS - they employ block-level scoping • TDZ (temporal dead zone) - beginning of block, end where declaration happens
11. Let & const • Declaration of the same variable (both with let and const) will fail • Const variables must be initialized • Assigning to const after initialization fails (silently or loudly depending on use strict)
12. Let & const
13. Assignment destructuring • A shorthand for pulling values out of objects or arrays • Supports defaults, aliases and nesting
14. Assignment destructuring
15. Spread operator & rest parameters • Used with … • Rest parameter is a better arguments • Spread operator helps avoid apply, or casts array-like collections to arrays (list of DOM nodes to array)
16. Spread operator & rest parameters
17. Arrow functions • Terse way to declare functions • Depending on how you specify them, you might have implicit return • You can’t name them • Arrow functions are bound to their lexical scope (actually they don’t define a this, arguments, etc.)
18. Arrow functions
19. Template literals • Declared using ` (backtick) in addition to “, ‘ • They can be multiline • They allow interpolation of variables or valid JS expressions
20. Template literals
21. Object literals • Objects now have property value shorthand • You can also have computed property names • Method definitions in object literals also have an improved, more terse syntax
22. Object literals
23. Classes • Syntactic sugar on top of old prototypes • Supports inheritance (via extend keyword), constructors, super calls, static methods • They still rely on prototype inheritance (this is different than traditional OOP languages)
24. Classes
25. Symbols • A new primitive type in ES6 (an awful lot like strings) • Symbols are immutable and unique • They have the type symbol
26. Symbols • Symbols are not iterable (some exceptions - Symbol. iterator) • Can be as global as you want (cross-realm) • There are built-in symbols - Symbol.iterator, Symbol. match • Use them for name clashes (objects as hash maps) or for defining protocols (eg: iterator)
27. Symbols
28. Iterators • Iterators and the iterable protocol define how to iterate over any object • Uses the Symbol.iterator built-in symbol • Must return an object that has a next method (with value and done)
29. Iterators • Object that have implemented the iterable protocol are iterable (you can use the for … of, spread operator, etc.) • Some built-ins are iterable by default (Arrays, Strings, arguments, NodeList, etc.) • Iterators are lazy (one item at a time)
30. Iterators
31. Generators • Generators are a special kind of iterator • Make use of the yield keyword • Generator function execution is suspended, remembering the last position • Useful to make async flows feel synchronous
32. Generators
33. Promises • A way to deal with async code (in a sync-like manner) • Created by using the Promise “class” (will either be resolved or rejected) • Promises are chainable (then or catch - return new promises)
34. Promises • Start out in pending state and are settled at a later time (resolved or rejected) • Promises can be settled only once • Only one of the then or catch branch (and sub-branches) will be executed • There is Promise.all and Promise.race
35. Promises
36. Maps • A replacement to the common pattern of creating a hash-map using POJOs • Adheres to the iterable protocol • Keys can be arbitrary values (eg: DOM nodes, strings, functions, etc.) • Methods to get, set or check values
37. Maps
38. WeakMaps • A subset of Map with limited functionality • It’s not iterable • Keys must be objects (does not support primitive types as keys)
39. WeakMaps • WeakMap holds references to its keys weakly, meaning that if there are no other references to one of its keys, the object is subject to garbage collection • Use it when you need to specify object metadata or extend an object while still being able to garbage collect it if nobody else cares about it
40. WeakMaps
41. Sets • Quite similar to Map (iterable, same methods) • Sets don’t have keys, only values (the key is the value) • Sets can’t have duplicate values because the values are also used as keys
42. Sets
43. WeakSets • Quite similar to WeakMap • Has only values (they act as keys also) • Not iterable, works only with objects
44. WeakSets
45. Proxies • Used to augument behaviour of objects through traps (proxies act as a passthrough) • Your defined handlers determine the access rules to the underlying object • Can be revocable • A lot of traps: get, set, has, defineProperty, apply, ownKeys, etc.
46. Proxies
47. Numbers • Some cool additions were made to the Number class • Methods like isInteger, isSafeInteger or constants such as EPSILON, MAX_SAFE_INTEGER, MIN_SAFE_INTEGER, etc.
48. Numbers
49. Math • Some cool additions were made to the Math class • Methods like sine, trunc, cbrt, sinh, cosh, asinh, hypot, fround, etc.
50. Math
51. Arrays • Some cool additions were made to the Array class • Methods like Array.from, Array.of, copyWithin, fill, find, findIndex, etc.
52. Arrays
53. Objects • Some cool additions were made to the Object class • Methods like assign, is, getOwnPropertySymbols, setPrototypeOf, and object literals
54. Objects
55. Strings • Some cool additions were made to the String class • Methods like startsWith, endsWith, repeat, include, codePointAt, fromCodePoint, etc.
56. Strings
57. Modules • ES6 modules are files that export an API • You can export named or default bindings • You can export a list (multiple bindings)
58. Modules • Import is done in CommonJS style (using the import keyword) • You can alias imports, import everything within a module, etc.
59. Modules
60. That’s all folks! • ES6 (ES2015) is here to stay and evolve • Embrace it today (production as well)
61. Thanks! Vlad “Reign” Zelinschi (UI Tech Lead at 3Pillar Global) @r31gN_