実践Isomorphic(+ Electron)

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