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
15
4.8k
Server Side JavaScript のためのバンドル最適化
mizchi
5
6.5k
V8 as a container on CDN Edge worker
mizchi
6
1.9k
Edge Side Frontend という新領域
mizchi
34
14k
バンドル最適化マニアクス at tfconf
mizchi
7
4.2k
「たかがJavaScript」のその先 #TECHPLAY
mizchi
47
20k
Deno Node 両刀
mizchi
6
2.3k
「フロントエンド領域」を再定義する
mizchi
50
36k
光を超えるためのフロントエンドアーキテクチャ
mizchi
90
23k
Other Decks in Programming
See All in Programming
JavaでLチカしたい! / JJUG CCC 2024 Fall LT
nhayato
0
110
GitHub Actionsのキャッシュと手を挙げることの大切さとそれに必要なこと
satoshi256kbyte
5
420
弊社の「意識チョット低いアーキテクチャ」10選
texmeijin
5
24k
『ドメイン駆動設計をはじめよう』のモデリングアプローチ
masuda220
PRO
8
510
Compose 1.7のTextFieldはPOBox Plusで日本語変換できない
tomoya0x00
0
170
ActiveSupport::Notifications supporting instrumentation of Rails apps with OpenTelemetry
ymtdzzz
1
180
カラム追加で増えるActiveRecordのメモリサイズ イメージできますか?
asayamakk
4
1.9k
Java ジェネリクス入門 2024
nagise
0
690
受け取る人から提供する人になるということ
little_rubyist
0
180
cXML という電子商取引の トランザクションを支える プロトコルと向きあっている話
phigasui
3
2.3k
みんなでプロポーザルを書いてみた
yuriko1211
0
190
CPython 인터프리터 구조 파헤치기 - PyCon Korea 24
kennethanceyer
0
250
Featured
See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
59
3.5k
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
109
49k
Building Adaptive Systems
keathley
38
2.3k
GraphQLの誤解/rethinking-graphql
sonatard
67
10k
Building Better People: How to give real-time feedback that sticks.
wjessup
364
19k
Stop Working from a Prison Cell
hatefulcrawdad
267
20k
Raft: Consensus for Rubyists
vanstee
136
6.6k
How to Create Impact in a Changing Tech Landscape [PerfNow 2023]
tammyeverts
46
2.1k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
43
6.8k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
10
700
Large-scale JavaScript Application Architecture
addyosmani
510
110k
What's in a price? How to price your products and services
michaelherold
243
12k
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) શ෦ϔουϨε
͓ΘΓ