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
CI/CD 改善の勘所
mizchi
0
95
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.4k
Server Side JavaScript のためのバンドル最適化
mizchi
5
7.2k
V8 as a container on CDN Edge worker
mizchi
6
2.2k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.4k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.5k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Programming
See All in Programming
PostgreSQLのRow Level SecurityをPHPのORMで扱う Eloquent vs Doctrine #phpcon #track2
77web
2
350
GoのGenericsによるslice操作との付き合い方
syumai
3
690
来たるべき 8.0 に備えて React 19 新機能と React Router 固有機能の取捨選択とすり合わせを考える
oukayuka
2
860
Kotlin エンジニアへ送る:Swift 案件に参加させられる日に備えて~似てるけど色々違う Swift の仕様 / from Kotlin to Swift
lovee
1
260
GitHub Copilot and GitHub Codespaces Hands-on
ymd65536
1
120
Select API from Kotlin Coroutine
jmatsu
1
190
エラーって何種類あるの?
kajitack
5
310
VS Code Update for GitHub Copilot
74th
1
400
地方に住むエンジニアの残酷な現実とキャリア論
ichimichi
5
1.3k
NPOでのDevinの活用
codeforeveryone
0
350
エンジニア向け採用ピッチ資料
inusan
0
160
FormFlow - Build Stunning Multistep Forms
yceruto
1
190
Featured
See All Featured
[RailsConf 2023] Rails as a piece of cake
palkan
55
5.6k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.4k
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Code Review Best Practice
trishagee
68
18k
Fireside Chat
paigeccino
37
3.5k
A designer walks into a library…
pauljervisheath
207
24k
Thoughts on Productivity
jonyablonski
69
4.7k
Building Adaptive Systems
keathley
43
2.6k
A better future with KSS
kneath
239
17k
Balancing Empowerment & Direction
lara
1
370
Rebuilding a faster, lazier Slack
samanthasiow
82
9.1k
Being A Developer After 40
akosma
90
590k
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) શ෦ϔουϨε
͓ΘΓ