Browserify, beyond differences of node and web

Kanazawa.rb meetup #36で喋ったBrowserifyの紹介と今後もJavaScriptを利用するに当たって押さえておくべき課題のまとめ

Transcript

1. BrowserifyでNode.jsとWebの
   いいとこどりJS開発
   〜 今、ちょい先、だいぶ先まで⾒すえて 〜
   @wtnabe
   Kanazawa.rb meetup #36
   2015-08-29 (Sat) at IT-Plaza MUSASHI
   

   View Slide

2. お品書き
   そもそも Ecma262 は
   ⼀⽅ Node.js は
   そこで Browserify ですよ
   Browserify の特徴から⾒える我々の課題
   

   View Slide

3. 最初にまとめ
   

   View Slide

4. Browserifyにできること
   require をブラウザ上で動くように変換
   変換後は1つの JS ファイルに結合
   その他移植可能なモジュールの提供
   transform, plugin による拡張
   

   View Slide

5. Here, we go !!
   

   View Slide

6. そもそもEcma262は
   

   View Slide

7. 依存コードを取得できない
   プラットフォーム独⽴
   ⾔語⾃⾝にファイル読み込みがない
   FileSystemを持つJScriptですらwsfファイ
   ルでを使う<br/>

   View Slide

8. スコープはfunctionのみ
   ファイルを分割しても影響は全体に
   うっかり var を忘れると global leak
   

   View Slide

9. 「テクニック」が横⾏
   利⽤機会が増えてお互いに影響が出るとまずい
   (function() {
   ...
   })();
   ※ testability が激しく落ちるデメリット
   

   View Slide

10. ⼀⽅Node.jsは
    

    View Slide

11. 責務の単位でファイル分割
    ファイル単位スコープ
    必要なものは require
    module.exports
    公開するものを明⽰
    そのうえで名前空間不可侵
    

    View Slide

12. node_modules
    依存モジュールは閉じてる
    個々のモジュール内にnode_modules
    全体のコンフリクトが存在しない
    

    View Slide

13. スケールする依存管理
    ※ 代わりに容量は膨らむ
    

    View Slide

14. 安⼼して開発を進められる
    

    View Slide

15. そこでBrowserifyですよ
    

    View Slide

16. Browserifyにできること
    Node.js の require がブラウザ上で動く
    変換後は1つの JS ファイルに結合
    その他移植可能なモジュールの提供
    transform, plugin による拡張
    

    View Slide

17. requireが動く
    依存ツリーを解決
    1つの JavaScript ファイルを出⼒
    ファイル単位のスコープ分割が⾃動的に
    ⾏われる
    例のテクニック + α
    

    View Slide

18. 何が嬉しいのか？
    スコープ管理⽤のテクニック不要
    豊富な npm module 群の⼀部を活⽤可能
    を書き連ねる必要なし<br/>

    View Slide

19. そしてtransformの例
    coffeeify ( CoffeeScript )
    cssify ( CSS )
    babelify ( Babel : ES6 & JSX )
    espowerify ( power-assert )
    cf. list of transforms · substack/node-browserify Wiki
    

    View Slide

20. ローダーとの⽐較
    LABjs
    ブラウザのみ対応、⾮同期読み込み
    RequireJS
    ブラウザも node.js も対応している
    が、それぞれ書き⽅が違う
    ※ 要 LAB.js, require.js
    

    View Slide

21. Browserifyの特徴から
    ⾒える我々の課題
    

    View Slide

22. その1 : npm
    JSer の知⾒は以前にも増して npm に集約
    されつつある
    download して とかやらない<br/>package.json は多機能、タスクランナーと<br/>か⾔う前にマニュアル読め<br/>

    View Slide

23. その2 : transpiler
    source-to-source compiler
    transcompiler / transpiler
    JavaScript の変換は altJS に限らず常識に
    JSX とか
    変換⽅法はいくつかあるが、⾃分たちに合うものを⾒つけておく
    

    View Slide

24. その3: source map
    変換された JS と元のコードの対応付け
    Browserify は debug オプションだけで
    data uri の source map を⽣成してくれる
    

    View Slide

25. その4 : preprocess
    preprocess で trans compile できるなら新
    しいチャレンジはやりやすい
    ES6, JSX, ...
    preprocess の⾃動化で学習、業務効率に
    差がつく
    

    View Slide

26. Browserify以外では
    View, DOMの新しい動き
    JSX系の記法、VirtualDOM
    フルスタックフレームワーク vs Tools
    ※ ツールの話をしてるけどツールの話だけ追うのはよくない
    

    View Slide

27. その先の課題
    

    View Slide

28. EcmaScript 2015
    将来はこれ
    HTML 5 に突っ込むよりは確実
    今から慣れるという意味では Babel 重要
    先んずれば⼈を制す
    

    View Slide

29. Enjoy !!
    

    View Slide

30. 参考
    Browserify
    substack/browserify-handbook
    studiomohawk/browserify-handbook
    list of transforms · substack/node-browserify
    Wiki
    

    View Slide

31. 参考
    Effective ES6
    ECMAScript 2015 Language Specification –
    ECMA-262 6th Edition
    Babel · The compiler for writing next
    generation JavaScript
    

    View Slide