Real World Virtual DOM

Transcript

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

   / Increments Inc

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

   ੵΈήʔ͕ऴΘΒΜ

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

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

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

5. Έͳ͞Μ

6. ࠢ਒͑ͯ·͢ʁ

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

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

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

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

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

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

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

12. ୈҰষ Kobito on Atom Shell

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

14. Mac൛

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

    ࠓ೔͕ॳެ։

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

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

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

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

19. σϞ

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

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

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

    for Windows Newsletter

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

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

23. ϥΠϒϥϦͷ࢖༻ײ

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

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

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

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

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

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

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

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

31. AtomShellʹ͍ͭͯ

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

    ϥούʔ

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

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

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

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

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

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

38. ໰୊1. JSX

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

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

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

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

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

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

    ͩΖ͏ͱ͍͏ظ଴͕͋Δ

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

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

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

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

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

    ͙͙ Ε

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

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

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

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

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

53. ͱ͍͏Θ͚Ͱ…

54. ୈೋষ: Arda - MetaFlux

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

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

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

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

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

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

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

60. None

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

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

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

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

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

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. ΫϦοΫͰ਺͕૿͑Δαϯϓϧ 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. ΫϦοΫͰ਺͕૿͑Δαϯϓϧ 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. Context Λ TypeScript Ͱهड़͢Δ ͱԿ͕خ͍͠ʁ ☞ ܕʹΑͬͯ࢓༷͕໌֬ʹͳΔ ☞ Props ͸ը໘Λ࠶ߏங͢Δͷʹඞཁͳ৘ใ

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

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

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

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

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

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

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

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

73. Kobito on Atom Shell Ͱͷ Arda ☞ Context Λ TypeScript

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

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

76. ͍·͙͢ npm install arda --save

77. ୈࡾষ: Isomorphicͷ࣮ફ

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

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

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

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

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

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

82. ετϨʔδͷ IsomorphicԽ

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

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

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

    javascript in-memory database: LokiJS

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

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

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

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. React ͷ IsomorphicԽ

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

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. 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. IsomorphicʹΑΔ ࣮ߦϞʔυ੾Γସ͑ͷ࣮ݱ

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

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

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. Isomorphic ͕Մೳʹͨ͜͠ͱ ☞ ༻్ʹԠ࣮ͨ͡ߦํࣜͷ੾Γସ͑ ☞ ϞδϡϥϦςΟͷ޲্

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

    શ෦ೖ͍ͬͯΔ͍ͤɻ

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

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

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

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

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

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

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

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

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

     ☞ ͱ͸͍͑Ұ൪ރΕͯΔ

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

     AtomShell ͱ΄΅ಉ༷

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

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

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

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

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

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

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

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

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

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

     ☞ RP/FRP

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

     ͷͰݱ࣮తʹ࠾༻Մೳ

114. ࠓ೔ͷ·ͱΊ

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

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

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

     for Windows Newsletter

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

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

118. ׬