実践Isomorphic(+ Electron)

isormorphic meetupの資料です

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. ͓ΘΓ