Upgrade to Pro — share decks privately, control downloads, hide ads and more …

実践Isomorphic(+ Electron)

実践Isomorphic(+ Electron)

isormorphic meetupの資料です

3aebd86547bfc5cdb451d5f2f95ed5d8?s=128

Koutarou Chikuba

April 30, 2015
Tweet

Transcript

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

  2. ismorphicͱ͸ ؀ڥΛબ͹ͳ͍JavaScript

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

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

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

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

  7. 3. MVCڲਖ਼Ϊϓε ☞ pure javascript + ؀ڥͷࠩΛٵऩͰ͖Δ+α ʹ੍ݶ͞ΕΔ ☞ MVCͰ͍͏Ϗϡʔ૚͕ࣗવͱ৮Γਏ͘ͳΔ

    ☞ => υϝΠϯ૚ʹ஫ྗ
  8. ҰੲલͷJSͱ͍͑͹… jQueryͱDOMͱJavaScriptͷ۠ผ͕͞Ε͍ͯͳ͍αϯϓϧίʔυ͕ ͨ͘͞Μ͋ͬͯਏ͔ͬͨ

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

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

  11. ֤؀ڥͷࠩ

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

  13. ؀ڥґଘAPI ☞ document / navigator ☞ setImmediate / requestAnimationFrame ☞

    ϙϦϑΟϧ͕ͳ͍ωΠςΟϒϞδϡʔϧ΁ͷrequire(http΍vm) ☞ etc...
  14. ࣮ࡍʹ͸… ☞ ECMAScriptͷൣғ಺͚ͩͰ࣮૷͢Δͷ͕(ཧ૝తʹ͸)ਖ਼͍͠ ☞ ͱ͸͍͑nodeͱϒϥ΢βΛαϙʔτͯͨ͠Βे෼ ☞ worker؀ڥ͸๨ΕΒΕ͕ͪ

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

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

  17. commonjs require

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

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

    "foo.js"}
  20. commonjsͷϒϥ΢β޲͚ϓϦϓϩηοα ☞ substack/node-browserify ☞ webpack ☞ require1k — CommonJS require

    for the browser in 1k ☞ Duo ͦΕͧΕඍົʹڍಈ͕ҟͳΔׂ͕Ѫ
  21. جຊతͳ࢓૊Έ ☞ requireؔ਺ͷϙϦϑΟϧΛૠೖ͢Δ ☞ AST͔Βrequire('./hoge')Λ૬ରύε./hoge΁ͷࢀরஔ͖׵͑Δ ☞ ./hoge ΁ͷࢀর͸ಉ͡Ϟδϡʔϧ಺Ͱڞ༗͞ΕΔ

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

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

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

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

  26. ࣮ફ

  27. altjs΍jsxͷมܗ ͍ΖΜͳํ๏͕͋Δ ☞ browserify transform ☞ webpack plugin ☞ gulp/gruntͰϓϦϓϩηε

    ☞ require.extensionsͰϑοΫ(node/electronͰͷΈ༗ޮ)
  28. mizchiͷͨͲΓண͍ͨϕετϓϥΫςΟε ☞ gulpͰsrcҎԼΛlibʹు͖ग़͢ ☞ libΛ .gitignore Ͱࢦఆͯ͠git͔Βແࢹ ☞ watchifyͰlibҎԼΛ؂ࢹͯࠩ͠෼build

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

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

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

  32. watchify ☞ browserify ͸ΤϯτϦϙΠϯτ͔Βશͯθϩ͔ΒϏϧυ͠Α͏ ͱ͢Δ ☞ watchify͸ࠩ෼؂ࢹͯ͠ు͖ग़͢ ࣗ෼ͷϓϩδΣΫτͰ͸ 8.3s →

    0.02s React͍Δ͚ͩͰݦஶʹมΘΔ
  33. ES6 moduleͲ͏͢Δʁ ☞ import / export ☞ কདྷతʹͬͪ͜?(node͕node_modulesΛͲ͏ѻ͏͔ܾ·ͬͯͳ ͍) ☞

    babel͸requireܗࣜʹม׵͢Δ ☞ typescriptͷ --target commonjs ͸export default ະରԠ
  34. Electron (چ atom-shell)

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

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

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

  38. Ұ෦browserifyͰ͖ͳ͍ͷͰͲ͏ʹ͔͔ͯ͠Θ͢ var marked = require('marked'); // browserifyͰมܗ var app =

    global.require('app'); // ͦͷ··௨͢ ※ Oops
  39. Node.js / Electron໨ઢͰͷϒϥ΢β؀ڥ

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

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

  42. ଞɺ؀ڥ͝ͱͷIsomorphic

  43. View Isormorphic

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

    ͢Δ - Qiita
  45. Isomorphic for V8 ctx = V8::Context.new ctx.eval """ var global

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

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

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

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

  50. ࠓಈ͍ͨίʔυ # 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
  51. ·ͱΊ

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

  53. ͓ΘΓ