$30 off During Our Annual Pro Sale. View Details »

Exploring Future Node

Exploring Future Node

Expoloring Future Node @ jsconf.asia 2016

Yosuke Furukawa
PRO

November 26, 2016
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Exploring Future
    Node
    jsconf.asia 2016/11/26 @ Singapore

    View Slide

  2. @yosuke_furukawa

    View Slide

  3. Organizer Leader
    Node Collaborator Node Evangelist

    View Slide

  4. Twitter: @yosuke_furukawa
    Github: yosuke-furukawa

    View Slide

  5. https://hexi.pics/

    View Slide

  6. Node.js
    Past
    Present
    Future

    View Slide

  7. Past Node.js
    My favorite changes
    v4.x ~ v6.x

    View Slide

  8. My favorite features
    (v4.x ~ v6.x)
    • inspect mode with Chrome
    • Intl built-in Object support
    • stable and performance

    View Slide

  9. inspect mode
    DEMO

    View Slide

  10. Intl built-in Object
    > new Intl.NumberFormat('en').format(10000000)
    ’10,000,000'
    > new Intl.NumberFormat('en', { style: 'currency',
    currency: 'USD' }).format(10000000)
    '$10,000,000'
    > new Intl.DateTimeFormat('ja-JP-u-ca-
    japanese').format(new Date());
    'ฏ੒28೥11݄24೔'
    > new Intl.DateTimeFormat('en').format(new Date());
    '11/24/2016'

    View Slide

  11. Stable & Performant
    /PEFKTWJTGBTUFSUIBO
    PUIFSWFSTJPOT

    View Slide

  12. Present Node.js
    v7.x

    View Slide

  13. Node.js v7 is released

    View Slide

  14. Notable Changes
    • ES2016+ support
    • New URL Parser

    View Slide

  15. ES2016+ Support

    View Slide

  16. ES2015 Support

    View Slide

  17. ES2015 Support

    View Slide

  18. ES2016 Support

    View Slide

  19. exponential operator /
    Array.prototype.includes
    > 2 ** 3
    8
    > [1,2,3].includes(1)
    true

    View Slide

  20. ES2017 Support

    View Slide

  21. ES2017 Support

    8FDBOVTFBTZODBXBJU
    CFIJOEUIFqBH

    View Slide

  22. Before async-await: callback
    const fs = require('fs');
    const copy = (from, to, done) => {
    fs.readFile(from, (err, data) => {
    if (err) return done(err);
    fs.writeFile(to, data, (err) => {
    if (err) return done(err);
    done(null);
    });
    });
    };
    copy('./foo.txt', './bar.txt', (err) => err ?
    console.error(err) : console.log('done'))

    View Slide

  23. Before async-await: Promise
    const fs = require('fs');
    const promisify = require('./promisify');
    const readFile = promisify(fs.readFile);
    const writeFile = promisify(fs.writeFile);
    const copy = (from, to) => {
    return readFile(from).then(
    (data) => writeFile(to, data));
    };
    copy('./foo.txt', './bar.txt').then(() =>
    console.log('done')).catch(console.error);

    View Slide

  24. async-await
    // --harmony_async_await
    const fs = require('fs');
    const promisify = require('./promisify');
    const readFile = promisify(fs.readFile);
    const writeFile = promisify(fs.writeFile);
    const copy = async function(from, to) {
    const data = await readFile(from);
    await writeFile(to, data);
    };
    copy('./foo.txt', './bar.txt').then(() =>
    console.log('done')).catch(console.error);

    View Slide

  25. New URL Parser

    View Slide

  26. New URL Parser
    • current URL parser
    const url = require('url');
    // Create URL Object
    const u = url.parse('https://www.example.com/path/
    foo/bar');
    // Stringify URL Object
    url.format(u);

    View Slide

  27. New URL Parser
    • new URL Parser is same to Browser URL API
    const URL = require('url').URL;
    // Create URL Object
    const u = new URL('https://www.example.com/path/
    foo/bar');
    // Stringify URL Object
    u.toString();

    View Slide

  28. New URL Parser
    • new URL Parser is same to Browser URL API
    const URL = require('url').URL;
    // Create URL Object
    const u = new URL('https://www.example.com/path/
    foo/bar');
    // Stringify URL Object
    u.toString();
    8)"58(63-

    View Slide

  29. Node.js v7 follows
    standardization
    • ES2016+ support
    • New URL Parser
    &$."
    8)"58(

    View Slide

  30. Node.js v7 follows
    standardization
    • ES2016+ support
    • New URL Parser
    &$."
    8)"58(
    8FC4UBOEBSE

    View Slide

  31. Future Node.js
    v8.x ~

    View Slide

  32. Future Node.js move forward
    to Web Standard
    • HTTP/2 support
    • ES Modules interop
    *&5'
    &$."

    View Slide

  33. HTTP/2 Support
    • HTTP/2 is new version of HTTP
    • RFC7540 is already published by IETF
    • Release Target: Node v8

    View Slide

  34. HTTP/2 Goal
    • Decrease Latency
    • Data Compression of HTTP Header (hpack)
    • Fixing Head-of-Line Blocking
    • Server Push
    • Prioritized Request

    View Slide

  35. Request Header becoming huge
    NFUIPE (&5
    TDIFNF IUUQT
    IPTU FYBNQMFDPN
    QBUI GPPCBSCB[
    VTFSBHFOU .P[JMMBʜ
    DPPLJF TFTTJPOJEYYYY

    View Slide

  36. Request Header becoming huge
    .P[JMMB DPNQBUJCMF.4*&
    8JOEPXT/547

    .P[JMMB 8JOEPXT/58JOY

    "QQMF8FC,JU ,)5.- MJLF(FDLP

    $ISPNF4BGBSJ&EHF

    View Slide

  37. Data Compression of HTTP Header
    3FRVFTU)FBEFST
    NFUIPE (&5
    TDIFNF IUUQT
    IPTU FYBNQMFDPN
    QBUI GPPCBSCB[
    VTFSBHFOU .P[JMMB
    $PNQSFTTJPO%JDUJPOBSZ
    BVUIPSJUZ
    NFUIPE (&5
    ʜ
    TDIFNF IUUQT
    ʜ
    IPTU FYBNQMFDPN
    VTFSBHFOU .P[JMMBʜ
    $PNQSFTTFE)FBEFS



    )V⒎NBO GPPCBSCB[


    View Slide

  38. Head-of-Line Blocking
    4FSWFS
    #SPXTFSDBOTFOESFRVFTUT
    QBSBMMFMZ

    View Slide

  39. Head-of-Line Blocking
    4FSWFS
    #VUJGSFRVFTUJTTMPX CSPXTFS
    DBOVTFPOMZSFRVFTUT

    View Slide

  40. Multiplexing requests on 1 TCP
    connection
    4FSWFS
    5$1$POOFDUJPOCVUNVMUJ
    SFRVFTUT

    View Slide

  41. Multiplexing requests on 1 TCP
    connection
    4FSWFS
    *GTPNFSFRVFTUTBSFTMPX #65
    XIPMFSFRVFTUTBSFOPUB⒎FDUFE

    View Slide

  42. HTTP/2 on Node inside
    MJCVW
    IUUQQBSTFS
    7
    DBSFT 0QFO44- [MJC OHIUUQ
    OFXMJCSBSZUPDSFBUF
    )551DMJFOUTFSWFS

    View Slide

  43. HTTP/2 Support
    // plain http support
    const http2 = require('http').HTTP2;
    const server = http2.createServer((req, res) => {
    res.end('hello plain text http2');
    });
    server.listen(3000);

    View Slide

  44. HTTP/2 Support
    const http2 = require('http').HTTP2;
    const fs = require('fs');
    const path = require('path');
    const options = {
    key: fs.readFileSync(
    path.resolve('.', 'keys/agent2-key.pem')),
    cert: fs.readFileSync(
    path.resolve('.', 'keys/agent2-cert.pem'))
    };
    const server = http2.createSecureServer(options, (req, res) => {
    res.end('hello http2');
    });
    server.listen(3010);

    View Slide

  45. HTTP2 by node core
    DEMO

    View Slide

  46. HTTP/2 Implementation
    Status
    • Strongly Work In Progress
    • Some missing APIs
    • We have not supported HTTP/2 feature like
    Server Push/Prioritization yet
    • We need help!!!
    • https://github.com/nodejs/http2

    View Slide

  47. ES Modules interoperability
    • Release Target: Node v10 (maybe)
    • ES Modules interop is not so easy.

    View Slide

  48. ES Modules interoperability
    is…?
    • Node.js uses own CommonJS-like module
    load system.
    • However JavaScript defines new module
    system in ES2015. import/export
    • We need to show users to options to choose
    both CommonJS and ES Modules style.

    View Slide

  49. ES Modules Goal
    • new Declarative Grammar
    • Tools friendly, easy to detect errors
    • Engines friendly, easy to optimize
    • new Strict Rules
    • Module is new Script.

    View Slide

  50. Tools Friendly, Easy to detect
    errors
    module.exports = 'foo';
    module.exports = 'bar';
    // This is not error

    View Slide

  51. Tools Friendly, Easy to detect
    errors
    export default function () {
    return 'foo';
    }
    export default function () => {
    return 'foo';
    }
    // Syntax Error, export default is duplicated

    View Slide

  52. Tools Friendly, Easy to detect
    errors
    // export.js
    module.exports.foo = () => { return 'foo' }
    // import.js
    const bar = require('./export.js').bar;
    // bar is undefined

    View Slide

  53. Tools Friendly, Easy to detect
    errors
    // export.js
    export function foo() {}
    // import.js
    import { bar } from './export.js';
    // Syntax Error, bar is not found.

    View Slide

  54. Engines Friendly, Easy to
    optimize
    • MicroSoft Edge experimentally implements
    ES Modules.
    • The Browser Engine (Chakra) is optimizing to
    lookup ES Modules.

    View Slide

  55. Engines Friendly, Easy to
    optimize
    https://blogs.windows.com/msedgedev/
    2016/05/17/es6-modules-and-beyond/
    #CmgS4hcpMwUTShU3.97

    View Slide

  56. ES Modules: new Script
    • Module is new Script
    • Module has some differences with current Script
    • implicit Strict Mode
    • Different Scope (top level this : undefined)
    • reserved keywords ( await )

    View Slide

  57. ES Modules
    // Syntax Error under strict mode, you cannot use
    with.
    with (obj) {}
    // undefined, top level this is undefined not window
    console.log(this);
    // it is not window.foo, just module local scope
    var foo = 1;
    // Syntax Error, await is reserved in ES Modules
    var await = 'foo';

    View Slide

  58. ES Modules Current Status
    -PBEFSTQFDJTTUJMM
    6/%&3%*4$644*0/

    View Slide

  59. ES Modules Current Status
    7JTXPSLJOQSPHSFTT

    View Slide

  60. ES Modules Current Status
    &4.PEVMFT(SBNNFS4QFD
    TDSJQUUBHTQFDTDSJQUUZQFNPEVMF
    *NQMFNFOUBUJPOCZ7
    *OUFSPQJNQMFNFOUBUJPOCZ/PEFKT


    &4.PEVMFT-PBEFS4QFD



    View Slide

  61. Discussion, Discusssion,
    Discussion…
    • Loader Spec is under discussion
    • ES Modules new spec is also under
    discussion
    • Node Interop is also under discussion…

    View Slide

  62. new extension?: .mjs
    • Current Node Proposals looks at file extension
    • `.js` is Script
    • `.mjs` is Module
    • this is still discussing on Node-EPS repository.
    • https://github.com/nodejs/node-eps/

    View Slide

  63. Note: Babel Behavior is not
    standard.
    • if you are using import/export using
    transpilers like babel, you may change your
    code to use native ES Modules in the future.
    The Journey to ES Modules

    View Slide

  64. Features are based on
    Standard
    • Past Node.js
    • Intl built-in Object
    • Present Node.js
    • ES 2016+ support
    • new URL Support
    • Future Node.js
    • HTTP/2
    • ES Modules
    &$."
    &$."
    8)"58(
    *&5'
    &$."

    View Slide

  65. Why Node needs web standard?
    James Snell @ NodeFest 2016

    Node.js is, and has been, primarily a
    platform for Web Application Development
    While Node.js presumes a "small core"
    philosophy for most things, it includes
    support for the most basic and
    critical internet standards

    View Slide

  66. Why Node needs standard?
    • We are focusing on keep node ecosystems
    better.
    • ECMAScript and other internet Standard will
    be next community standard.
    • Node.js would be better to follow those
    standardization

    View Slide

  67. Thank you!!!

    View Slide

  68. References
    • You Don’t Know ES Modules by Teppei Sato
    • Node And Web Standard by James Snell
    • The Journey to ES Modules by Bradley Ferias
    • High Performance Browser Networking by Ilya
    Grigorik
    • https://github.com/nodejs/node-eps

    View Slide