Real World Virtual DOM

Transcript

1. 1.

   Real World Virtual DOM React, Flux, Isormorphic… ͦͯ͠ݱ࣮ ɹ @mizchi

   / Increments Inc
2. 2.

   ࣗݾ঺հ ☞ id:mizchi | ஛അޫଠ࿠ ☞ Qiitaͷํ͔Βདྷ·ͨ͠ ☞ ۀ຿ΤϯδχΞྺ3೥ ☞

   ੵΈήʔ͕ऴΘΒΜ
3. 3.

   ࠓ·Ͱ࢓ࣄ͖ͯͨ͠؀ڥ ৽ଔͰ࠷ॳʹॻ͍ͨݴޠ͸ Haskell ͱ Clojure ͱ͋ΔήʔϜͷUnity͔ΒHTML5΁ͷҠ২Λͯ͠Ҏ དྷɺSPAͷઃܭΛߟ͑ଓ͚͍ͯΔ

4. 4.

   Virtual DOM ʹ͍ͭͯͷ׆ಈ ☞ VirtualDOM Advent Calendar 2014 - Qiita

   ͷओ࠵ ☞ ͋ͳ͕ͨReactΛ࢖͏΂͖ཧ༝ ☞ ͳͥԾ૝DOMͱ͍͏֓೦͕ԶୡͷࠢΛ਒͑ͤ͞Δ ͷ͔ - Qiita ☞ #13 Virtual DOM | mozaic.fm ͷήετ
5. 5.

   Έͳ͞Μ

6. 6.

   ࠢ਒͑ͯ·͢ʁ

7. 7.

   ๻͕Reactʹ͍ͭͯ ৘ใൃ৴͍ͯͨ͠ཧ༝

8. 8.

   ཧ༝ ☞ ʮԶ͕ϓϩμΫγϣϯͰ࢖͍͍͔ͨΒʯʹܾ·ͬ ͯΜ͡ΌΜʂ ☞ Έͳ͞Μ͝ڠྗ͋Γ͕ͱ͏͍͟͝·ͨ͠ʂʂʂʂ

9. 9.

   ݁Ռ yaottiʮXXX Λ AtomShellͰWindows ޲͚ʹ࡞Εͳ ͍ʁʯ mizchiʮ͋͊ʈʙ͍͍ͬ͢Ͷʙʯ ɹ mizchiʮϓϩτͰ React

   ࢖͚ͬͨͲ͜Μ··͍͖·͠ ΐ͏ʯ => Go
10. 10.

    ʮ࢖ͬͯΈͨʯ ☞ ਓபʹͳͬͨ ☞ ͱ͍͏Θ͚ͰReactΛݱ৔Ͱ࢖ͬͯΈͨ࿩Λ͠·͢ (ΈΜͳVirtual DOM ͸༧शࡁΈͩΑͶʁ)

11. 11.

    ࠓ೔ͷςʔϚ Real World Virtual DOM ☞ ୈҰষ: Kobito on AtomShell

    ☞ ୈೋষ: Arda - MetaFlux Framework ☞ ୈࡾষ: Isormorphicͷ࣮ફ ☞ ࠷ޙʹ: Virtual DOM ΛͱΓ·͘ݱ࣮
12. 12.

    ୈҰষ Kobito on Atom Shell

13. 13.

    Kobitoͱ͸ ☞ Increments͕։ൃ ☞ MarkdownͰϝϞΛॻ͚ΔMacΞϓϦ ☞ Qiita(·ͨ͸Qiita:Team)΁ͷಉظػೳ͕͋Δ ☞ Objective-C

14. 14.

    Mac൛

15. 15.

    Kobito "on AtomShell" ☞ Kobito Λ AtomShell Ͱ࣮૷ͯ͠Windows൛ͩͦ ͏͍ͥͬͯ͏ϓϩδΣΫτ ☞

    ࠓ೔͕ॳެ։
16. 16.

    Kobito "on AtomShell" ☞ ։ൃಈػ: WindowsͷKobito͕ͳ͍ ☞ σεΫτοϓΞϓϦ ☞ طଘͷKobitoͷΫϩʔϯͰ͸ͳ͘ɺ͍͔ͭ͘ͷ՝

    ୊Λղܾͭͭ͠։ൃ ☞ View ͸ React Component + ࣗ࡞Flux Framework
17. 17.

    (ը໘͸։ൃதͷ΋ͷͰ͢)

18. 18.

    (ը໘͸։ൃதͷ΋ͷͰ͢)

19. 19.

    σϞ

20. 20.

    ௥Ճཁૉ ☞ Qiita / Qiita:Team ͱͷಉظػೳΛڧԽ ☞ ϩʔΧϧʹดͨ͡Inboxͷ௥Ճ ☞ ୯७ͳϝϞπʔϧͱͯ͠ͷ࢖͍উखΛڧԽ

    ☞ Vim ΩʔόΠϯυϞʔυͷ௥Ճ(։ൃऀͷझຯ)
21. 21.

    Kobito for Windows ☞ ϦϦʔε༧ఆ: 2015೥ 4݄~5݄ ☞ => Kobito

    for Windows Newsletter
22. 22.

    ։ൃաఔ ☞ اը / ϓϩτ 10݄ޙ൒ ~ ☞ ઃܭ -

    11݄ ~ ☞ ࣮૷ - 12݄~ ☞ όάચ͍ग़͠ͱϦϑΝΫλ(͍·͜͜) ΤϯδχΞ1ਓ(mizchi) 1݄͔ΒϚʔΫΞοϓ1ਓ
23. 23.

    ϥΠϒϥϦͷ࢖༻ײ

24. 24.

    ݁ہReactͱ͸ͳΜͩͬͨͷ͔

25. 25.

    Just the UI ☞ ୯ͳΔʮσʔλόΠϯυ෇͖ςϯϓϨʔτΤϯδ ϯʯͰɺඳըޙ࠶ར༻Մೳͳίϯϙʔωϯτ ☞ ඞཁे෼ʹ଎͍(͕͢͞ʹ৬ਓܳతͳDOMνϡʔχ ϯάʹ͸ྼΔ) ☞

    ࠓ·Ͱۤ࿑͍ͯͨ͠ঢ়ଶભҠ͕ࢮ͵΄Ͳ୯७Խ͞ ΕΔ
26. 26.

    Ծ૝DOMͱͯ͠ͷReactબఆཧ༝ ☞ ৘ใ͕े෼ʹ͋Δ(ͨͩ͠ւ֎த৺) ☞ ϔουϨε؀ڥ(node)Ͱͷςετέʔεͷॻ͖΍ ͢͞ॏࢹ ɹ ଞͷ؀ڥͳΒ΋ͬͱখ͍͞ϥΠϒϥϦΛ࢖͍ͬͯ ͔ͨ΋ɻQiita ʹ΋·ͩೖΕͯͳ͍ɻ

27. 27.

    ʮຊ࣭తͳ෦෼ʯʹूதͰ͖Δ ☞ ઃܭ͕୯७Խ͞Εͨ݁ՌɺΞϓϦέʔγϣϯυϝ Πϯ૚͕໌֬ʹҙࣝͰ͖ΔΑ͏ʹ ☞ Pure JavaScript, ͍ΘΏΔʮIsomorphicԽʯՄೳͳ Օॴʹ஫ྗͰ͖Δ(͋ͱͰৄ͘͠࿩͢)

28. 28.

    Qiita΁ͷϑΟʔυόοΫ(༧ఆ) ☞ ։ൃͨ͠ίϯϙʔωϯτ܈Λॱ࣍ϑΟʔυόοΫ ͍͖͍ͯͨ͠ ☞ ͨͱ͑͹…

29. 29.

    Markdown ϋΠϥΠτ෇͖ͷΤσΟλ

30. 30.

    Atom ͷ Cmt+T తͳΠϯΫϦϝϯλϧαʔν

31. 31.

    AtomShellʹ͍ͭͯ

32. 32.

    AtomShell ☞ Atom Editorͷج൫ ☞ Multi Platform (Win/Mac/Debian) ☞ σεΫτοϓΞϓϦͷҝͷChromium

    ϥούʔ
33. 33.

    AtomShellͰ࡞ΔϝϦοτ ☞ nodeͷϞδϡʔϧΛݺ΂Δ ☞ ΫϩεΦϦδϯΛ௒͑ΕΔ ☞ σεΫτοϓΞϓϦͱͯ͠഑෍Ͱ͖Δ ☞ ϒϥ΢βετϨʔδͷ্ݶΛ೚ҙʹ૿΍ͤΔ ☞

    (BlinkҎ֎ͷಈ࡞֬ೝΛαϘΕΔ)
34. 34.

    AtomShellΛબͿ؀ڥཁҼ ☞ Webք۾ͩͱWindowsͷ஌ݟΛͨΊͯ΋׆༻͠ʹ ͘͘ɺWPFͷ஌ࣝΛ஝͑Δಈػ͕ͳ͍ ☞ node/HTMLͷϊ΢ϋ΢Λ׆͔ͤΔ ☞ HTML/JSͰQiitaͱίϯϙʔωϯτΛڞ༗Ͱ͖Δ

35. 35.

    σεΫτοϓΞϓϦέʔγϣϯ ʹͳΔͱͲ͏ͳΔ͔

36. 36.

    ௓Ͷ্͕Δظ଴஋ ☞ ΍Δ͜ͱ͸࣮࣭SPA ͕ͩ… ☞ ωΠςΟϒΞϓϦͱͯ͠ͷUXΛظ଴͞ΕΔ ☞ ͦͷͨΊͷ React

37. 37.

    ઃܭ࣌ʹ໰୊ʹͳͬͨ͜ ͱ

38. 38.

    ໰୊1. JSX

39. 39.

    JSXͱ͸ ☞ ReactͷԾ૝DOMʹ࠷దԽ͞ΕͨJavaScript ͷจ๏ ֦ு var div = <div/>; Έ͍ͨͳ΍ͭ

40. 40.

    JSXͷ໰୊఺. 1 ☞ JavaScriptͷ஌ࣝΛཁٻ͗͢͠Δ ☞ items.map(item => <Item data=item.data/>) ͕Ϧετཁૉ࡞ͬͯΔͷ

    Θ͔Δʁ ☞ ඇJSΤϯδχΞͱڠௐ͢Δʹ͸ݫ͍͠
41. 41.

    JSXͷ໰୊఺. 2 ☞ ଞͷAltJSͱ૬ੑ͕Α͘ͳ͍ ☞ ࠓճ͸CoffeeScriptͱTypeScriptΛ࢖͍ͬͯΔͷͰ ࠷ѱ

42. 42.

    JSXͷ໰୊఺. 3 ☞ ςϯϓϨʔτͱີ݁߹͗͢͠Δ ☞ ViewModel Λڧ͘ҙࣝͯ͠ςϯϓϨʔτͱϓϩύ ςΟΛ෼཭ΛࢼΈͨ

43. 43.

    ղܾࡦ: react-jade jadejs/react-jade ☞ jadeςϯϓϨʔτ͔ΒReactͷVirtual DOM ͕ు͚ Δ ☞ jadeͷ։ൃݩ͕ఏڙ͍ͯ͠ΔͷͰɺϝϯς͞ΕΔ

    ͩΖ͏ͱ͍͏ظ଴͕͋Δ
44. 44.

    react-jade ͷྫ .container h1(onClick=onClickTitle)= This is title ↓ React.createElement('div', {className:

    'container'}, [ React.createElement('h1', {onClick: onClickTitle}, 'This is title') ]) // ϔομলུ ͍ΘΏΔhamlܥςϯϓϨʔτ
45. 45.

    react-jade ͷ݁Ռ ☞ JSৄ͘͠ͳ͍ਓʮͳΜ͔Α͘Θ͔ΒΜϓϩύςΟ ͕͋Δ͕৮ΕΔʯఔ౓ʹམͪண͘ ☞ (Qiitaຊମ͸slim ͍ͬͯ͏എܠ͕͋Δ͔΋)

46. 46.

    ։ൃݴޠ ☞ UI૚: React Component / Dispatcher ☞ CoffeeScriptͰߴ଎ʹTry &

    Error Λճ͢ ☞ ςϯϓϨʔτ͸react-jade ☞ Store૚ / Domain૚ ☞ TypeScript ͷ common.jsϞʔυ ☞ CoffeeScript ʹ require ͞ΕΔ(ٯ͸ͳ͍)
47. 47.

    ໰୊2. ͲͷઃܭΛ࠾༻͢Δ?

48. 48.

    Flux ☞ ୯ํ޲σʔλϑϩʔ ☞ ঢ়ଶ؅ཧίετ͕௿͍VirtualDOMʹ޲͍ͨઃܭΛ ࣮ݱ͢Δࢥ૝. (࣮૷Ͱ͸ͳ͍) ☞ ৄ͘͠͸୭͔͕࿩ͯ͘͠Ε(Δ/ͨ)Ͱ͠ΐ͏ or

    ͙͙ Ε
49. 49.

    ཚཱ͢Δ Flux ࣮૷ ☞ Fluxxor ☞ Reflux ☞ Alt ☞

    Fluxible ☞ Facebook's flux ☞ Deloerean ☞ etc...
50. 50.

    Flux࣮૷ͷݱ࣮ ☞ ബ͍ ☞ Ͳͷ࣮૷΋Idiomatic ☞ ͲΕ͕ੜ͖࢒Δ͔Θ͔ΒΜ

51. 51.

    ͳΜ͔ͬ͘͠Γ͢Δͷ͕ͳ͍

52. 52.

    ʮ΋͏ࣗ࡞͢Δ͔͠ͳ͍ʂʯ

53. 53.

    ͱ͍͏Θ͚Ͱ…

54. 54.

    ୈೋষ: Arda - MetaFlux

55. 55.

    Arda ☞ mizchi/arda - Github ☞ ݩʑ͸ Kobito on Atom

    Shell ͷঢ়ଶ؅ཧͱը໘ભ ҠΛந৅Խͨ͠΋ͷ ☞ ͦͦ͜͜ςετॻ͍ͯɺ͍ͩͿυοάϑʔσΟϯ ά͍ͯ͠ΔͷͰ࣮༻ʹ଱͑͏Δ͸ͣ
56. 56.

    Ardaͷ༝དྷ ☞ JɾRɾRɾτʔϧΩϯͷʮࢦྠ෺ޠʯͷੈքͷ໊ લͰ͋Γ஍ٿͦͷ΋ͷͰ΋͋Δ ☞ VirtualDOMͷԾ૝ͳੈքͱݱ࣮͕༥߹͢Δ৔ॴ͙ Β͍ͷχϡΞϯε ☞ ͿͬͪΌ͚୹͚ΓΌͳΜͰ΋Α͔ͬͨ

57. 57.

    ։ൃͷಈػ ☞ طଘͷFlux࣮૷͸ʮը໘ભҠʯ͕දݱ͠ʹ͔ͬ͘ ͨ ☞ react-router͕࢖͍ʹ͔ͬͨ͘/໨త͕ҧͬͨ ☞ Store૚ΛTypeScriptϑϨϯυϦʔʹܕͰอޢͰ͖ ΔΑ͏ʹ෼཭͔ͨͬͨ͠

58. 58.

    ҙࣝͨ͠΋ͷ ☞ Store/View/DispatcherͷմΛʮContextʯͱ͍͏୯ ҐͰ؅ཧ ☞ ContextͷελοΫͰঢ়ଶΛදݱ ☞ React ͷState/Props ͷ֓೦͸ܧঝ

    ☞ ͢΂ͯͷঢ়ଶભҠΛPromiseԽ
59. 59.

    Ґஔ͚ͮ ☞ ୯ͳΔFluxͰ͸ͳ͘FluxΛ಺แͨ͠ΑΓ্Ґͷ Framework

60. 60.

    None
61. 61.

    ϞδϡʔϧΛ୯७ʹ ☞ View͸୯ͳΔReact.Component ☞ Dispatcher͸୯ͳΔEventEmitter ☞ Store͸EventΛड͚ͯঢ়ଶΛߋ৽

62. 62.

    Context ͷσʔλϑϩʔ ➀ Router ͔Βॳظೖྗ(Props)Λड͚ͯॳظԽ͞ΕΔ ➁ Props͔ΒॳظState(Context಺ঢ়ଶ)Λ࡞Δ ➂ Props ͱ

    State ͔ΒɺComponentʹ౉͢ϓϩύς Ο(ComponentProps)Λੜ੒ ➃ Component ʹ౉͢ ➄ ঢ়ଶ͕ߋ৽͞ΕͨΒ3ʹ໭Δ
63. 63.

    None
64. 64.

    Arda.Router ☞ pushContext ☞ popContext ☞ replaceContext ☞ APIͰ࡯ͯ͠ ☞

    Contextͷੜ੒ͱഁغΛ୲౰(SPA͸ͦ͜Β΁Μݫ͠ ͍)
65. 65.

    ΫϦοΫͰ਺͕૿͑Δαϯϓϧ class Clicker extends Arda.Component render: -> React.createElement 'button', {onClick:

    @onClick.bind(@)}, @props.cnt onClick: -> @dispatch 'clicker:++' class ClickerContext extends Arda.Context @component: Clicker initState: (props) -> cnt: 0 expandComponentProps: (props, state) -> cnt: state.cnt delegate: (subscribe) -> super subscribe 'clicker:++', => @update((s) => cnt: s.cnt+1) router = new Arda.Router(Arda.DefaultLayout, document.body) router.pushContext(ClickerContext, {})
66. 66.

    ΫϦοΫͰ਺͕૿͑Δαϯϓϧ class Clicker extends Arda.Component render: -> React.createElement 'button', {onClick:

    @onClick.bind(@)}, @props.cnt onClick: -> @dispatch 'clicker:++' #<= EventEmitter΁ൃՐ class ClickerContext extends Arda.Context @component: Clicker initState: (props) -> cnt: 0 expandComponentProps: (props, state) -> cnt: state.cnt delegate: (subscribe) -> super subscribe 'clicker:++', => #<= EventEmitterͷEventड৴ @update((s) => cnt: s.cnt+1) router = new Arda.Router(Arda.DefaultLayout, document.body) router.pushContext(ClickerContext, {}) Event ͸Ұํ௨ߦ
67. 67.

    ΫϦοΫͰ਺͕૿͑Δαϯϓϧ class Clicker extends Arda.Component render: -> React.createElement 'button', {onClick:

    @onClick.bind(@)}, @props.cnt onClick: -> @dispatch 'clicker:++' class ClickerContext extends Arda.Context @component: Clicker initState: (props) -> cnt: 0 #<= ॳظঢ়ଶ expandComponentProps: (props, state) -> cnt: state.cnt #<= ComponentͷProps delegate: (subscribe) -> super subscribe 'clicker:++', => @update((s) => cnt: s.cnt+1) #<= ঢ়ଶͷߋ৽ router = new Arda.Router(Arda.DefaultLayout, document.body) router.pushContext(ClickerContext, {}) Mutable ͳͷ͸ State ͚ͩ
68. 68.

    Context Λ TypeScript Ͱهड़͢Δ ͱԿ͕خ͍͠ʁ ☞ ܕʹΑͬͯ࢓༷͕໌֬ʹͳΔ ☞ Props ͸ը໘Λ࠶ߏங͢Δͷʹඞཁͳ৘ใ

    ☞ State ͸ͦͷը໘ͷதͰมԽ͢Δঢ়ଶ ☞ ComponentProps ͸ ࣮ࡍʹComponent ʹ౉͞Ε Δ΋ͷ
69. 69.

    ComponentProps ͕ଘࡏ͢Δҙਤ ☞ ؔ৺ͷ෼཭ ☞ Component͕஌Δ΂͖ঢ়ଶ͚ͩʹมܗ͍ͨ͠ ☞ ܕͰอޢ͠ʹ͍͘Component ʹ௚઀ Props

    ͱ State Λ౉͢ͷ͸خ͘͠ͳ͍
70. 70.

    ͨͱ͑͹ ☞ Stateͱͯ͠Կ͔ͷ id ͚ͩ࣋ͬͯ DB΍ωοτϫʔ ΫΛୟ͘ͱɺ݁Ռʹ࠶ݱੑ͕ͳ͘ State ͱͯ࣋͠ ͪͨ͘ͳ͍

    buildTimelineByGroupId(state.selectedGroupId).then((items) = { this.render(items); // ͜͜Λ࣋ͪͨ͘ͳ͍ });
71. 71.

    ࠶ݱՄೳͳϏϡʔ ☞ ComponentProps͕ಉ͡ͳΒඞͣಉ͡ϏϡʔΛঢ় ଶΛ࠶ݱͰ͖Δ(ͱ͢Δ) ☞ Component ͱ Props ͷ૊Έ߹Θͤͷ URL΁ͷγ

    ϦΞϥΠζ/σγϦΞϥΠζ Λ࣮૷͢Ε͹ Browser Hisotry ʹରԠՄೳ ☞ Agnosticʹ͍ͨ͠ͷͰArdaͰ͸ϒϥ΢βώετϦ ʔΛؔ஌͠ͳ͍
72. 72.

    ଞɺৄ͍͠API ☞ arda.d.ts ͷܕఆٛϑΝΠϧ͕APIυΩϡϝϯτΛ ݉ͶͯΔ ☞ Ardaࣗ਎͸coffeescriptͰهड़ ☞ ࠷ॳ͸typescriptͰॻ͍͕ͨɺϝλϓϩͩΒ͚Ͱܕ ͕ੜ͖ͣɺ୅ΘΓʹςετΛଟΊʹॻ͍ͨ

73. 73.

    Kobito on Atom Shell Ͱͷ Arda ☞ Context Λ TypeScript

    ͰܕͰอޢ͢Δɻ ☞ Component ͸ CoffeeScript Ͱࡶʹॻ͍ͯ Event Λ dispatch ͢Δ ☞ Eventͷߪಡଆ͸TypeScript Ͱॻ͍͍ͯΔ͕ɺड ͚औΔҾ਺ʹ͍ͭͯ͸͓໿ଋఔ౓
74. 74.

    Arda with TypeScript interface Props {firstName: string; lastName: string;} interface

    State {age: number;} interface ComponentProps {greeting: string;} class MyContext extends Arda.Context<Props, State, ComponentProps> { initState(props){ return new Promise<State>(done => { setTimeout(done({age:10}), 1000) }) } expandComponentProps(props, state) { return {greeting: 'Hello, '+props.firstName+', '+state.age+' years old'} } } # தུ router.pushContext(MyContext, {firstName: 'Jonh', lastName: 'Doe'})
75. 75.

    Arda ͷॻ͖৺஍ ☞ طଘͷFluxͷऑ͍఺ΛΧόʔͰ͖ͨͱࢥ͏ ☞ ࣗ෼ʹͱͬͯ͸࠷ߴͳΜͰྲྀߦΒ͍ͤͨ ☞ API΋֮͑Δ͜ͱ΋গͳ͍ͷͰ࢖ͬͯ͘Ε!

76. 76.

    ͍·͙͢ npm install arda --save

77. 77.

    ୈࡾষ: Isomorphicͷ࣮ફ

78. 78.

    Isomorphicͱ͸ ☞ ʮಉ͡ϥΠϒϥϦ͕nodeͰ΋ϒϥ΢βͰ΋ಈ͚͹ ͍͍ΑͶʯͱ͍͏ൃ૝ ☞ browserify/webpackʹΑ࣮ͬͯݱՄೳʹͳͬͨ

79. 79.

    ͳͥIsomorphicΛҙࣝͯ͠։ൃ͢ Δ͔ ➀ ͨͱ͑node(iojs)͸࢖Θͳͯ͘΋ɺ୯ମςετ͸ nodeͰ΍Δͷ͕؆୯Ͱߴ଎ ➁ ϑϩϯτΤϯυͷ֤छϓϦίϯύΠϥ΍λεΫϥ ϯφʔ΋node ➂ ىಈίετ͕ߴ͘ෆ҆ఆͳϔουϨεϒϥ΢β

    (phantomjs)ͷ࢖༻Λۃྗආ͚͍ͨ ɹ
80. 80.

    Qiita ͱ Atom Shell ಛ༗ͷࣄ৘ ☞ node ͷ global ͱ

    ϒϥ΢βͷ window ͕ڞଘ͢Δ ಛघͳ؀ڥ ☞ ੒Ռ෺͸͍ͣΕQiita΁࣋ͪࠐΈ͍ͨ ͱ͍͏Θ͚ͰKobito on Atom Shell Ͱ͸ Isomorphic Λڧ͘ҙࣝͯ͠ઃܭͨ͠
81. 81.

    Isomorphic ͷҝͷந৅Խ ☞ ετϨʔδ ☞ DOM

82. 82.

    ετϨʔδͷ IsomorphicԽ

83. 83.

    minimongo mWater/minimongo ☞ mongodb෩ͷAPIΛ࣋ͬͨӬଓετϨʔδ ☞ อଘઌΛ੾Γସ࣮͑ͯߦ؀ڥΛબ΂Δ(IndexedDB/ ΦϯϝϞϦ/MongoDb) ☞ ࠾༻ཧ༝: ݩʑ

    meteor ͷҰ෦ͰΑ͘ςετ͞Εͯ ͍Δ
84. 84.

    ଞͷީิ ☞ PouchDB, the JavaScript Database that Syncs! ☞ Lightweight

    javascript in-memory database: LokiJS
85. 85.

    Isomorphic తӡ༻ ☞ ςετ؀ڥԼͰ͸ΦϯϝϞϦϞʔυʹͯ͠ىಈ ͠ɺςετέʔε͝ͱʹੜ੒/ഁغ

86. 86.

    ଞɺࣗ࡞ϥΠϒϥϦ܈ ☞ mizchi/minimongo-schema εΩʔϚఆٛͷJSON ͔ΒDBॳظԽ ☞ mizchi/factory-dog ↑༻ͷεΩʔϚ͔ΒμϛʔΦϒ δΣΫτͷੜ੒(ࡶͳfactory-girl࣮૷) ☞

    mizchi/mz-repository ϦϙδτϦύλʔϯ࣮૷ ☞ mizchi/noo ES6ProxyΛ༻͍ͨ rspec ͷ null object ͬΆ͍΍ͭͷ࣮૷
87. 87.

    mochaͰͷ࣮ࡍͷίʔυͷҰ෦ schema.databases[0].type = 'memoryDb' global.stubDatabases = -> # helper beforeEach

    -> initDatabasesBySchema(schema).then ([db]) -> global.db = new Repository.Database(db) global.Item = db.getCollection('items') global.Team = db.getCollection('teams') afterEach -> delete global.db delete global.Item delete global.Team
88. 88.

    React ͷ IsomorphicԽ

89. 89.

    Headless React ☞ ϒϥ΢β؀ڥ͕ͳͯ͘΋ಈ͘(Server Side Rendering ͷҝ) ☞ jsdom Ͱ΋݁ߏಈ͘

90. 90.

    renderToString(...) var Component = React.createClass({ render: function(){return React.createElement('div', {}, 'this

    is title');} }); var html = React.renderToString(React.createFactory(Component)()); assert.ok(html.indexOf('this is title') > -1); componentWillMount ·Ͱݺ͹ΕΔͷ͕ϙΠϯτ (componentDidMount͸ݺ͹Εͳ͍)
91. 91.

    JSDOM jsdom = require('jsdom').jsdom; global.document = jsdom('<html><body></body></html>'); global.window = document.parentWindow;

    global.navigator = window.navigator; React = require('react/addons'); var el = React.createElement('div'); component = React.addons.TestUtils.renderIntoDocument(el) αʔόʔ(node)ͰΫϦοΫΠϕϯτൃՐ΋ςετͰ͖ Δɻ ࢀߟ: JSDOMͱReact.addons.TestUtilsͰReactΛϔου Ϩεʹςετ͢Δ - Qiita
92. 92.

    IsomorphicʹΑΔ ࣮ߦϞʔυ੾Γସ͑ͷ࣮ݱ

93. 93.

    Kobitoͷ Isomorphic ͷ࣮ફ ☞ src/(.ts, .jade, .coffee) Λ૬ରύεΛҡ࣋ͨ͠··ί ϯύΠϧ͠ lib/(**.js)΁

    ☞ browserifyͰ lib/index.js Λ શ෦ೖΓ (node_modulesҎԼͷґଘؚΉ)ͷ bundle.js ͱ͠ ͯϏϧυ (gulpͰ֦ுࢠ͝ͱʹ؂ࢹͯࠩ͠෼Ϗϧυ)
94. 94.

    src/ - main.coffee - foo.ts - template.jade lib/ - main.js

    - foo.js - template.js public/ - bundle.js # lib node_modules ͷґଘશ෦ೖΓ - index.html node_modules/ - ... test/ - main-test.coffee
95. 95.

    Isomorphic ͕Մೳʹͨ͜͠ͱ ☞ ༻్ʹԠ࣮ͨ͡ߦํࣜͷ੾Γସ͑ ☞ ϞδϡϥϦςΟͷ޲্

96. 96.

    ࣮ߦϞʔυ1: AtomShell:production ☞ ഑෍༻ʹϏϧυࡁΈͷbundle.jsΛ࢖ͬͯαΠζ࡟ ݮ(85MB → 1.8MB) ɹ ݩαΠζ͕େ͖͍ཧ༝͸ɺnode_modules/* ͷґଘ͕

    શ෦ೖ͍ͬͯΔ͍ͤɻ
97. 97.

    ࣮ߦϞʔυ2: AtomShell:development ☞ AtomShell಺ଂͷnodeΛ࢖ͬͯɺlib/index͔Β૬ ରύεͰղܾɻ ☞ ΍΍ֻ͕͔࣌ؒΔbrowserifyΛεΩοϓͰ͖Δ

98. 98.

    ࣮ߦϞʔυ3: ϒϥ΢β࣮ߦ ☞ ϒϥ΢βͰbundle.jsΛಡΈࠐΉindex.html ͔Βී ௨ʹىಈ͢Δ͚ͩ ☞ ΫϩεΦϦδϯ੍໿ʹͻ͔͔ͬΒͳ͍΋ͷɺωΠ ςΟϒΛݺͿػೳҎ֎͸࣮ߦՄೳ ☞

    Կ͔ʹ࢖͑ͳ͍͔ߟ͍͑ͯΔ…(ମݧ൛ͱ͔ʁ)
99. 99.

    ࣮ߦϞʔυ4: ୯ମςετ ☞ lib ҎԼͷϑΝΠϧΛ test/**/* ͔Β૬ରύεͰ require࣮ͯ͠ߦ ☞ ϔουϨεͳͷͰͱʹ͔͘଎͍҆͠ఆ͢Δ

100. 100.

     ࣮ߦϞʔυ5: End to End Test ☞ ϒϥ΢βϏϧυͱಉ͡Α͏ʹߏங ☞ AtomShell༻ͷSeleniumΞμϓλʔͷઃఆΛαϘ Δ͜ͱ͕Ͱ͖ͨ

101. 101.

     ͓·͚: browsrify vs webpack webpack͸͍ΖΜͳ͜ͱ͕ग़དྷա͗ͯɺnode ʹͳ͍ ڍಈ͕ՄೳͳͷͰ Isomorphic ੑΛकΔͨΊʹ͋͑ͯ browserifyΛ࢖͍ͬͯΔɻ

102. 102.

     ୈ࢛ষ Virtual DOM ΛͱΓ·͘ݱ࣮

103. 103.

     ࣮ࡍReactͲ͏ͳΜ ☞ ը໘ʹมԽΛى͜͢/ى͜͠ଓ͚Δͷ͕ѹ౗తʹָ ☞ ͱ͸͍͑पลϥΠϒϥϦ͕ރΕͯͳ͍ ☞ IssueͰόάใࠂ͠·ͬͨ͘Γࣗ෼Ͱforkͯ͠ύο ν͋ͯͨΓͯ͠Δ

104. 104.

     Reactͷݒ೦఺ ☞ αΠζ͕΍΍େ͖͍(.min.js Ͱ127k)(jQueryͱಉ͡ ͙Β͍) ☞ ΑΓখ͞ͳ࣮૷ virtual-dom/deku/mithril/ riot ΋ߟྀʹ͍ΕΔ΂͖͔΋ʁ

     ☞ ͱ͸͍͑Ұ൪ރΕͯΔ
105. 105.

     ʮͲ͏͍͏ઃܭ͕͍͍͔Θ͔ΒΜʯ ☞ Ardaͷେن໛޲͚ϓϩδΣΫτεέϧτϯஔ͍ͱ ͘ΜͰͲ͏ͧ ☞ mizchi-sandbox/arda-starter-project ☞ ࣮ࡍͷ Kobito on

     AtomShell ͱ΄΅ಉ༷
106. 106.

     React vs jQuery ☞ ࢥ૝ͷஈ֊ͰίϯϑϦΫτ͍ͯ͠ΔͷͰڠௐ͕೉ ͍͠ ☞ طଘࢿ࢈ͷҎ͔߱ΒͷɺҰ൪ͷϘτϧωοΫͰ͋ Δ͜ͱ͸൱Ίͳ͍ ☞

     ࢖͑ͳ͍Θ͚Ͱ͸ͳ͘ ϦʔυΦϯϦʔ ͩͱߟ͑Δ ͱࣗવ
107. 107.

     ͦ΋ͦ΋jQueryඞཁ? ☞ ͦͷ50ߦͷεύήςΟίʔυɺReactͩͬͨΒ10ߦ ͷComponentʹͳΒͳ͍ʁ ☞ ͦ͏͍͏ࢹ఺Λৗʹ࣋ͭ ☞ खΛಈ͔ͦ͏ʂ

108. 108.

     ʮͳʹ͕ͳΜͰ΋jQuery ϓϥάΠϯࣺͯΒΕͳ͍ Μ͡Όʙʯ ☞ <div key='hogefuga'></div> ͰϢχʔΫͳkey ଐੑΛ࣋ͭԾ૝DOMͳΒফ͑ͳ͍ ☞ ίϯςφͷதΛjQueryͷྖҬͱ͢Δ

109. 109.

     Kobito on AtomShell ͰjQuery Λ࢖ ͬͨՕॴ ☞ εΫϩʔϧྔͷಡΈग़͠ͱߋ৽ ☞ ٖࣅΫϦοΫΠϕϯτͷൃՐ

     ☞ aλάΛશͯΦʔόʔϥΠυͯ͠AtomShellͷ֎ʹ ग़ͯ͠·Θͳ͍Α͏ʹ
110. 110.

     ݱ୅తͳJavaScriptΤϯδ χΞʹٻΊΒΕΔ΋ͷ

111. 111.

     Isomorphicͷൃ૝ͱnodeͷεΩϧ ☞ ΑΓαʔόʔαΠυݴޠͷൃ૝ʹۙ͘ͳΔ ☞ σβΠφʔʹͱͬͯͷֶशίετ͸্͕ΓɺΤ ϯδχΞʹͱͬͯ͸Լ͕Δ ☞ ద੾ͳ෼ۀମ੍͕ඞཁ ☞ ΍Δ΂͖͜ͱ͸αʔόʔαΠυnodeΤϯδχΞͱ

     શ͘ಉ͡(࣮ߦ؀ڥ͕ҟͳΔ)
112. 112.

     େن໛SPAͷઃܭ ☞ ը໘ͷߏஙʹඞཁͳൃ૝͸ɺωΠςΟϒͷΞϓϦ έʔγϣϯΤϯδχΞͱಉ͡ ☞ ࣗ෼͸ήʔϜ։ൃͱAndroidͷܦݧ͕ੜ͖ͨ ☞ ετϨʔδΛѻ͏ͱσʔλ؅ཧ͕γϏΞʹ ☞ υϝΠϯۦಈΛҙࣝ͢Δ

     ☞ RP/FRP
113. 113.

     ʮ࠷ۙͷJS͸֮͑Δ͜ͱ͕ଟ͗͢ ͯΘ͔ΒΜʯ ☞ ΋ͬͱ΋Α͘ฉ͘ ☞ ಉ͡ײ૝͕ͩͦ΋ͦ΋ཁٻ͕ෳࡶԽ͍ͯ͠Δͷ Ͱ… ☞ ͱ͸͍͑VirtualDOM ͸ઃܭͷ୯७Խํ޲ʹಇ͘

     ͷͰݱ࣮తʹ࠾༻Մೳ
114. 114.

     ࠓ೔ͷ·ͱΊ

115. 115.

     ☞ ݱ৔Ͱ࢖ͬͯΈ͚ͨͲେৎ෉ ☞ React͸ઃܭͷ୯७Խʹํ޲ʹಇ͘ ☞ ϑϩϯτΤϯυ͸IsomorphicԽ͞Ε, node(iojs)ͷ εΩϧʹΑͬͯޮ཰Խ͞ΕΔ ☞ Arda

     ʹΑͬͯը໘ભҠΛ؅ཧ͠ɺܕʹΑΔʮߗ ͞ʯΛௐઅͰ͖ΔΑ͏ʹͨ͠
116. 116.

     Kobito for Windows ΑΖ͓͘͠ئ ͍͠·͢ʂ ☞ 4݄தʹग़͍ͨ͠ ☞ => Kobito

     for Windows Newsletter
117. 117.

     Increments Ͱ͸ σβΠφ͕଍Γͳ ͍ ☞ σβΠφͷख͕଍Γͳͯ͘ਏ͍ ☞ Qiita/Kobito ͷσβΠϯ͍ͨ͠ਓ͖ͯ͘Εʂʂʂ Qiita΍Qiita:Teamͷ੒௕ΛՃ଎ͯ͘͠ΕΔσβΠφ

     ʔืूʂ - Increments(Qiita)ͷٻਓ - Wantedly
118. 118.

     ׬