Exploring Future Node - Speaker Deck

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

@yosuke_furukawa

Slide 3

Slide 3 text

Organizer Leader Node Collaborator Node Evangelist

Slide 4

Slide 4 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 5

Slide 5 text

https://hexi.pics/

Slide 6

Slide 6 text

Node.js Past Present Future

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

inspect mode DEMO

Slide 10

Slide 10 text

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'

Slide 11

Slide 11 text

Stable & Performant /PEFKTWJTGBTUFSUIBO PUIFSWFSTJPOT

Slide 12

Slide 12 text

Present Node.js v7.x

Slide 13

Slide 13 text

Node.js v7 is released

Slide 14

Slide 14 text

Notable Changes • ES2016+ support • New URL Parser

Slide 15

Slide 15 text

ES2016+ Support

Slide 16

Slide 16 text

ES2015 Support

Slide 17

Slide 17 text

ES2015 Support

Slide 18

Slide 18 text

ES2016 Support

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

ES2017 Support

Slide 21

Slide 21 text

ES2017 Support 8FDBOVTFBTZODBXBJU CFIJOEUIFqBH

Slide 22

Slide 22 text

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'))

Slide 23

Slide 23 text

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);

Slide 24

Slide 24 text

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);

Slide 25

Slide 25 text

New URL Parser

Slide 26

Slide 26 text

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);

Slide 27

Slide 27 text

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();

Slide 28

Slide 28 text

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

Future Node.js v8.x ~

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

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

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

Request Header becoming huge .P[JMMB DPNQBUJCMF.4*& 8JOEPXT/547 .P[JMMB 8JOEPXT/58JOY "QQMF8FC,JU ,)5.- MJLF(FDLP $ISPNF4BGBSJ&EHF

Slide 37

Slide 37 text

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[

Slide 38

Slide 38 text

Head-of-Line Blocking 4FSWFS #SPXTFSDBOTFOESFRVFTUT QBSBMMFMZ

Slide 39

Slide 39 text

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

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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);

Slide 44

Slide 44 text

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);

Slide 45

Slide 45 text

HTTP2 by node core DEMO

Slide 46

Slide 46 text

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

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

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';

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

ES Modules Current Status 7JTXPSLJOQSPHSFTT

Slide 60

Slide 60 text

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

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

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

Slide 64

Slide 64 text

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' &$."

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Thank you!!!

Slide 68

Slide 68 text

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