実践Isomorphic(+ Electron)

isormorphic meetupの資料です

Transcript

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

    View Slide

11. ֤؀ڥͷࠩ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

17. commonjs require
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

26. ࣮ફ
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

34. Electron (چ atom-shell)
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

42. ଞɺ؀ڥ͝ͱͷIsomorphic
    

    View Slide

43. View Isormorphic
    

    View Slide

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

    View Slide

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

    View Slide

46. Network Isomorphic
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

51. ·ͱΊ
    

    View Slide

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

    View Slide

53. ͓ΘΓ
    

    View Slide