.mjs + HTTP/2 = Universal JS

2017/10/06のGotanda.js#9にてLT
https://gotandajs.connpass.com/event/66262/

元スライドは下記です(reveal.js)
https://darai0512.github.io/talks/gotandajs_20171006/

内容の更新は下記にて行っていきます
https://qiita.com/darai0512/items/202f4e34c283eb7440e6

Transcript

1. .mjs + HTTP/2 = Universal JS 2017/10/06 @Gotanda.js #9
2. darai0512 Work: Hadoop (java/python), API (Node.js) Like: , codegolf
3. Question $ node -p '{a: 1}' 出力 1 理由 Node JavaScript 仕様 踏 答
4. Answer $node --help |grep '\-\-print' -p, --print evaluate script and print result $ node -p "{}" undefined $node -p "{a:1,b:2}" [eval]:1 {a:1,b:2} ^ SyntaxError: Unexpected token : $ node -p "{a:1;b:2}" 2 block scope label 1 Ref. Ecma Spec
5. What’s .mjs? ES Modules Node.js Node.js agged (>= v8.5) Modules API node --experimental-modules hoge.mjs script agged/un agged
7. before <!-- browser <script type=text/javascript src='bundle.js'></script> --> // server const pkg = require('pkg'); module.exports = {pkg};
8. after <!-- browser <script type=module src='not_bundle.js'></script> --> // server import hoge from './hoge'; export default hoge;
9. Diff (Node.js) Global etc... Modules API
10. Diff (ECMAScript) not Function but Syntax not PATH but URL (Node.js ) strict mode
11. ... const myPkg = env === 'development' ? require('../mypkg') : require('mypk Node.js pkg or directory (´ ) ( ) Promise Dynamic Import
13. Load to Universal JS .mjs js Web apache express
14. Try Universal JS $cat validation.mjs export default (input) => typeof input === 'string'; <!-- on browser <script type=module> import validation from './validation.mjs'; if (validation('user-input')) console.log('ok'); // ok </script> --> $cat serverside.mjs && node --experimental-modules serverside.mjs import validation from './validation'; if (validation('user-input from browser')) console.log('ok'); (node:72314) ExperimentalWarning: The ESM module loader is experimental. ok validation import ES Modules
15. Try Universal JS (using npm package) $cat validation.mjs import validation from './node_modules/myValidation/index.mjs'; export default (input) => validation(input); validation npm package node ......
16. HTTP/2 not Text but Binary 1 TCP TCP cf. HTTP/1.1 1 req socket (ex, Chrome:6 ) Hpack header ( ) Server Push CSS/JS/ asset PUSH ( ) header key/val
17. Performance js/css/ ? HTTP1 Tips HTTP2 ESM ? bundle le (by ,ahomu @html5conf) DOMContentLoaded TLS CPU
18. HTTP/2 Nginx/Apache/Node.js(>= v8.4 ( agged)) Node tatsuhiro_t website 17.5% nghttp2 Node.js web server 0.3%
19. Try HTTP/2 with express 1. HTTP/2 TLS localhost TLS (ServiceWorker ) 2. module Compatibility API 3. with ag
20. Try HTTP/2 with express: $brew upgrade openssl # mac version 古 $openssl version OpenSSL 1.0.2l 25 May 2017 $openssl genrsa -aes128 -out my.key 2048 # AES-128. DES 3DES SEED 非推奨 $openssl req -new -key my.key -out my.csr # 対話 全 default 回答 $openssl x509 -req -days 365 -in my.csr -signkey my.key -out my.cert
21. Try HTTP/2 with express: http2 module $cat server.js const express = require('express'); const http2 = require('http2'); const fs = require('fs'); const options = { key: fs.readFileSync(__dirname + '/my.key'), cert: fs.readFileSync(__dirname + '/my.cert') }; const app = express(); app.use(express.static(__dirname + '/views')); app.use(express.static(__dirname + '/mjs', { setHeaders: (res, path, stat) => { res.header('Content-Type', 'application/javascript'); } })); http2.createSecureServer(options, app).listen(8080);
22. Try HTTP/2 with express: $npm install express $cat views/index.html <h1>mjs</h1> <script type=module src=./validation.mjs> <!-- mjs試 用意 --> $node --expose-http2 server.js (node:73026) ExperimentalWarning: The http2 module is an experimental API listen ! ...... _http_incoming.js:104 if (this.socket.readable) ^ TypeError: Cannot read property 'readable' of undefined at IncomingMessage._read (_http_incoming.js:104:18) at IncomingMessage.Readable.read (_stream_readable.js:445:10) at IncomingMessage.read (_http_incoming.js:96:15) at resume_ (_stream_readable.js:825:12) at _combinedTickCallback (internal/process/next_tick.js:138:11) at process._tickCallback (internal/process/next_tick.js:180:9)
23. express PR merge phouri https://github.com/nodejs/node/issues/14672 https://github.com/expressjs/express/pull/3390
24. Try HTTP/2 with express: (revenge) $git clone https://github.com/phouri/express.git -b initial-support-http2 $cat server.js const express = require('./express'); // <- line.1 左記 変更 $node --expose-http2 server.js ......h2 !
25. ES Modules Universal JS HTTP/2 Universal JS
26. References .mjs HTTP/2 blog.jxck.io teppeis blog masakielastic Ayumu Sato