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
730
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
Decoupled System with Turbo Frame
wtnabe
1
37
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
650
let-me-edit-with-editor
wtnabe
0
240
google-photos-and-storage-and-rclone
wtnabe
0
310
one case of how to begin vuejs
wtnabe
2
360
Kanazawa.rb meetup #56 Coderetreat Intro
wtnabe
0
340
lightweight authenticity of microservices
wtnabe
0
360
Automate WordPress deployment with WordMove
wtnabe
1
400
CircleCI Hands-on for Beginners
wtnabe
0
370
Other Decks in Programming
See All in Programming
欠陥を早期に発見するための Software Engineer in Test とその重要性 / What is Software Engineer in Test and How they works
orgachem
PRO
17
2.3k
RubyGems on ruby.wasm
kateinoigakukun
0
110
PHPコードの実行モデルを理解する / Understanding-the-PHP-Execution-Model
shin1x1
0
1.1k
RaaP
ksss
0
150
CREってこういうこと? 体験入社 - 提案資料 - / what-is-cre-trial-employment
shinden
1
620
Fragment Composition of GraphQL
quramy
14
1.7k
RustでAWS Lambda functionをいい感じに書く
taiki45
2
150
Powerfully Typed TypeScript
euxn23
3
1.5k
Jetpack Composeとデザインシステム
rmakiyama
0
230
Exploring the Implementation of “t.Run”, “t.Parallel”, and “t.Cleanup”
akarin
1
160
otelcol receiver 自作RTA / Pepabo Tech Conference #22 春のSREまつり
arthur1
0
810
GoでParserを書く
karupanerura
1
260
Featured
See All Featured
Building a Scalable Design System with Sketch
lauravandoore
457
32k
10 Git Anti Patterns You Should be Aware of
lemiorhan
649
58k
A Tale of Four Properties
chriscoyier
153
22k
Creatively Recalculating Your Daily Design Routine
revolveconf
211
11k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
245
20k
Robots, Beer and Maslow
schacon
PRO
155
8k
Adopting Sorbet at Scale
ufuk
69
8.6k
How to train your dragon (web standard)
notwaldorf
75
5.2k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
morganepeng
117
18k
[RailsConf 2023] Rails as a piece of cake
palkan
28
4.1k
XXLCSS - How to scale CSS and keep your sanity
sugarenia
242
1.2M
Bootstrapping a Software Product
garrettdimon
PRO
302
110k
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