Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

NodeFest2014 - Transpiler

6,170 views

Published on

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

Published in: Software

NodeFest2014 - Transpiler

  1. 1. ならば... Node Transpilerをいかに改善できるか。 すべての Node Transpilerが がひどい!
  2. 2. Source → Source Compiler = Transpiler
  3. 3. Dart TypeScript CoffeeScript JSX (React) JSX Browserify UglifyJS → JavaScript
  4. 4. → HTML EJS Marked Handlebars Jade
  5. 5. Transpiler → CSS Less Stylus Sass
  6. 6. 色々あるのに... 皆がよく使っているのに... なんで悪いの? Transpiler
  7. 7. • パーフォマンス • 設定システム • ノティフィケーション • CLI ごっちゃごっちゃ • 合成 理由がたっぷり
  8. 8. Static Site Generator の 待つ時間がながい! Transpiler パーフォマンス
  9. 9. Transpiler パーフォマンス a-/sync?
  10. 10. Transpiler パーフォマンス SYNC ASYNC IMPORT CoffeeScript ✓ ✕ ✕ CoffeeScript Redux ✓ ✕ ✕ TypeScript ✓ ✕ import x = … JSX ✓ ✕ import x JSX (React-tools) ✓ ✕ ✕
  11. 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. 12. Transpiler パーフォマンス SYNC ASYNC IMPORT EJS ✓ ✕ render(…) Marked ✓ ✕ ✕ Handlebars ✓ ✕ ✕ Jade ✓ ✕ include x
  13. 13. Transpiler パーフォマンス SYNC ASYNC IMPORT Less ✓ ✓ @import “…” Stylus ✕ ✓ @import “…” Sass ✓ ✕ ✕ Node-Sass ✕ ✓ @import “…”
  14. 14. Transpiler パーフォマンス require(“transpiler”); のスピード
  15. 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. 16. Transpiler パーフォマンス import caching
  17. 17. import caching 例 library.jade (120kb) home.jade (2kb + include library.jade) team.jade (3kb + include library.jade) Transpiler パーフォマンス 310ms 10ms 10ms
  18. 18. Import Caching (なし) Transpiler パーフォマンス home.jade team.jade home.jade (2x) library.jade library.jade library.jade
  19. 19. Import Caching (あり) Transpiler パーフォマンス home.jade team.jade home.jade (2x) library.jade
  20. 20. (.........設定システムを検索中です…………………) Transpiler 設定システム
  21. 21. Transpiler 設定システム 一般的な設定 言語専用設定 環境設定 (ファイル設定) (ユーザー設定) 設定の名前システム
  22. 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. 23. Transpiler 設定システム 一般的な設定 言語専用設定 環境設定 (ファイル設定) (ユーザー設定) - no-header (CoffeeScript) - prefix (Stylus) - inline (Stylus) - strict-math (Less) - url-args (Less) - relative-urls (Less) - doctype (Jade) - obj (Jade)
  24. 24. Transpiler 設定システム 一般的な設定 言語専用設定 環境設定 (ファイル設定) (ユーザー設定) Production? Staging? Development?
  25. 25. Transpiler 設定システム 一般的な設定 言語専用設定 環境設定 (ファイル設定) (ユーザー設定) - lintのコードスタイル - 問題の設定をはすずため - コンパイラバーション
  26. 26. Transpiler 設定システム 一般的な設定 言語専用設定 環境設定 (ファイル設定) (ユーザー設定) - エンバイロンメント変数 - エラー言語(英語・日本語)
  27. 27. Transpiler 設定システム jade --out file.jade 設定入力システム
  28. 28. Transpiler 設定システム jade --conf config.json { “output”: “file.jade” } 設定入力システム
  29. 29. jade --conf config.yaml Transpiler 設定システム output: file.jade 設定入力システム
  30. 30. Transpiler 設定システム env JADE_OUTPUT=file.jade jade 設定入力システム
  31. 31. Transpiler 設定システム jade --conf config.xml <xml> <output>file.jade</output> </xml> 設定入力システム
  32. 32. Transpiler 設定システム jade --out file.jade --save-conf conf.yaml 設定の保存方法
  33. 33. まだ良いほう(?) のwatch Transpiler ノティフィケーション
  34. 34. http://youtu.be/R808-qxBt_E
  35. 35. Transpiler ノティフィケーション test.jade dep.jade watch: Stage 1 just main file
  36. 36. Transpiler ノティフィケーション test.jade dep.jadedep.jade watch: Stage 2 import
  37. 37. watch: Stage 3 pattern import Transpiler ノティフィケーション test.jade dep.jadedep.jade lib/*.jade
  38. 38. Transpiler ノティフィケーション test.jade dep.jadedep.jade lib/*.jade inline.js watch: Stage 4 cross compiler
  39. 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. 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. 41. coffee --pipe --out ??? Transpiler のCLI ごっちゃごっちゃ
  42. 42. Transpiler のCLI ごっちゃごっちゃ handlebars -d --data lessc --global-var="VAR=VALUE" jade -O --obj stylus --import データインポート
  43. 43. Transpiler のCLI ごっちゃごっちゃ coffee --debug ts --noImplicitAny marked --silent 出力の量
  44. 44. Transpiler のCLI ごっちゃごっちゃ 引数なし? REPL? PIPE? USAGE? ERROR? VERSION? ? ? ? ? ?
  45. 45. Transpiler のCLI ごっちゃごっちゃ エラーコードやフォマッティング Syntax Error Config Error Unexpected Error I/O Error
  46. 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. 47. どうして、 このテーマ?
  48. 48. Awareness 認知度
  49. 49. Eco-System 生態系
  50. 50. Discussion 議論
  51. 51. どうして、 私?
  52. 52. Martin Heidegger ハイデッガー マルティン オーストリア(ヨーロッパ) 全般技術社 @leichtgewicht martinheidegger
  53. 53. どうして、 今日?
  54. 54. github.com/better-compiler/member gitter.im/better-compiler

×