Build the Future of the Web with Modern JavaScript

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.

32c638e7a3a466d182705fb4370cbb2e?s=128

Arnelle Balane

July 21, 2018
Tweet

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