Tweet
Tweet

Slide 1

Slide 1 text

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

Slide 2

Slide 2 text

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

Slide 3

Slide 3 text

最初にまとめ

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

Here, we go !!

Slide 6

Slide 6 text

そもそもEcma262は

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

⼀⽅Node.jsは

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

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

Slide 15

Slide 15 text

そこでBrowserifyですよ

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

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

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

その先の課題

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

Enjoy !!

Slide 30

Slide 30 text

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

Slide 31

Slide 31 text

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