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 full-size slide

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

    View full-size slide

  3. 最初にまとめ

    View full-size slide

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

    View full-size slide

  5. Here, we go !!

    View full-size slide

  6. そもそもEcma262は

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  10. ⼀⽅Node.jsは

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  15. そこでBrowserifyですよ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  27. その先の課題

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide