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
実践Isomorphic(+ Electron)
Search
Koutarou Chikuba
April 30, 2015
Programming
14
23k
実践Isomorphic(+ Electron)
isormorphic meetupの資料です
Koutarou Chikuba
April 30, 2015
Tweet
Share
More Decks by Koutarou Chikuba
See All by Koutarou Chikuba
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
14
4.6k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.3k
V8 as a container on CDN Edge worker
mizchi
6
1.9k
Edge Side Frontend という新領域
mizchi
34
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.1k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.3k
「フロントエンド領域」を再定義する
mizchi
50
36k
光を超えるためのフロントエンドアーキテクチャ
mizchi
84
21k
Other Decks in Programming
See All in Programming
大公開!iOS開発の悩みトップ5 〜iOSDC Japan 2024〜
ryunakayama
0
190
Amazon Neptuneで始める初めてのグラフDB ー グラフDBを使う意味を考える ー
satoshi256kbyte
2
260
Developer Joy == Developer Productivity (really!)
hollycummins
1
220
事業フェーズの変化に対応する 開発生産性向上のゼロイチ
masaygggg
0
200
長期運用プロダクトの開発速度を維持し続けるためのリファクタリング実践例
wataruss
8
2.7k
いまから追い上げる、Jetpack Compose トレーニング
nyafunta9858
0
590
KSPの導入・移行を前向きに検討しよう!
shxun6934
PRO
0
280
メモリ最適化を究める!iOSアプリ開発における5つの重要なポイント
yhirakawa333
0
420
Swiftコードバトル必勝法
toshi0383
0
170
いつか使える ObjectSpace / Maybe useful ObjectSpace
euglena1215
2
140
僕が思い描くTypeScriptの未来を勝手に先取りする
yukukotani
9
2.4k
Go1.23で入った errorsパッケージの小さなアプデ
kuro_kurorrr
2
390
Featured
See All Featured
How GitHub (no longer) Works
holman
310
140k
Gamification - CAS2011
davidbonilla
79
5k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
29
2.2k
The Pragmatic Product Professional
lauravandoore
31
6.2k
Docker and Python
trallard
39
3k
YesSQL, Process and Tooling at Scale
rocio
167
14k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
36
1.7k
Rails Girls Zürich Keynote
gr2m
93
13k
StorybookのUI Testing Handbookを読んだ
zakiyama
26
5.1k
How to name files
jennybc
75
98k
What’s in a name? Adding method to the madness
productmarketing
PRO
21
3k
Practical Orchestrator
shlominoach
185
10k
Transcript
࣮ફisomorphic (+ Electron) mizchi / Increments, Inc Ismorphic Meetup
ismorphicͱ ڥΛબͳ͍JavaScript
ࠓ͞ͳ͍͜ͱ ☞ αʔόʔαΠυϨϯμϦϯά
(ࣗͷ)isormorphicͷత ➀ Ͳ͜Ͱಈ͘୯ػೳͳϞδϡʔϧΛఏڙ͍ͨ͠ ➁ node.jsͷϞδϡʔϧγεςϜΛ׆༻ͯ͠։ൃ͍ͨ͠ ➂ MVCڲਖ਼Ϊϓε
1. Ͳ͜Ͱಈ͍ͯ΄͍͠ ☞ ϒϥβڥ ☞ DOM͔Βಠཱͨ͠Workerڥ ☞ nodeڥ ☞ ϔουϨεςεςΟϯά
2. node.jsͷϞδϡʔϧγεςϜΛ׆༻ͯ͠։ ൃ͍ͨ͠ ☞ ʮnodeϞδϡʔϧnodeඇґଘͳΒಈͣ͘ʯͱ͍͏ߟ͑ํ ☞ ϥΠϒϥϦఏڙ࣌ڥґଘ͔Ͳ͏͔Λৗʹҙࣝ͢Δ
3. MVCڲਖ਼Ϊϓε ☞ pure javascript + ڥͷࠩΛٵऩͰ͖Δ+α ʹ੍ݶ͞ΕΔ ☞ MVCͰ͍͏Ϗϡʔ͕ࣗવͱ৮Γਏ͘ͳΔ
☞ => υϝΠϯʹྗ
ҰੲલͷJSͱ͍͑… jQueryͱDOMͱJavaScriptͷ۠ผ͕͞Ε͍ͯͳ͍αϯϓϧίʔυ͕ ͨ͘͞Μ͋ͬͯਏ͔ͬͨ
ͨͱ͑… markdownίϯύΠϥͷmarkedͲͷڥͰಈ͘ ☞ nodeͰίϯύΠϧͰ͖Δ ☞ ϒϥβίϯύΠϧͰ͖Δ ☞ webworkerͰ1/4ͣͭઍͬͯฒྻϏϧυͰ͖Δ ☞ ϒϥβΛ্ཱͪ͛ͣʹnodeͰ୯ମςετͰ͖Δ
ͦͷଞɺڧ͍ಈػ ͱʹ͔͘ෆ҆ఆͰॏ͍Phantom.jsͰςετͨ͘͠ͳ͍
֤ڥͷࠩ
άϩʔόϧۭؒ window: DOM͕ଘࡏ͢Δڥ global: nodeڥ self: WebWorker / ServiceWorkerڥ
ڥґଘAPI ☞ document / navigator ☞ setImmediate / requestAnimationFrame ☞
ϙϦϑΟϧ͕ͳ͍ωΠςΟϒϞδϡʔϧͷrequire(httpvm) ☞ etc...
࣮ࡍʹ… ☞ ECMAScriptͷൣғ͚ͩͰ࣮͢Δͷ͕(ཧతʹ)ਖ਼͍͠ ☞ ͱ͍͑nodeͱϒϥβΛαϙʔτͯͨ͠Βे ☞ workerڥΕΒΕ͕ͪ
ωΠςΟϒϞδϡʔϧ ☞ preinstallͰgypͰωΠςΟϒϏϧυ͢Δͷݺͳ͍ ☞ ωΠςΟϒͰબͳ͍ ☞ sundown ΑΓ marked
Ͳ͏ͯ͠ωΠςΟϒϞδϡʔϧΛݺͼͨ ͍ ☞ emscriptenͰϏϧυ͢Δ ☞ zlib.jsͱ͔ ☞ llvm.jsͱ͔ ☞ Ϗϧυ͕ߴίετ/όΠφϦαΠζ͕ڊେԽ͢ΔͷͰਪ͠ͳ͍
commonjs require
commonjs/require ͱ ☞ node.jsͷϞδϡʔϧղܾγεςϜ ☞ requireؔͱͦͷϑΝΠϧΛؚΉpackage.jsonͷmain͔Βղܾ ͞ΕΔ
࠷খͷϞδϡʔϧ - package.json - foo.js module.exports = function(){console.log('foo')}; {"name":"foo", "main":
"foo.js"}
commonjsͷϒϥβ͚ϓϦϓϩηοα ☞ substack/node-browserify ☞ webpack ☞ require1k — CommonJS require
for the browser in 1k ☞ Duo ͦΕͧΕඍົʹڍಈ͕ҟͳΔׂ͕Ѫ
جຊతͳΈ ☞ requireؔͷϙϦϑΟϧΛૠೖ͢Δ ☞ AST͔Βrequire('./hoge')Λ૬ରύε./hogeͷࢀরஔ͖͑Δ ☞ ./hoge ͷࢀরಉ͡ϞδϡʔϧͰڞ༗͞ΕΔ
browserify/webpackͷ੍ݶ ☞ requireઌ͕จࣈྻҎ֎ͩͱࢀরͷΛߦ͑ͳ͍ ☞ requireؔͷࢀরΛίʔϧͨ͠ͱ͖͠ͳ͍
μϝͳྫ var x = './foo'; require(x);
μϝͳྫ req = require; req('./foo');
μϝͳྫ global.require('foo'); ※͜Ε͋ͱͰ͏
࣮ફ
altjsjsxͷมܗ ͍ΖΜͳํ๏͕͋Δ ☞ browserify transform ☞ webpack plugin ☞ gulp/gruntͰϓϦϓϩηε
☞ require.extensionsͰϑοΫ(node/electronͰͷΈ༗ޮ)
mizchiͷͨͲΓண͍ͨϕετϓϥΫςΟε ☞ gulpͰsrcҎԼΛlibʹు͖ग़͢ ☞ libΛ .gitignore Ͱࢦఆͯ͠git͔Βແࢹ ☞ watchifyͰlibҎԼΛࢹͯࠩ͠build
☞ ςετmochaͱcoffeeͰࡶʹॻ͘(ΈͰબͿ) ☞ power-assertͰมܗ ☞ ςετ࣌libଆΛݺͿ mocha --require espower-coffee/guess test/*.coffee
src/ foo.coffee bar.ts template.jade lib/ <-- .gitignore foo.js bar.js template.js
test/ foo-test.coffee
͜ͷํࣜͷཧ༝ ☞ browseirfyͰҰׅͰղܾ͢Δͱɺ୯ମςετ࣌ʹҰՕॴॻ͖ ͚͑ͨͩͰશ෦ͷϞδϡʔϧΛϏϧυ͢Δඞཁ͕͋Δ ☞ ୯ମςετͰ͖Δ͜ͱͰϞδϡʔϧͷಠཱੑΛอূͰ͖Δ
watchify ☞ browserify ΤϯτϦϙΠϯτ͔Βશͯθϩ͔ΒϏϧυ͠Α͏ ͱ͢Δ ☞ watchifyࠩࢹͯ͠ు͖ग़͢ ࣗͷϓϩδΣΫτͰ 8.3s →
0.02s React͍Δ͚ͩͰݦஶʹมΘΔ
ES6 moduleͲ͏͢Δʁ ☞ import / export ☞ কདྷతʹͬͪ͜?(node͕node_modulesΛͲ͏ѻ͏͔ܾ·ͬͯͳ ͍) ☞
babelrequireܗࣜʹม͢Δ ☞ typescriptͷ --target commonjs export default ະରԠ
Electron (چ atom-shell)
Electron ☞ Atomͷϕʔε ☞ window ͱ global ͕ڞଘ͢Δڥ ☞ τοϓϨϕϧthis
window
ElectronڥͷಛघͳϥΠϒϥϦ require('app'), require('browser-window') ଞɺmenu, clipboard, crash-reporter,
ElectronڥͰͷbrowserify ☞ node_modulesԼͷෆཁͳϑΝΠϧΛআͯ͠αΠζॖখ ☞ ؆қͳಡԽ ࣗͷϓϩδΣΫτͰ(250MB → 2.2MB) Θͳͯ͘ಈ͘ͷ͕ڧΈͰ͋Δ
Ұ෦browserifyͰ͖ͳ͍ͷͰͲ͏ʹ͔͔ͯ͠Θ͢ var marked = require('marked'); // browserifyͰมܗ var app =
global.require('app'); // ͦͷ··௨͢ ※ Oops
Node.js / ElectronઢͰͷϒϥβڥ
݁ہDOMͱͳΜͩͬͨͷ͔ ☞ ͬͱීٴͨ͠؆қͳGUIπʔϧΩοτ ☞ nodeͰ࣮ͨ͠ϞδϡʔϧΛͬ͘͞ΓGUIΞϓϦʹࡌͤΒΕͯ αΠίʔ ☞ ͨͩ͠EmbededͳChromeؚΉͷͰόΠφϦେ͖͍(40MBఔ )
ElectronͷՌׂͨ͢ ☞ มԽͷૣ͍ϒϥβڥΛݻఆ͢ΔΞϓϩʔνͷҰͭ ☞ Chromeͷ࠷৽APIΛ੯͠Έͳ͑͘Δݱ࣮తͳϓϥοτϑΥʔ Ϝ
ଞɺڥ͝ͱͷIsomorphic
View Isormorphic
Reactͷ߹ ☞ React.renderToString(...) ☞ React.renderToStaticMarkup(...) jsdom͑ React.renderToString(...) ·Ͱ͍͚Δ ࢀߟ: JSDOMͱReact.addons.TestUtilsͰReactΛϔουϨεʹςετ
͢Δ - Qiita
Isomorphic for V8 ctx = V8::Context.new ctx.eval """ var global
= {}; """ ctx.eval $react_source ctx.eval """ var React = global.React; """ V8 binding͋ΕଞͷݴޠͰ͍͚Δ
Network Isomorphic
ServiceWorkerͰIsomorphic ☞ ωοτϫʔΫϓϩΩγ ☞ ΞϓϦέʔγϣϯΩϟογϡ ☞ ϓογϡ௨(͜ΕࠓճͲ͏Ͱ͍͍)
Express͍ͨ͘ͳ͍? ☞ ωοτϫʔΫϦΫΤετ͕ϞοΫͰ͖ΕIn/Out੍ޚͰ͖Δͷ Ͱ ☞ => ServiceWorker্Ͱexpress࣮ͨ͠Β͍͍Μ͡ΌͶʁ
Sabizan ☞ mizchi/sabizan ☞ ServiceWorker্Ͱexpress෩ͷAPI͕ॻ͚Δ ☞ ·ͩ·ͩPoC mizchi-sandbox/scala-js-in-service-worker
ࠓಈ͍ͨίʔυ # it will respond to https://localhost:3000/api/user/fuga?foo=bar proxy.get '/user/:id', ({id},
{foo}, req) -> {id, foo} # Return with promise proxy.post '/post', ({}, body) -> new Promise (done) -> setTimeout -> done {type: 'this is post:'+params.prop} , 300
·ͱΊ
(ࣗͷ)Isomorphicੈք؍ ☞ View(React) ☞ ωοτϫʔΫ(ServiceWorker) ☞ Ϟδϡʔϧ(Browserify) શ෦ϔουϨε
͓ΘΓ