Slides to the presentation that I held on the 2014 NodeFest conference.

1. ならば...
Node Transpilerをいかに改善できるか。
すべての
Node Transpilerが
がひどい！

2. Source → Source Compiler
=
Transpiler

3. Dart
TypeScript
CoffeeScript
JSX (React)
JSX
Browserify
UglifyJS
→ JavaScript

4. → HTML
EJS
Marked
Handlebars
Jade

5. Transpiler
→ CSS
Less
Stylus
Sass

6. 色々あるのに...
皆がよく使っているのに...
なんで悪いの？
Transpiler

7. • パーフォマンス
• 設定システム
• ノティフィケーション
• CLI ごっちゃごっちゃ
• 合成
理由がたっぷり

8. Static Site Generator の
待つ時間がながい！
Transpiler パーフォマンス

9. Transpiler パーフォマンス
a-/sync?

10. Transpiler パーフォマンス
SYNC ASYNC IMPORT
CoffeeScript ✓ ✕ ✕
CoffeeScript Redux ✓ ✕ ✕
TypeScript ✓ ✕ import x = …
JSX ✓ ✕ import x
JSX (React-tools) ✓ ✕ ✕

11. Transpiler パーフォマンス
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

12. Transpiler パーフォマンス
SYNC ASYNC IMPORT
EJS ✓ ✕ render(…)
Marked ✓ ✕ ✕
Handlebars ✓ ✕ ✕
Jade ✓ ✕ include x

13. Transpiler パーフォマンス
SYNC ASYNC IMPORT
Less ✓ ✓ @import “…”
Stylus ✕ ✓ @import “…”
Sass ✓ ✕ ✕
Node-Sass ✕ ✓ @import “…”

14. Transpiler パーフォマンス
require(“transpiler”); のスピード

15. Transpiler パーフォマンス
CoffeeScript 53ms
CoffeeScript Redux 63ms
TypeScript 55ms
JSX 235ms
JSX (React-tools) 75ms
EJS 4ms
Marked 5ms
Handlebars 24ms
Jade 270ms
Less 131ms
Stylus 121ms
Sass 3ms
Node-Sass 13ms

16. Transpiler パーフォマンス
import caching

17. import caching 例
library.jade (120kb)
home.jade (2kb + include library.jade)
team.jade (3kb + include library.jade)
Transpiler パーフォマンス
310ms
10ms
10ms

18. Import Caching （なし）
Transpiler パーフォマンス
home.jade
team.jade
home.jade (2x)
library.jade
library.jade
library.jade

19. Import Caching （あり）
Transpiler パーフォマンス
home.jade
team.jade
home.jade (2x)
library.jade

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

21. Transpiler 設定システム
一般的な設定
言語専用設定
環境設定
（ファイル設定）
（ユーザー設定）
設定の名前システム

22. Transpiler 設定システム
一般的な設定
言語専用設定
環境設定
（ファイル設定）
（ユーザー設定）
- source-map
- target-encoding (utf8)
- pre/post processing
- output file(s)
- input files(s)
ちなみにI/O piping
- config-check only
- import paths
- plugins

23. Transpiler 設定システム
一般的な設定
言語専用設定
環境設定
（ファイル設定）
（ユーザー設定）
- no-header (CoffeeScript)
- prefix (Stylus)
- inline (Stylus)
- strict-math (Less)
- url-args (Less)
- relative-urls (Less)
- doctype (Jade)
- obj (Jade)

24. Transpiler 設定システム
一般的な設定
言語専用設定
環境設定
（ファイル設定）
（ユーザー設定）
Production?
Staging?
Development?

25. Transpiler 設定システム
一般的な設定
言語専用設定
環境設定
（ファイル設定）
（ユーザー設定）
- lintのコードスタイル
- 問題の設定をはすずため
- コンパイラバーション

26. Transpiler 設定システム
一般的な設定
言語専用設定
環境設定
（ファイル設定）
（ユーザー設定）
- エンバイロンメント変数
- エラー言語（英語・日本語）

27. Transpiler 設定システム
jade --out file.jade
設定入力システム

28. Transpiler 設定システム
jade --conf config.json
{
“output”: “file.jade”
}
設定入力システム

29. jade --conf config.yaml
Transpiler 設定システム
output: file.jade
設定入力システム

30. Transpiler 設定システム
env JADE_OUTPUT=file.jade jade
設定入力システム

31. Transpiler 設定システム
jade --conf config.xml
<xml>
<output>file.jade</output>
</xml>
設定入力システム

32. Transpiler 設定システム
jade --out file.jade --save-conf conf.yaml
設定の保存方法

33. まだ良いほう(？)
のwatch
Transpiler ノティフィケーション

34. http://youtu.be/R808-qxBt_E

35. Transpiler ノティフィケーション
test.jade dep.jade
watch: Stage 1
just main file

36. Transpiler ノティフィケーション
test.jade dep.jadedep.jade
watch: Stage 2
import

37. watch: Stage 3
pattern import
Transpiler ノティフィケーション
test.jade dep.jadedep.jade
lib/*.jade

38. Transpiler ノティフィケーション
test.jade dep.jadedep.jade
lib/*.jade
inline.js
watch: Stage 4
cross compiler

39. watch: Stage 3
pattern import
watch: Stage 4
cross compiler
watch: Stage 1
just main file
watch: Stage 2
import
Transpiler ノティフィケーション
test.jade dep.jadedep.jade
lib/*.jade
inline.jsconfig.json
watch: Stage 5
config

40. watch: Stage 3
pattern import
watch: Stage 4
cross compiler
watch: Stage 1
just main file
watch: Stage 2
import
Transpiler ノティフィケーション
test.jade dep.jadedep.jade
lib/*.jade
inline.jsconfig.json
watch: Stage 5
config
watch: Stage 6
piping
test.min.html.gz
compressor

41. coffee --pipe --out
???
Transpiler のCLI ごっちゃごっちゃ

42. Transpiler のCLI ごっちゃごっちゃ
handlebars -d --data
lessc --global-var="VAR=VALUE"
jade -O --obj
stylus --import
データインポート

43. Transpiler のCLI ごっちゃごっちゃ
coffee --debug
ts --noImplicitAny
marked --silent
出力の量

44. Transpiler のCLI ごっちゃごっちゃ
引数なし？
REPL?
PIPE?
USAGE?
ERROR?
VERSION?
?
?
?
?
?

45. Transpiler のCLI ごっちゃごっちゃ
エラーコードやフォマッティング
Syntax Error
Config Error
Unexpected Error
I/O Error

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

47. どうして、
このテーマ？

48. Awareness
認知度

49. Eco-System
生態系

50. Discussion
議論

51. どうして、
私？

52. Martin Heidegger
ハイデッガー マルティン
オーストリア(ヨーロッパ)
全般技術社
@leichtgewicht
martinheidegger

53. どうして、
今日？

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