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

Next Node.js on DevSummit 2017

Next Node.js on DevSummit 2017

Developers Summit 2017 で話した Next Node.js の話です。

Yosuke Furukawa
PRO

February 16, 2017
Tweet

More Decks by Yosuke Furukawa

Other Decks in Programming

Transcript

  1. Next Node.js
    developers summit 2017 2017/02/16 @ Meguro Gajoen

    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. What’s Node.js ???

    View Slide

  6. Server side JavaScript?

    View Slide

  7. Server side JavaScript?
    No.

    View Slide

  8. JavaScript Runtime
    Environment

    View Slide

  9. Node.js Philosophy:
    Small Core, Less is More

    View Slide

  10. Pavelleó Mies van del Rohe / yisris
    Less is More

    View Slide

  11. So, Node.js does not add
    any new brilliant features??

    View Slide

  12. So, Node.js does not add
    any new brilliant features??
    No.

    View Slide

  13. Node.js
    Past
    Present
    Future

    View Slide

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

    View Slide

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

    View Slide

  16. inspect mode
    DEMO

    View Slide

  17. 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

  18. Stable & Performant
    /PEFKTWJTGBTUFSUIBO
    PUIFSWFSTJPOT

    View Slide

  19. Present Node.js
    v7.x

    View Slide

  20. Node.js v7 is released

    View Slide

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

    View Slide

  22. ES2016+ Support

    View Slide

  23. ES2015 Support

    View Slide

  24. ES2015 Support

    View Slide

  25. ES2016 Support

    View Slide

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

    View Slide

  27. ES2017 Support

    View Slide

  28. ES2017 Support

    8FDBOVTFBTZODBXBJU
    CFIJOEUIFqBH

    View Slide

  29. ES2017 Support

    "OEOFYUWDBOVTF
    BTZODBXBJUCZEFGBVMU

    View Slide

  30. 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

  31. 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

  32. 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

  33. New URL Parser

    View Slide

  34. 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

  35. 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

  36. 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

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

    View Slide

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

    View Slide

  39. Future Node.js
    v8.x ~

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    .P[JMMB 8JOEPXT/58JOY

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

    $ISPNF4BGBSJ&EHF

    View Slide

  45. 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

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

  51. 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

  52. 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

  53. HTTP2 by node core
    DEMO

    View Slide

  54. 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

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

    View Slide

  56. 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

  57. ES Modules Goal
    • new Declarative Grammar (Tool/Engines friendly)
    • easy to detect errors
    • easy to optimize
    • new Strict Rules
    • Module is new Script.

    View Slide

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

    View Slide

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

    View Slide

  60. Tools/Engines 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

  61. Tools/Engines 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

  62. Tools/Engines Friendly, Easy
    to optimize
    • MicroSoft Edge experimentally implements
    ES Modules.
    • webpack tree shaking

    View Slide

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

    View Slide

  64. Tools Friendly, Easy to
    optimize
    • webpack2 can reduce the bundled
    JavaScript size using `tree-shaking`.
    • tree-shaking detects `export module but not
    used one`.

    View Slide

  65. Tools Friendly, Easy to
    optimize
    • webpack2 can reduce the bundled
    JavaScript size using `tree-shaking`.
    • tree-shaking detects `export module but not
    used one`.

    View Slide

  66. 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

  67. 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

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

    View Slide

  69. ES Modules Current Status
    7JTXPSLJOQSPHSFTT

    View Slide

  70. ES Modules Current Status
    • Safari TP is enabled under flag
    • Firefox Nightly is enabled under flag
    • Edge is enabled but it does not completed
    yet
    • Chrome is starting to development

    View Slide

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


    &4.PEVMFT-PBEFS4QFD



    View Slide

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

    View Slide

  73. 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

  74. 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

  75. 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

  76. 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

  77. Thank you!!!

    View Slide

  78. 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