Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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.

Arnelle Balane

July 21, 2018
Tweet

More Decks by Arnelle Balane

Other Decks in Programming

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. Module Systems Module Systems CommonJS ★ NodeJS ★ require() AMD

    (Asynchronous Module Definition) ★ Browsers ★ RequireJS, etc.
  3. Module Systems Module Systems CommonJS ★ NodeJS ★ require() AMD

    (Asynchronous Module Definition) ★ Browsers ★ RequireJS, etc. UMD (Universal Module Definition) ★ CommonJS + AMD
  4. Module Systems Module Systems CommonJS ★ NodeJS ★ require() AMD

    (Asynchronous Module Definition) ★ Browsers ★ RequireJS, etc. UMD (Universal Module Definition) ★ CommonJS + AMD
  5. ES Modules ES Modules // lib.mjs export function greet() {

    console.log('Hello World!'); } // main.mjs import {greet} from './lib.mjs'; greet(); // logs 'Hello World!'
  6. 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!'
  7. ★ 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
  8. ★ 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
  9. 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
  10. 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
  11. ★ 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
  12. ★ 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>
  13. 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';
  14. import() Function import() Function // main.mjs import('./greet.mjs') .then(greet => greet());

    // main.mjs const greet = await import('./greet.mjs') greet();
  15. ★ 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
  16. ★ 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
  17. 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
  18. Numbers Numbers ★ Represented as double-precision floats ★ -(253 -

    1) to 253 - 1 ★ Integers and floating-point numbers
  19. 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
  20. 12n + 12n; // 24n 12n * 2; // TypeError

    12n * BigInt(2); // 24n BigInt BigInt
  21. BigInt BigInt 12n + 12n; // 24n 12n * 2;

    // TypeError 12n * BigInt(2); // 24n const googol = 10n ** 100n; // 100000000000000000000000000000000000000000000000000 // 00000000000000000000000000000000000000000000000000n
  22. 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; });
  23. 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; });
  24. 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; });
  25. 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);
  26. Photo by Mitch Meyers on Unsplash New RegExp Features New

    RegExp Features New RegExp Features
  27. 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
  28. 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
  29. 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
  30. const input = '@arnellebalane, @channelfix hello there!'; const pattern =

    /@[\w\d.]+/ig; Lookbehind Assertions Lookbehind Assertions “Get all mentioned usernames, without the @”
  31. const input = '@arnellebalane, @channelfix hello there!'; const pattern =

    /@[\w\d.]+/ig; Lookbehind Assertions Lookbehind Assertions “Get all mentioned usernames, without the @”
  32. 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;
  33. 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;
  34. 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;
  35. Class Fields Class Fields class Person { constructor(name) { this.name

    = name; this.isAlive = true; } kill() { this.isAlive = false; } }
  36. class Person { constructor(name) { this.name = name; this.isAlive =

    true; } kill() { this.isAlive = false; } } Class Fields Class Fields
  37. 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
  38. 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
  39. Photo by Joshua Newton on Unsplash Private Fields and Methods

    Private Fields and Methods Private Fields and Methods
  40. Private Fields Private Fields class Person { isAlive = true;

    kill() { this.isAlive = false; } } const me = new Person(); me.isAlive = false; //
  41. Private Fields Private Fields const me = new Person(); me.isAlive

    = false; // class Person { #isAlive = true; kill() { this.#isAlive = false; } }
  42. Private Fields Private Fields const me = new Person(); me.isAlive

    = false; // class Person { #isAlive = true; kill() { this.#isAlive = false; } }
  43. Private Fields Private Fields const me = new Person(); me.isAlive

    = false; // undefined me.#isAlive = false; // SyntaxError class Person { #isAlive = true; kill() { this.#isAlive = false; } }
  44. class Person { #isAlive = true; kill() { this.#isAlive =

    false; } } const me = new Person(); me.kill(); // Private Methods Private Methods
  45. Private Methods Private Methods const me = new Person(); me.kill();

    // class Person { #isAlive = true; #kill() { this.#isAlive = false; } }
  46. const me = new Person(); me.kill(); // class Person {

    #isAlive = true; #kill() { this.#isAlive = false; } } Private Methods Private Methods
  47. const me = new Person(); me.#kill(); // SyntaxError class Person

    { #isAlive = true; #kill() { this.#isAlive = false; } } Private Methods Private Methods
  48. Photo by Echo Grid on Unsplash Static Class Properties Static

    Class Properties Static Class Properties
  49. class Person { static isAwesome = true; isAlive = true;

    } const me = new Person(); me.isAlive; // true Person.isAwesome; // true Static Properties Static Properties
  50. ★ Technical Committee number 39 ★ Part of ECMA International,

    the institution that standardizes the JavaScript language TC39 TC39
  51. ★ Technical Committee number 39 ★ Part of ECMA International,

    the institution that standardizes the JavaScript language ★ Follows a process based on maturity stages TC39 TC39
  52. Stage 0 : strawman Stage 0 : strawman ★ Any

    submitted ideas for features to include in the specification ★ Only members of TC39 can create these proposals
  53. 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
  54. ★ A first version of the specification ★ Formal description

    of the syntax and semantics of the feature Stage 2 : draft Stage 2 : draft
  55. ★ Mostly finished, now needs feedback from implementations and users

    ★ Specification text is complete Stage 3 : candidate Stage 3 : candidate
  56. ★ Ready to be included in the standard Stage 4

    : finished Stage 4 : finished
  57. Thank you! Build the Future of the Web with Modern

    JavaScript Arnelle Balane Frontend Developer, ChannelFix
  58. Thank you! Build the Future of the Web with Modern

    JavaScript Arnelle Balane Frontend Developer, ChannelFix slides.arnelle.me/iox18