Download to read offline
Uploaded byMartin Heidegger
NodeFest2014 - Transpiler
Slides to the presentation that I held on the 2014 NodeFest conference.
NodeFest2014 - Transpiler
- 1.
- 2. Source → SourceCompiler = Transpiler
- 3.
- 4.
- 5.
- 6.
- 7. • パーフォマンス • 設定システム •ノティフィケーション • CLI ごっちゃごっちゃ • 合成 理由がたっぷり
- 8. Static Site Generatorの 待つ時間がながい！ Transpiler パーフォマンス
- 9.
- 10. Transpiler パーフォマンス SYNC ASYNCIMPORT CoffeeScript ✓ ✕ ✕ CoffeeScript Redux ✓ ✕ ✕ TypeScript ✓ ✕ import x = … JSX ✓ ✕ import x JSX (React-tools) ✓ ✕ ✕
- 11. Transpiler パーフォマンス smallA.jade bigA.jade smallB.jade bigB.jade ASYNC smallA.jadebigA.jade smallB.jade bigB.jadeSYNC 例：TypeScript: smallA.ts → bigA.ts + smallB.ts → bigB.ts
- 12. Transpiler パーフォマンス SYNC ASYNCIMPORT EJS ✓ ✕ render(…) Marked ✓ ✕ ✕ Handlebars ✓ ✕ ✕ Jade ✓ ✕ include x
- 13. Transpiler パーフォマンス SYNC ASYNCIMPORT Less ✓ ✓ @import “…” Stylus ✕ ✓ @import “…” Sass ✓ ✕ ✕ Node-Sass ✕ ✓ @import “…”
- 14.
- 15. Transpiler パーフォマンス CoffeeScript 53ms CoffeeScriptRedux 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.
- 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.
- 21.
- 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.
- 25. Transpiler 設定システム 一般的な設定 言語専用設定 環境設定 （ファイル設定） （ユーザー設定） - lintのコードスタイル -問題の設定をはすずため - コンパイラバーション
- 26.
- 27. Transpiler 設定システム jade --outfile.jade 設定入力システム
- 28. Transpiler 設定システム jade --confconfig.json { “output”: “file.jade” } 設定入力システム
- 29. jade --conf config.yaml Transpiler設定システム output: file.jade 設定入力システム
- 30. Transpiler 設定システム env JADE_OUTPUT=file.jadejade 設定入力システム
- 31. Transpiler 設定システム jade --confconfig.xml <xml> <output>file.jade</output> </xml> 設定入力システム
- 32. Transpiler 設定システム jade --outfile.jade --save-conf conf.yaml 設定の保存方法
- 33.
- 34.
- 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 patternimport 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 patternimport 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 patternimport 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.
- 45. Transpiler のCLI ごっちゃごっちゃ エラーコードやフォマッティング SyntaxError Config Error Unexpected Error I/O Error
- 46. Transpiler 合成 <html> <script> → JavaScriptTranspiler </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.
- 49.
- 50.
- 51.
- 52.
- 53.
- 54.