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
42
極限環境で最終ビルドを絞るためのフロントエンド設計
mizchi
15
5.1k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.8k
V8 as a container on CDN Edge worker
mizchi
6
2.1k
Edge Side Frontend という新領域
mizchi
35
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.3k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.4k
「フロントエンド領域」を再定義する
mizchi
50
36k
Other Decks in Programming
See All in Programming
color-scheme: light dark; を完全に理解する
uhyo
7
490
Jakarta EE meets AI
ivargrimstad
0
320
Kotlinの開発でも AIをいい感じに使いたい / Making the Most of AI in Kotlin Development
kohii00
5
1.2k
Domain-Driven Transformation
hschwentner
2
1.9k
Honoとフロントエンドの 型安全性について
yodaka
7
1.4k
.NET Frameworkでも汎用ホストが使いたい!
tomokusaba
0
200
1年目の私に伝えたい!テストコードを怖がらなくなるためのヒント/Tips for not being afraid of test code
push_gawa
1
510
機能が複雑化しても 頼りになる FactoryBotの話
tamikof
0
120
責務と認知負荷を整える! 抽象レベルを意識した関心の分離
yahiru
8
1.3k
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
230
Generating OpenAPI schema from serializers throughout the Rails stack - Kyobashi.rb #5
envek
1
380
sappoRo.R #12 初心者セッション
kosugitti
0
280
Featured
See All Featured
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
40
2k
Speed Design
sergeychernyshev
27
810
Optimising Largest Contentful Paint
csswizardry
34
3.1k
Evolution of real-time – Irina Nazarova, EuRuKo, 2024
irinanazarova
6
570
A designer walks into a library…
pauljervisheath
205
24k
GraphQLとの向き合い方2022年版
quramy
44
14k
Documentation Writing (for coders)
carmenintech
67
4.6k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
Chrome DevTools: State of the Union 2024 - Debugging React & Beyond
addyosmani
4
370
Designing for Performance
lara
604
68k
Practical Orchestrator
shlominoach
186
10k
Building a Modern Day E-commerce SEO Strategy
aleyda
38
7.1k
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) શ෦ϔουϨε
͓ΘΓ