Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
Browserify, beyond differences of node and web
Search
wtnabe
August 29, 2015
Programming
1
820
Browserify, beyond differences of node and web
Kanazawa.rb meetup #36で喋ったBrowserifyの紹介と今後もJavaScriptを利用するに当たって押さえておくべき課題のまとめ
wtnabe
August 29, 2015
Tweet
Share
More Decks by wtnabe
See All by wtnabe
Effective Jekyll
wtnabe
0
28
5 min Jekyll/Liquid Plugin cooking
wtnabe
0
14
Ruby de Wasm
wtnabe
0
37
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
30
Decoupled System with Turbo Frame
wtnabe
1
100
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
760
let-me-edit-with-editor
wtnabe
0
320
google-photos-and-storage-and-rclone
wtnabe
0
430
one case of how to begin vuejs
wtnabe
2
450
Other Decks in Programming
See All in Programming
Gunma.web #55
tinykitten
0
130
自分のために作ったアプリが、グローバルに使われるまで / Indie App Development Lunch LT
pixyzehn
1
120
SideKiqでジョブが二重起動した事象を深堀りしました
t_hatachi
0
220
技術好きなエンジニアが "リーダーへの進化" によって得たものと失ったもの
pospome
5
1.3k
Denoでフロントエンド開発 2025年春版 / Frontend Development with Deno (Spring 2025)
petamoriken
1
1.3k
CRE Meetup!ユーザー信頼性を支えるエンジニアリング実践例の発表資料です
tmnb
0
300
S3静的ホスティング+Next.js静的エクスポート で格安webアプリ構築
iharuoru
0
190
MCP世界への招待: AIエンジニアが創る次世代エージェント連携の世界
gunta
2
550
PHPer's Guide to Daemon Crafting Taming and Summoning
uzulla
2
970
OpenTelemetryを活用したObservability入門 / Introduction to Observability with OpenTelemetry
seike460
PRO
0
250
ローコードサービスの進化のためのモノレポ移行
taro28
1
330
GDG Super.init(version=6) - From Where to Wear : 모바일 개발자가 워치에서 발견한 인사이트
haeti2
0
560
Featured
See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
31
4.7k
A designer walks into a library…
pauljervisheath
205
24k
Gamification - CAS2011
davidbonilla
81
5.2k
実際に使うSQLの書き方 徹底解説 / pgcon21j-tutorial
soudai
177
52k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
12k
Site-Speed That Sticks
csswizardry
4
450
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
51
2.4k
Embracing the Ebb and Flow
colly
85
4.6k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
12
1.4k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Writing Fast Ruby
sferik
628
61k
Unsuck your backbone
ammeep
670
57k
Transcript
BrowserifyでNode.jsとWebの いいとこどりJS開発 〜 今、ちょい先、だいぶ先まで⾒すえて 〜 @wtnabe Kanazawa.rb meetup #36 2015-08-29
(Sat) at IT-Plaza MUSASHI
お品書き そもそも Ecma262 は ⼀⽅ Node.js は そこで Browserify ですよ
Browserify の特徴から⾒える我々の課題
最初にまとめ
Browserifyにできること require をブラウザ上で動くように変換 変換後は1つの JS ファイルに結合 その他移植可能なモジュールの提供 transform, plugin による拡張
Here, we go !!
そもそもEcma262は
依存コードを取得できない プラットフォーム独⽴ ⾔語⾃⾝にファイル読み込みがない FileSystemを持つJScriptですらwsfファイ ルで<script>を使う
スコープはfunctionのみ ファイルを分割しても影響は全体に うっかり var を忘れると global leak
「テクニック」が横⾏ 利⽤機会が増えてお互いに影響が出るとまずい (function() { ... })(); ※ testability が激しく落ちるデメリット
⼀⽅Node.jsは
責務の単位でファイル分割 ファイル単位スコープ 必要なものは require module.exports 公開するものを明⽰ そのうえで名前空間不可侵
node_modules 依存モジュールは閉じてる 個々のモジュール内にnode_modules 全体のコンフリクトが存在しない
スケールする依存管理 ※ 代わりに容量は膨らむ
安⼼して開発を進められる
そこでBrowserifyですよ
Browserifyにできること Node.js の require がブラウザ上で動く 変換後は1つの JS ファイルに結合 その他移植可能なモジュールの提供 transform,
plugin による拡張
requireが動く 依存ツリーを解決 1つの JavaScript ファイルを出⼒ ファイル単位のスコープ分割が⾃動的に ⾏われる 例のテクニック + α
何が嬉しいのか? スコープ管理⽤のテクニック不要 豊富な npm module 群の⼀部を活⽤可能 <script> を書き連ねる必要なし
そしてtransformの例 coffeeify ( CoffeeScript ) cssify ( CSS ) babelify
( Babel : ES6 & JSX ) espowerify ( power-assert ) cf. list of transforms · substack/node-browserify Wiki
ローダーとの⽐較 LABjs ブラウザのみ対応、⾮同期読み込み RequireJS ブラウザも node.js も対応している が、それぞれ書き⽅が違う ※ 要
LAB.js, require.js
Browserifyの特徴から ⾒える我々の課題
その1 : npm JSer の知⾒は以前にも増して npm に集約 されつつある download して
<script> とかやらない package.json は多機能、タスクランナーと か⾔う前にマニュアル読め
その2 : transpiler source-to-source compiler transcompiler / transpiler JavaScript の変換は
altJS に限らず常識に JSX とか 変換⽅法はいくつかあるが、⾃分たちに合うものを⾒つけておく
その3: source map 変換された JS と元のコードの対応付け Browserify は debug オプションだけで
data uri の source map を⽣成してくれる
その4 : preprocess preprocess で trans compile できるなら新 しいチャレンジはやりやすい ES6,
JSX, ... preprocess の⾃動化で学習、業務効率に 差がつく
Browserify以外では View, DOMの新しい動き JSX系の記法、VirtualDOM フルスタックフレームワーク vs Tools ※ ツールの話をしてるけどツールの話だけ追うのはよくない
その先の課題
EcmaScript 2015 将来はこれ HTML 5 に突っ込むよりは確実 今から慣れるという意味では Babel 重要 先んずれば⼈を制す
Enjoy !!
参考 Browserify substack/browserify-handbook studiomohawk/browserify-handbook list of transforms · substack/node-browserify Wiki
参考 Effective ES6 ECMAScript 2015 Language Specification – ECMA-262 6th
Edition Babel · The compiler for writing next generation JavaScript