Slide 1

Slide 1 text

.mjs 2018/04/24 We are JavaScripters!! 
 @ Recruit Technologies

Slide 2

Slide 2 text

Twitter: @yosuke_furukawa Github: yosuke-furukawa

Slide 3

Slide 3 text

Node.js v10 Release (maybe tomorrow)

Slide 4

Slide 4 text

Node.js v10 
 Notable Changes • for-await-of in Stream experimental support • ESModules experimental support • private/public class fields experimental support • fs/promises

Slide 5

Slide 5 text

DEMO

Slide 6

Slide 6 text

DEMO import fs from 'fs/promises'; import util from 'util'; async function main() { try { const content = await fs.readFile(process.argv[2]) console.log(content.toString()) } catch(e) { console.error(e.toString()); } } main();

Slide 7

Slide 7 text

file name is … foo.mjs

Slide 8

Slide 8 text

ʊʊਓਓਓʊʊ ʼɹ.mjs !!!ɹʻ ʉʉY^Y^Yʉʉ

Slide 9

Slide 9 text

Yes, we have long discussion about ESM.

Slide 10

Slide 10 text

We need ".mjs".

Slide 11

Slide 11 text

Why?

Slide 12

Slide 12 text

Module !== Script

Slide 13

Slide 13 text

Module [ "strict", "top level scope", "reserved await" ] Script [ "non strict", "global scope", ]

Slide 14

Slide 14 text

We need to detect which mode on load file.

Slide 15

Slide 15 text

if file.lastIndexOf(".mjs") { Module } else { Script }

Slide 16

Slide 16 text

Simple and Faster

Slide 17

Slide 17 text

We do not use ".js" ???? (´ɾωɾʆ)

Slide 18

Slide 18 text

No, 2 reasons.

Slide 19

Slide 19 text

Use loader option.

Slide 20

Slide 20 text

DEMO

Slide 21

Slide 21 text

DEMO const builtins = Module.builtinModules; const URL = url.URL; const baseURL = new URL('file://'); baseURL.pathname = `${process.cwd()}/`; export function resolve(specifier, parentModuleURL = baseURL, defaultResolve) { if (builtins.includes(specifier)) { return { url: specifier, format: 'builtin' }; } const resolved = new url.URL(specifier, parentModuleURL); const ext = path.extname(resolved.pathname); return { url: resolved.href, format: 'esm' }; }

Slide 22

Slide 22 text

DEMO $ node —experimental-modules —loader loader.mjs file.js // file.js
 import fs from 'fs'; import util from 'util'; const readFile = util.promisify(fs.readFile); async function main() { try { const content = await readFile(process.argv[2]) console.log(content.toString()) } catch(e) { console.error(e.toString()); } } main();

Slide 23

Slide 23 text

mode detection on flag `—mode` , package.json see: https://gist.github.com/ceejbot/b49f8789b2ab6b09548ccb72813a1054 
 https://docs.google.com/presentation/d/ 1xK1ana_TIxfAHX33CYVHFnJsV0If_YirLtRBBga9cv0/edit#slide=id.p

Slide 24

Slide 24 text

You just use ".js" if you don’t need to use ESM.

Slide 25

Slide 25 text

You would be better to use ".mjs", if you need ESM on Node.js v9-10.

Slide 26

Slide 26 text

You would be better to wait the conclusion, if you want to use ES Modules in the future.

Slide 27

Slide 27 text

ऄ଍ (da-soku) +

Slide 28

Slide 28 text

Filename Extensions YOMO-YAMA

Slide 29

Slide 29 text

Long long time ago… Brendan Eich saids …

Slide 30

Slide 30 text

)PXEPXFUIJOLFT FTpMFFYUFOTJPOTUPEFUFDU WFSTJPOT // sorry no reference… I cannot find link 8FOFFEUPDIBOHFpMFOBNFFYUFOTJPOTUPVQHSBEF UIBUJTOJHIUNBSFʜ

Slide 31

Slide 31 text

*EJTMJLFNPEFT8IPEPFTOU #VUUIJTTPVOETMJLF UIF7FSTJPOJOHJTBOBOUJQBUUFSOTIJCCPMFUI*WF IFBSESFDFOUMZSF8FC4PDLFUT*UEPFTOPUSFqFDU SFBMJUZ https://esdiscuss.org/topic/no-more-modes 3FDFOUMZ *NFUXJUIUIF(PPHMF7UFBNGPSUXPGVMM EBZT0OFNFTTBHFUIBUDBNFUISPVHIMPVEBOE DMFBS UIBU*TBJE*XPVMESFMBZUPUIFMJTU JTQMFBTF OPNPSFNPEFT

Slide 32

Slide 32 text

Web does not have
 version/mode.

Slide 33

Slide 33 text

All we need is feature detection.

Slide 34

Slide 34 text

Detectable Feature // Feature Detection if (!Array.isArray) {} if (!String.prototype.trimStart) {}

Slide 35

Slide 35 text

un-detectable feature (on runtime) class A {} import / export #foo // syntax

Slide 36

Slide 36 text

Modern JavaScript is difficult to detect features.

Slide 37

Slide 37 text

Module JavaScript is JavaScript 2.0

Slide 38

Slide 38 text

JavaScript is not so easy, We are JavaScripters, Every JSers would be better to enjoy chaos.

Slide 39

Slide 39 text

Enjoy JS Chaos :)

Slide 40

Slide 40 text

Thanks