Build the Future of the Web with Modern JavaScript

This presentation is about what's new in JavaScript, usually referred to as ESNext: new syntax, language features, etc.

Transcript

1. Build the Future of the Web with Modern JavaScript Build the Future of the Web with Modern JavaScript Build the Future of the Web with Modern JavaScript Photo by Aditya Vyas on Unsplash
2. Arnelle Balane Frontend Developer, ChannelFix arnellebalane.com github.com/arnellebalane twitter.com/arnellebalane
3. ES2015
4. ES2015 const , let arrow functions classes rest, spread . . .
5. ES2016
6. ES2016 Array.prototype.includes exponentiation (**) operator
7. ES2017
8. ES2017 async/await string padding Object.values/Object.entries . . .
9. http://kangax.github.io/compat-table/es6/
10. http://kangax.github.io/compat-table/es2016plus/
11. ES.Next
12. Modules Modules Modules Photo by Vincent van Zalinge on Unsplash
13. Module Systems Module Systems CommonJS ★ NodeJS ★ require()
14. Module Systems Module Systems CommonJS ★ NodeJS ★ require() AMD (Asynchronous Module Definition) ★ Browsers ★ RequireJS, etc.
15. Module Systems Module Systems CommonJS ★ NodeJS ★ require() AMD (Asynchronous Module Definition) ★ Browsers ★ RequireJS, etc. UMD (Universal Module Definition) ★ CommonJS + AMD
16. Module Systems Module Systems CommonJS ★ NodeJS ★ require() AMD (Asynchronous Module Definition) ★ Browsers ★ RequireJS, etc. UMD (Universal Module Definition) ★ CommonJS + AMD
17. ES Modules ES Modules // lib.mjs export function greet() { console.log('Hello World!'); }
18. ES Modules ES Modules // lib.mjs export function greet() { console.log('Hello World!'); } // main.mjs import {greet} from './lib.mjs'; greet(); // logs 'Hello World!'
19. ES Modules ES Modules // lib.mjs export default function greet() { console.log('Hello World!'); } // main.mjs import greet from './lib.mjs'; greet(); // logs 'Hello World!'
20. ★ import and export not available ★ Evaluated every time the script is loaded ★ Variables in the top-level scope become global variables ★ Not strict mode by default ★ import and export keywords ★ Evaluated only once ★ Variables in the top-level scope don’t become global variables ★ 'use strict' by default ES Modules ES Modules Regular Scripts Regular Scripts
21. ★ import and export not available ★ Evaluated every time the script is loaded ★ Variables in the top-level scope become global variables ★ Not strict mode by default ★ import and export keywords ★ Evaluated only once ★ Variables in the top-level scope don’t become global variables ★ 'use strict' by default ES Modules ES Modules Regular Scripts Regular Scripts
22. ES Modules ES Modules Regular Scripts Regular Scripts ★ import and export keywords ★ Evaluated only once ★ Variables in the top-level scope don’t become global variables ★ 'use strict' by default ★ import and export not available ★ Evaluated every time the script is loaded ★ Variables in the top-level scope become global variables ★ Not strict mode by default
23. ES Modules ES Modules Regular Scripts Regular Scripts ★ import and export keywords ★ Evaluated only once ★ Variables in the top-level scope don’t become global variables ★ 'use strict' by default ★ import and export not available ★ Evaluated every time the script is loaded ★ Variables in the top-level scope become global variables ★ Not strict mode by default
24. ★ import and export keywords ★ Evaluated only once ★ Variables in the top-level scope don’t become global variables ★ 'use strict' by default ES Modules ES Modules Regular Scripts Regular Scripts ★ import and export not available ★ Evaluated every time the script is loaded ★ Variables in the top-level scope become global variables ★ Not strict mode by default
25. ES Modules ES Modules <!-- index.html --> <script type="module" src="main.mjs"></script>
26. File Extension File Extension <!-- index.html --> <script type="module" src="main.mjs"></script>
27. ★ Consistency with NodeJS ★ “This file contains code that most likely will not work in regular scripts!” File Extension File Extension <!-- index.html --> <script type="module" src="main.mjs"></script>
28. Fallback Fallback <!-- index.html --> <script type="module" src="main.mjs"></script> <script nomodule src="lib.js"></script> <script nomodule src="main.js"></script>
29. Additional Behavior Additional Behavior ★ “Bare” module specifiers are not supported ★ Deferred by default, even for inline modules ★ Always fetched with CORS ❌ import greet from 'greet.mjs'; ✅ import greet from '/greet.mjs'; ✅ import greet from './greet.mjs'; ✅ import greet from '../greet.mjs'; ✅ import greet from 'https://example.com/greet.mjs';
30. Preloading Preloading <!-- index.html --> <link rel="modulepreload" href="main.mjs"> <script type="module" src="main.mjs"></script>
31. Browser Support Browser Support
32. Dynamic Imports Dynamic Imports Dynamic Imports Photo by Glenn Carstens-Peters on Unsplash
33. import() Function import() Function // main.mjs import('./greet.mjs') .then(greet => greet());
34. import() Function import() Function // main.mjs import('./greet.mjs') .then(greet => greet()); // main.mjs const greet = await import('./greet.mjs') greet();
35. ★ Can load modules on-demand ★ Can be called anywhere in the code ★ Can be used inside classic scripts ★ Can be statically analyzed (helpful for build tools) ★ Can only be used at the top-level scope of a file ★ Can only be used inside module scripts Static Imports Static Imports Dynamic Imports Dynamic Imports
36. ★ Can load modules on-demand ★ Can be called anywhere in the code ★ Can be used inside classic scripts ★ Can be statically analyzed (helpful for build tools) ★ Can only be used at the top-level scope of a file ★ Can only be used inside module scripts Static Imports Static Imports Dynamic Imports Dynamic Imports
37. Static Imports Static Imports Dynamic Imports Dynamic Imports ★ Can be statically analyzed (helpful for build tools) ★ Can only be used at the top-level scope of a file ★ Can only be used inside module scripts ★ Can load modules on-demand ★ Can be called anywhere in the code ★ Can be used inside classic scripts
38. source: https://gist.github.com/ebidel/3201b36f59f26525eb606663f7b487d0 Feature Detection Feature Detection function supportsDynamicImport() { try { new Function('import("")'); return true; } catch (err) { return false; } }
39. Browser Support Browser Support
40. BigInt BigInt BigInt Photo by Hedi Alija on Unsplash
41. Numbers Numbers ★ Represented as double-precision floats ★ -(253 - 1) to 253 - 1 ★ Integers and floating-point numbers
42. BigInt ★ New numeric primitive for arbitrary-precision integers ★ Store and operate on very large integers BigInt
43. BigInt ★ New numeric primitive for arbitrary-precision integers ★ Store and operate on very large integers BigInt const eleven = 11n; const twelve = BigInt(12); typeof eleven === 'bigint'; // true
44. 12n + 12n; // 24n 12n * 2; // TypeError 12n * BigInt(2); // 24n BigInt BigInt
45. BigInt BigInt 12n + 12n; // 24n 12n * 2; // TypeError 12n * BigInt(2); // 24n const googol = 10n ** 100n; // 100000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000n
46. Performance Performance source: https://developers.google.com/web/updates/2018/05/bigint
47. Browser Support Browser Support
48. Photo by Perchek Industrie on Unsplash New Promise Methods New Promise Methods New Promise Methods
49. finally() finally() ★ Executes a callback when the Promise gets either resolved or rejected
50. finally() finally() ★ Executes a callback when the Promise gets either resolved or rejected performAction() .then(result => { console.log(result); isDone = true; }) .catch(error => { console.error(error); isDone = true; });
51. finally() finally() ★ Executes a callback when the Promise gets either resolved or rejected performAction() .then(result => { console.log(result); isDone = true; }) .catch(error => { console.error(error); isDone = true; });
52. finally() finally() ★ Executes a callback when the Promise gets either resolved or rejected performAction() .then(console.log) .catch(console.error) .finally(() => isDone = true); performAction() .then(result => { console.log(result); isDone = true; }) .catch(error => { console.error(error); isDone = true; });
53. finally() finally() ★ Executes a callback when the Promise gets either resolved or rejected performAction() .then(result => { console.log(result); isDone = true; }) .catch(error => { console.error(error); isDone = true; }); performAction() .then(console.log) .catch(console.error) .finally(() => isDone = true);
54. Browser Support Browser Support
55. Photo by Mitch Meyers on Unsplash New RegExp Features New RegExp Features New RegExp Features
56. const input = '2018-07'; const pattern = /^(\d{4})-(\d{2})$/; const matched = input.match(pattern); const year = matched[1]; const month = matched[2]; Named Capture Groups Named Capture Groups Capture Groups
57. const input = '2018-07'; const pattern = /^(?<year>\d{4})-(?<month>\d{2})$/; const matched = input.match(pattern); const year = matched.groups.year; const month = matched.groups.month; Named Capture Groups Named Capture Groups Named Capture Groups
58. const input = '2018-07'; const pattern = /^(?<year>\d{4})-(?<month>\d{2})$/; const matched = input.match(pattern); const year = matched.groups.year; const month = matched.groups.month; const {year, month} = matched.groups; Named Capture Groups Named Capture Groups Named Capture Groups
59. const input = '@arnellebalane, @channelfix hello there!'; const pattern = /@[\w\d.]+/ig; Lookbehind Assertions Lookbehind Assertions “Get all mentioned usernames, without the @”
60. const input = '@arnellebalane, @channelfix hello there!'; const pattern = /@[\w\d.]+/ig; Lookbehind Assertions Lookbehind Assertions “Get all mentioned usernames, without the @”
61. const input = '@arnellebalane, @channelfix hello there!'; const pattern = /@[\w\d.]+/ig; Lookbehind Assertions Lookbehind Assertions “Get all mentioned usernames, without the @” const input = '@arnellebalane, @channelfix hello there!'; const pattern = /(?<=@)[\w\d.]+/ig;
62. const input = '@arnellebalane, @channelfix hello there!'; const pattern = /@[\w\d.]+/ig; Lookbehind Assertions Lookbehind Assertions “Get all mentioned usernames, without the @” const input = '@arnellebalane, @channelfix hello there!'; const pattern = /(?<=@)[\w\d.]+/ig;
63. const input = '@arnellebalane, @channelfix hello there!'; const pattern = /@[\w\d.]+/ig; Lookbehind Assertions Lookbehind Assertions “Get all mentioned usernames, without the @” const input = '@arnellebalane, @channelfix hello there!'; const pattern = /(?<!@)[\w\d.]+/ig;
64. Browser Support Browser Support
65. Class Field Declarations Class Field Declarations Class Field Declarations Photo by Annie Spratt on Unsplash
66. Class Fields Class Fields class Person { constructor(name) { this.name = name; this.isAlive = true; } kill() { this.isAlive = false; } }
67. class Person { constructor(name) { this.name = name; this.isAlive = true; } kill() { this.isAlive = false; } } Class Fields Class Fields
68. class Person { constructor(name) { this.name = name; this.isAlive = true; } kill() { this.isAlive = false; } } class Person { isAlive = true; constructor(name) { this.name = name; } kill() { this.isAlive = false; } } Class Fields Class Fields
69. class Person { constructor(name) { this.name = name; this.isAlive = true; } kill() { this.isAlive = false; } } class Person { isAlive = true; constructor(name) { this.name = name; } kill() { this.isAlive = false; } } Class Fields Class Fields
70. Browser Support Browser Support
71. Browser Support Browser Support npm i -D @babel/preset-stage-3
72. Photo by Joshua Newton on Unsplash Private Fields and Methods Private Fields and Methods Private Fields and Methods
73. Private Fields Private Fields class Person { isAlive = true; kill() { this.isAlive = false; } }
74. Private Fields Private Fields class Person { isAlive = true; kill() { this.isAlive = false; } } const me = new Person(); me.isAlive = false; //
75. Private Fields Private Fields const me = new Person(); me.isAlive = false; // class Person { #isAlive = true; kill() { this.#isAlive = false; } }
76. Private Fields Private Fields const me = new Person(); me.isAlive = false; // class Person { #isAlive = true; kill() { this.#isAlive = false; } }
77. Private Fields Private Fields const me = new Person(); me.isAlive = false; // undefined me.#isAlive = false; // SyntaxError class Person { #isAlive = true; kill() { this.#isAlive = false; } }
78. class Person { #isAlive = true; kill() { this.#isAlive = false; } } const me = new Person(); me.kill(); // Private Methods Private Methods
79. Private Methods Private Methods const me = new Person(); me.kill(); // class Person { #isAlive = true; #kill() { this.#isAlive = false; } }
80. const me = new Person(); me.kill(); // class Person { #isAlive = true; #kill() { this.#isAlive = false; } } Private Methods Private Methods
81. const me = new Person(); me.#kill(); // SyntaxError class Person { #isAlive = true; #kill() { this.#isAlive = false; } } Private Methods Private Methods
82. Browser Support Browser Support
83. Browser Support Browser Support npm i -D @babel/preset-stage-3
84. Photo by Echo Grid on Unsplash Static Class Properties Static Class Properties Static Class Properties
85. Static Properties Static Properties const me = new Person(); me.isAlive; // true class Person { isAlive = true; }
86. class Person { static isAwesome = true; isAlive = true; } const me = new Person(); me.isAlive; // true Person.isAwesome; // true Static Properties Static Properties
87. Browser Support Browser Support
88. Browser Support Browser Support npm i -D @babel/preset-stage-3
89. And many more...
90. Photo by Clément Gerbaud on Unsplash TC39 TC39 TC39
91. ★ Technical Committee number 39 TC39 TC39
92. ★ Technical Committee number 39 ★ Part of ECMA International, the institution that standardizes the JavaScript language TC39 TC39
93. ★ Technical Committee number 39 ★ Part of ECMA International, the institution that standardizes the JavaScript language ★ Follows a process based on maturity stages TC39 TC39
94. Stage 0 : strawman Stage 0 : strawman ★ Any submitted ideas for features to include in the specification ★ Only members of TC39 can create these proposals
95. Stage 1 : proposal Stage 1 : proposal ★ A formal proposal of the feature ★ Championed by a member of TC39 ★ Problem is clearly identified ★ Example solutions and API ★ Discussion of semantics, algorithms, and potential obstacles
96. ★ A first version of the specification ★ Formal description of the syntax and semantics of the feature Stage 2 : draft Stage 2 : draft
97. ★ Mostly finished, now needs feedback from implementations and users ★ Specification text is complete Stage 3 : candidate Stage 3 : candidate
98. ★ Ready to be included in the standard Stage 4 : finished Stage 4 : finished
99. Thank you! Build the Future of the Web with Modern JavaScript Arnelle Balane Frontend Developer, ChannelFix
100. Thank you! Build the Future of the Web with Modern JavaScript Arnelle Balane Frontend Developer, ChannelFix slides.arnelle.me/iox18