実践Isomorphic(+ Electron)

by Koutarou Chikuba

Slide 1

Slide 1 text

࣮ફisomorphic (+ Electron) mizchi / Increments, Inc Ismorphic Meetup

Slide 2

Slide 2 text

ismorphicͱ͸ ؀ڥΛબ͹ͳ͍JavaScript

Slide 3

Slide 3 text

ࠓ೔࿩͞ͳ͍͜ͱ ☞ αʔόʔαΠυϨϯμϦϯά

Slide 4

Slide 4 text

(ࣗ෼ͷ)isormorphicͷ໨త ➀ Ͳ͜Ͱ΋ಈ͘୯ػೳͳϞδϡʔϧΛఏڙ͍ͨ͠ ➁ node.jsͷϞδϡʔϧγεςϜΛ׆༻ͯ͠։ൃ͍ͨ͠ ➂ MVCڲਖ਼Ϊϓε

Slide 5

Slide 5 text

1. Ͳ͜Ͱ΋ಈ͍ͯ΄͍͠ ☞ ϒϥ΢β؀ڥ ☞ DOM͔Βಠཱͨ͠Worker؀ڥ ☞ node؀ڥ ☞ ϔουϨεςεςΟϯά

Slide 6

Slide 6 text

2. node.jsͷϞδϡʔϧγεςϜΛ׆༻ͯ͠։ ൃ͍ͨ͠ ☞ ʮnodeϞδϡʔϧ΋nodeඇґଘͳΒಈ͘͸ͣʯͱ͍͏ߟ͑ํ ☞ ϥΠϒϥϦఏڙ࣌͸؀ڥґଘ͔Ͳ͏͔Λৗʹҙࣝ͢Δ

Slide 7

Slide 7 text

3. MVCڲਖ਼Ϊϓε ☞ pure javascript + ؀ڥͷࠩΛٵऩͰ͖Δ+α ʹ੍ݶ͞ΕΔ ☞ MVCͰ͍͏Ϗϡʔ૚͕ࣗવͱ৮Γਏ͘ͳΔ ☞ => υϝΠϯ૚ʹ஫ྗ

Slide 8

Slide 8 text

ҰੲલͷJSͱ͍͑͹… jQueryͱDOMͱJavaScriptͷ۠ผ͕͞Ε͍ͯͳ͍αϯϓϧίʔυ͕ ͨ͘͞Μ͋ͬͯਏ͔ͬͨ

Slide 9

Slide 9 text

ͨͱ͑͹… markdownίϯύΠϥͷmarked͸Ͳͷ؀ڥͰ΋ಈ͘ ☞ nodeͰίϯύΠϧͰ͖Δ ☞ ϒϥ΢βίϯύΠϧͰ͖Δ ☞ webworkerͰ1/4ͣͭઍ੾ͬͯฒྻϏϧυͰ͖Δ ☞ ϒϥ΢βΛ্ཱͪ͛ͣʹnodeͰ୯ମςετͰ͖Δ

Slide 10

Slide 10 text

ͦͷଞɺڧ͍ಈػ ͱʹ͔͘ෆ҆ఆͰॏ͍Phantom.jsͰςετͨ͘͠ͳ͍

Slide 11

Slide 11 text

֤؀ڥͷࠩ

Slide 12

Slide 12 text

άϩʔόϧۭؒ window: DOM͕ଘࡏ͢Δ؀ڥ global: node؀ڥ self: WebWorker / ServiceWorker؀ڥ

Slide 13

Slide 13 text

؀ڥґଘAPI ☞ document / navigator ☞ setImmediate / requestAnimationFrame ☞ ϙϦϑΟϧ͕ͳ͍ωΠςΟϒϞδϡʔϧ΁ͷrequire(http΍vm) ☞ etc...

Slide 14

Slide 14 text

࣮ࡍʹ͸… ☞ ECMAScriptͷൣғ಺͚ͩͰ࣮૷͢Δͷ͕(ཧ૝తʹ͸)ਖ਼͍͠ ☞ ͱ͸͍͑nodeͱϒϥ΢βΛαϙʔτͯͨ͠Βे෼ ☞ worker؀ڥ͸๨ΕΒΕ͕ͪ

Slide 15

Slide 15 text

ωΠςΟϒϞδϡʔϧ ☞ preinstallͰgypͰωΠςΟϒϏϧυ͢Δ΋ͷ͸ݺ΂ͳ͍ ☞ ωΠςΟϒͰબ΂ͳ͍ ☞ sundown ΑΓ marked

Slide 16

Slide 16 text

Ͳ͏ͯ͠΋ωΠςΟϒϞδϡʔϧΛݺͼͨ ͍ ☞ emscriptenͰϏϧυ͢Δ ☞ zlib.jsͱ͔ ☞ llvm.jsͱ͔ ☞ Ϗϧυ͕ߴίετ/όΠφϦαΠζ͕ڊେԽ͢ΔͷͰਪ঑͠ͳ͍

Slide 17

Slide 17 text

commonjs require

Slide 18

Slide 18 text

commonjs/require ͱ͸ ☞ node.jsͷϞδϡʔϧղܾγεςϜ ☞ requireؔ਺ͱͦͷϑΝΠϧΛؚΉpackage.jsonͷmain͔Βղܾ ͞ΕΔ

Slide 19

Slide 19 text

࠷খͷϞδϡʔϧ - package.json - foo.js module.exports = function(){console.log('foo')}; {"name":"foo", "main": "foo.js"}

Slide 20

Slide 20 text

commonjsͷϒϥ΢β޲͚ϓϦϓϩηοα ☞ substack/node-browserify ☞ webpack ☞ require1k — CommonJS require for the browser in 1k ☞ Duo ͦΕͧΕඍົʹڍಈ͕ҟͳΔׂ͕Ѫ

Slide 21

Slide 21 text

جຊతͳ࢓૊Έ ☞ requireؔ਺ͷϙϦϑΟϧΛૠೖ͢Δ ☞ AST͔Βrequire('./hoge')Λ૬ରύε./hoge΁ͷࢀরஔ͖׵͑Δ ☞ ./hoge ΁ͷࢀর͸ಉ͡Ϟδϡʔϧ಺Ͱڞ༗͞ΕΔ

Slide 22

Slide 22 text

browserify/webpackͷ੍ݶ ☞ requireઌ͕จࣈྻҎ֎ͩͱࢀরͷ௥੻Λߦ͑ͳ͍ ☞ requireؔ਺ͷࢀরΛίʔϧͨ͠ͱ͖΋௥੻͠ͳ͍

Slide 23

Slide 23 text

μϝͳྫ var x = './foo'; require(x);

Slide 24

Slide 24 text

μϝͳྫ req = require; req('./foo');

Slide 25

Slide 25 text

μϝͳྫ global.require('foo'); ※͜Ε͸͋ͱͰ࢖͏

Slide 26

Slide 26 text

࣮ફ

Slide 27

Slide 27 text

altjs΍jsxͷมܗ ͍ΖΜͳํ๏͕͋Δ ☞ browserify transform ☞ webpack plugin ☞ gulp/gruntͰϓϦϓϩηε ☞ require.extensionsͰϑοΫ(node/electronͰͷΈ༗ޮ)

Slide 28

Slide 28 text

mizchiͷͨͲΓண͍ͨϕετϓϥΫςΟε ☞ gulpͰsrcҎԼΛlibʹు͖ग़͢ ☞ libΛ .gitignore Ͱࢦఆͯ͠git͔Βແࢹ ☞ watchifyͰlibҎԼΛ؂ࢹͯࠩ͠෼build

Slide 29

Slide 29 text

☞ ςετ͸mochaͱcoﬀeeͰࡶʹॻ͘(޷ΈͰબͿ) ☞ power-assertͰมܗ ☞ ςετ࣌͸libଆΛݺͿ mocha --require espower-coffee/guess test/*.coffee

Slide 30

Slide 30 text

src/ foo.coffee bar.ts template.jade lib/ <-- .gitignore foo.js bar.js template.js test/ foo-test.coffee

Slide 31

Slide 31 text

͜ͷํࣜͷཧ༝ ☞ browseirfyͰҰׅͰղܾ͢Δͱɺ୯ମςετ࣌ʹҰՕॴॻ͖׵ ͚͑ͨͩͰશ෦ͷϞδϡʔϧΛϏϧυ͢Δඞཁ͕͋Δ ☞ ୯ମςετͰ͖Δ͜ͱͰϞδϡʔϧͷಠཱੑΛอূͰ͖Δ

Slide 32

Slide 32 text

watchify ☞ browserify ͸ΤϯτϦϙΠϯτ͔Βશͯθϩ͔ΒϏϧυ͠Α͏ ͱ͢Δ ☞ watchify͸ࠩ෼؂ࢹͯ͠ు͖ग़͢ ࣗ෼ͷϓϩδΣΫτͰ͸ 8.3s → 0.02s React͍Δ͚ͩͰݦஶʹมΘΔ

Slide 33

Slide 33 text

ES6 moduleͲ͏͢Δʁ ☞ import / export ☞ কདྷతʹͬͪ͜?(node͕node_modulesΛͲ͏ѻ͏͔ܾ·ͬͯͳ ͍) ☞ babel͸requireܗࣜʹม׵͢Δ ☞ typescriptͷ --target commonjs ͸export default ະରԠ

Slide 34

Slide 34 text

Electron (چ atom-shell)

Slide 35

Slide 35 text

Electron ☞ Atomͷϕʔε ☞ window ͱ global ͕ڞଘ͢Δ؀ڥ ☞ τοϓϨϕϧthis ͸ window

Slide 36

Slide 36 text

Electron؀ڥͷಛघͳϥΠϒϥϦ require('app'), require('browser-window') ౳ ଞɺmenu, clipboard, crash-reporter,

Slide 37

Slide 37 text

Electron؀ڥͰͷbrowserify ☞ node_modulesԼͷෆཁͳϑΝΠϧΛ࡟আͯ͠αΠζॖখ ☞ ؆қͳ೉ಡԽ ࣗ෼ͷϓϩδΣΫτͰ͸(250MB → 2.2MB) ࢖Θͳͯ͘΋ಈ͘ͷ͕ڧΈͰ͸͋Δ

Slide 38

Slide 38 text

Ұ෦browserifyͰ͖ͳ͍ͷͰͲ͏ʹ͔͔ͯ͠Θ͢ var marked = require('marked'); // browserifyͰมܗ var app = global.require('app'); // ͦͷ··௨͢ ※ Oops

Slide 39

Slide 39 text

Node.js / Electron໨ઢͰͷϒϥ΢β؀ڥ

Slide 40

Slide 40 text

݁ہDOMͱ͸ͳΜͩͬͨͷ͔ ☞ ΋ͬͱ΋ීٴͨ͠؆қͳGUIπʔϧΩοτ ☞ nodeͰ࣮૷ͨ͠ϞδϡʔϧΛͬ͘͞ΓGUIΞϓϦʹࡌͤΒΕͯ αΠίʔ ☞ ͨͩ͠EmbededͳChrome͸ؚΉͷͰόΠφϦ͸େ͖͍(40MBఔ ౓)

Slide 41

Slide 41 text

ElectronͷՌͨ͢໾ׂ ☞ มԽͷૣ͍ϒϥ΢β؀ڥΛݻఆ͢ΔΞϓϩʔνͷҰͭ ☞ Chromeͷ࠷৽APIΛ੯͠Έͳ͘࢖͑Δݱ࣮తͳϓϥοτϑΥʔ Ϝ

Slide 42

Slide 42 text

ଞɺ؀ڥ͝ͱͷIsomorphic

Slide 43

Slide 43 text

View Isormorphic

Slide 44

Slide 44 text

Reactͷ৔߹ ☞ React.renderToString(...) ☞ React.renderToStaticMarkup(...) jsdom࢖͑͹ React.renderToString(...) ·Ͱ͍͚Δ ࢀߟ: JSDOMͱReact.addons.TestUtilsͰReactΛϔουϨεʹςετ ͢Δ - Qiita

Slide 45

Slide 45 text

Isomorphic for V8 ctx = V8::Context.new ctx.eval """ var global = {}; """ ctx.eval $react_source ctx.eval """ var React = global.React; """ V8 binding͋Ε͹ଞͷݴޠͰ΋͍͚Δ

Slide 46

Slide 46 text

Network Isomorphic

Slide 47

Slide 47 text

ServiceWorkerͰIsomorphic ☞ ωοτϫʔΫϓϩΩγ ☞ ΞϓϦέʔγϣϯΩϟογϡ ☞ ϓογϡ௨஌(͜Ε͸ࠓճͲ͏Ͱ΋͍͍)

Slide 48

Slide 48 text

Express࢖͍ͨ͘ͳ͍? ☞ ωοτϫʔΫϦΫΤετ͕ϞοΫͰ͖Ε͹In/Out੍ޚͰ͖Δͷ Ͱ͸ ☞ => ServiceWorker্Ͱexpress࣮૷ͨ͠Β͍͍Μ͡ΌͶʁ

Slide 49

Slide 49 text

Sabizan ☞ mizchi/sabizan ☞ ServiceWorker্Ͱexpress෩ͷAPI͕ॻ͚Δ ☞ ·ͩ·ͩPoC mizchi-sandbox/scala-js-in-service-worker

Slide 50

Slide 50 text

ࠓಈ͍ͨίʔυ # 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

Slide 51

Slide 51 text

·ͱΊ

Slide 52

Slide 52 text

(ࣗ෼ͷ)Isomorphicੈք؍ ☞ View(React) ☞ ωοτϫʔΫ(ServiceWorker) ☞ Ϟδϡʔϧ(Browserify) શ෦ϔουϨε

Slide 53

Slide 53 text

͓ΘΓ