Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Browserify, beyond differences of node and web

wtnabe
August 29, 2015

Browserify, beyond differences of node and web

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

wtnabe

August 29, 2015
Tweet

More Decks by wtnabe

Other Decks in Programming

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