nodefest2014 - transpiler

ならば... Node Transpilerをいかに改善できるか。

すべての Node Transpilerががひどい！

Source → Source Compiler=

Transpiler

Dart TypeScript

CoffeeScript JSX (React)

JSX Browserify

UglifyJS

→ JavaScript

→ HTMLEJS

Marked Handlebars

Jade

Transpiler

→ CSSLess

Stylus Sass

色々あるのに... 皆がよく使っているのに...

なんで悪いの？

Transpiler

• パーフォマンス • 設定システム • ノティフィケーション • CLI ごっちゃごっちゃ • 合成

理由がたっぷり

Static Site Generator の待つ時間がながい！

Transpiler パーフォマンス


a-/sync?


SYNC ASYNC IMPORTCoffeeScript ✓ ✕ ✕

CoffeeScript Redux ✓ ✕ ✕

TypeScript ✓ ✕ import x = …

JSX ✓ ✕ import x

JSX (React-tools) ✓ ✕ ✕


smallA.jade

bigA.jade

smallB.jade

bigB.jade

ASYNC smallA.jade bigA.jade smallB.jade bigB.jadeSYNC

例：TypeScript: smallA.ts → bigA.ts + smallB.ts → bigB.ts


SYNC ASYNC IMPORTEJS ✓ ✕ render(…)

Marked ✓ ✕ ✕

Handlebars ✓ ✕ ✕

Jade ✓ ✕ include x


SYNC ASYNC IMPORT

Less ✓ ✓ @import “…”

Stylus ✕ ✓ @import “…”

Sass ✓ ✕ ✕

Node-Sass ✕ ✓ @import “…”


require(“transpiler”); のスピード


CoffeeScript 53msCoffeeScript Redux 63ms TypeScript 55msJSX 235msJSX (React-tools) 75ms

EJS 4ms Marked 5ms Handlebars 24msJade 270ms

Less 131ms Stylus 121ms Sass 3msNode-Sass 13ms


import caching

import caching 例

library.jade (120kb)

home.jade (2kb + include library.jade)

team.jade (3kb + include library.jade)


310ms

10ms

10ms

Import Caching （なし）


home.jade

team.jade

home.jade (2x)

library.jade

library.jade

library.jade

Import Caching （あり）


home.jade

team.jade

home.jade (2x)

library.jade

（.........設定システムを検索中です…………………）

Transpiler 設定システム


一般的な設定言語専用設定環境設定

（ファイル設定）（ユーザー設定）

設定の名前システム




- source-map - target-encoding (utf8) - pre/post processing - output file(s) - input files(s)ちなみにI/O piping

- config-check only - import paths - plugins




- no-header (CoffeeScript) - prefix (Stylus) - inline (Stylus) - strict-math (Less) - url-args (Less) - relative-urls (Less) - doctype (Jade) - obj (Jade)




Production? Staging? Development?




- lintのコードスタイル -問題の設定をはすずため - コンパイラバーション




-エンバイロンメント変数 -エラー言語（英語・日本語）


jade --out file.jade

設定入力システム


jade --conf config.json

{ “output”: “file.jade” }


jade --conf config.yaml


output: file.jade



env JADE_OUTPUT=file.jade jade



jade --conf config.xml

<xml> <output>file.jade</output> </xml>



jade --out file.jade --save-conf conf.yaml

設定の保存方法

まだ良いほう(？) のwatch

Transpiler ノティフィケーション

http://youtu.be/R808-qxBt_E

http://youtu.be/R808-qxBt_E


test.jade dep.jade

watch: Stage 1 just main file


test.jade dep.jadedep.jade

watch: Stage 2 import

watch: Stage 3 pattern import



lib/*.jade



lib/*.jade

inline.js

watch: Stage 4 cross compiler







lib/*.jade

inline.jsconfig.json

watch: Stage 5 config







lib/*.jade

inline.jsconfig.json

watch: Stage 5 config

watch: Stage 6 piping

test.min.html.gz

compressor

coffee --pipe --out

???

Transpiler のCLI ごっちゃごっちゃ


handlebars -d --data lessc --global-var="VAR=VALUE"

jade -O --obj stylus --import

データインポート


coffee --debug ts --noImplicitAny marked --silent

出力の量


引数なし？

REPL? PIPE?

USAGE? ERROR? VERSION?

???

??


エラーコードやフォマッティング

Syntax Error Config Error

Unexpected Error I/O Error

Transpiler 合成

<html> <script> → JavaScript Transpiler </script> <style> → CSS Transpiler </style> <body> → HTML Transpiler </body> </html>

var a = “→ HTML Transpiler”, b = “→ CSS Transpiler”, c = → JavaScript Transpiler;

head { … } → CSS Transpiler

index.html main.js

screen.css

どうして、このテーマ？

Awareness 認知度

Eco-System 生態系

Discussion 議論

どうして、私？

Martin Heidegger ハイデッガーマルティン

オーストリア(ヨーロッパ)

全般技術社

@leichtgewicht martinheidegger

どうして、今日？

github.com/better-compiler/member gitter.im/better-compiler

http://github.com/better-compiler/member

nodefest2014 - transpiler

Software