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
810
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
21
5 min Jekyll/Liquid Plugin cooking
wtnabe
0
9
Ruby de Wasm
wtnabe
0
32
Cloud Native Buildpacksって結局どうなの?
wtnabe
0
25
Decoupled System with Turbo Frame
wtnabe
1
88
join-kanazawarb-or-7years-passed-since-it-was-borned
wtnabe
0
750
let-me-edit-with-editor
wtnabe
0
310
google-photos-and-storage-and-rclone
wtnabe
0
410
one case of how to begin vuejs
wtnabe
2
440
Other Decks in Programming
See All in Programming
How mixi2 Uses TiDB for SNS Scalability and Performance
kanmo
35
14k
『GO』アプリ バックエンドサーバのコスト削減
mot_techtalk
0
140
Domain-Driven Transformation
hschwentner
2
1.9k
Pulsar2 を雰囲気で使ってみよう
anoken
0
230
Linux && Docker 研修/Linux && Docker training
forrep
24
4.5k
社内フレームワークとその依存性解決 / in-house framework and its dependency management
vvakame
1
550
Honoとフロントエンドの 型安全性について
yodaka
5
330
Pythonでもちょっとリッチな見た目のアプリを設計してみる
ueponx
1
530
時計仕掛けのCompose
mkeeda
1
290
ASP. NET CoreにおけるWebAPIの最新情報
tomokusaba
0
360
GitHub Actions × RAGでコードレビューの検証の結果
sho_000
0
250
『品質』という言葉が嫌いな理由
korimu
0
160
Featured
See All Featured
Why You Should Never Use an ORM
jnunemaker
PRO
55
9.2k
GraphQLとの向き合い方2022年版
quramy
44
13k
The Power of CSS Pseudo Elements
geoffreycrofte
75
5.5k
Why Our Code Smells
bkeepers
PRO
336
57k
Building Applications with DynamoDB
mza
93
6.2k
How to train your dragon (web standard)
notwaldorf
91
5.8k
KATA
mclloyd
29
14k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Embracing the Ebb and Flow
colly
84
4.6k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.4k
Mobile First: as difficult as doing things right
swwweet
223
9.3k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.1k
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