Flux層の責務について考える

by yukinm7

Slide 1

Slide 1 text

Flux૚ͷ੹຿ʹ͍ͭͯߟ͑Δ גࣜձࣾϠϓϦ َ໦༔و #Yappli_Tech

Slide 2

Slide 2 text

َ໦༔و ▸ 2017೥2݄ʹϠϓϦʹೖࣾ ▸ ೖࣾޙ͸ΠϯϑϥɺόοΫΤϯυɺϑϩϯτΤϯυΛ ܦݧ ▸ AWSɺAnsibleɺPHPɺLaravelɺRubyɺRuby on RailsɺJavaScriptɺTypeScriptɺReact.jsɺVue.jsɺ Golang ▸ ݱCMSͷҰ෦ΛReact.jsɺReduxͰ։ൃ ▸ ݱࡏ͸৽CMSͷαʔόʔαΠυʢGolangʣɺϑϩϯ τΤϯυʢVue.jsɺNuxt.jsʣͷ࣮૷ ▸ ৽CMSͷFlux૚Λઃܭ ࣗݾ঺հ #Yappli_Tech @yukinm71

Slide 3

Slide 3 text

Fluxͱ͸ View state Component Dispatcher Action State Server Flux Store #Yappli_Tech

Slide 4

Slide 4 text

StateͱStateΛมߋ͢ΔͨΊͷؔ਺ͷྲྀΕʢFluxແ͠ʣ View State ؔ਺ ίϯϙʔωϯτ #Yappli_Tech

Slide 5

Slide 5 text

StateͱStateΛมߋ͢ΔͨΊͷؔ਺ͷྲྀΕʢFlux༗Γʣ View Flux ίϯϙʔωϯτ State Action #Yappli_Tech

Slide 6

Slide 6 text

Fluxઃܭͷ೉͠͞ ▸ FluxଆͱComponentଆͷ੹೚ൣғͷܾఆ ▸ Flux૚ΛͲͷ୯ҐͰ෼ׂ͢Δͷ͕ਖ਼͍͔͠ͷ൑அ͕೉͍͠ ▸ தن໛Ҏ্ͷઃܭαϯϓϧ͕গͳ͍ɺ͜Ε͕ਖ਼͍͠ͱ͍͏ͷ͕ͳ͍ ࣗ༝౓͕ߴ͘ɺਖ਼ղ͕Θ͔Βͳ͍ͱ͍͏೉͠͞ #Yappli_Tech

Slide 7

Slide 7 text

ࣗ༝౓ͷߴ͞ͱ͍͏೉͠͞ʹཱͪ޲͔͏ͨΊʹ ϧʔϧΛܾΊ͍͕ͨϑϩϯτͷෳࡶੑʹΑΓ͸͡Ί͔ΒܾΊΕͳ͍෦෼ ΋ଟ͍ͷͰɺن໛ͷ֦େʹ଱͑ΒΕΔ֦ுੑɾ౷ҰੑΛ࣋ͬͨ ઃܭͱϧʔϧΛܾΊͯ૸Γग़͢ ▸ Store෼ׂͷϧʔϧΛܾΊΔ ▸ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ ϠϓϦͷϑϩϯτΤϯυઃܭͰ֦ுੑͱ౷ҰੑΛ୲อ͢ΔͨΊʹ΍ͬͯΑ͔ͬ ͨɺଞͷதʙେن໛ΞϓϦέʔγϣϯʹ΋൚༻ੑ͕͋Γͦ͏ͩͱײ্ͨ͡ه ͷ̎ͭʹ͍ͭͯ঺հ͍͖ͤͯͨͩ͞·͢ #Yappli_Tech

Slide 8

Slide 8 text

Store෼ׂͷϧʔϧΛܾΊΔ Fluxઃܭͷ೉͠͞ʹཱͪ޲͔͏ͨΊʹ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 9

Slide 9 text

Store෼ׂͷϧʔϧΛܾΊΔ தن໛Ҏ্ͷΞϓϦέʔγϣϯͩͱ։ൃ͕ਐΉʹͭΕStore͸ංେԽ͍ͯ͠ ͘ͷͰStoreͷ෼ׂΛߦ͏ඞཁ͕ग़ͯ͘Δ͕ɺͦΕΛͲͷ୯ҐͰߦ͏͔ Store video photo account permiss ion Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech State

Slide 10

Slide 10 text

ΞϓϦέʔγϣϯશମ + ը໘୯ҐͰ෼͚Δ தʙେن໛ΞϓϦέʔγϣϯ։ൃͷ৔߹ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 11

Slide 11 text

Storeͷmodule෼ׂ (photo) Store root Store (book) Store (Video) Store permiss ion isInitiali zed account contents contents contents Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 12

Slide 12 text

ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStore෼ׂ͢Δ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ ෼ׂ୯Ґ͕໌֬Ͱ໎͏͜ͱ͕ͳ͍ʢ֦ுੑɺ౷Ұੑʣ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 13

Slide 13 text

ΞϓϦέʔγϣϯશମ+ը໘୯ҐͰStore෼ׂ͢ΔϝϦοτ ▸ ը໘ʹඞཁͳ৘ใͷΈऔಘͰ͖Δ ▸ ֤module Store͸ͦͷϖʔδͷӬଓԽ͢΂͖σʔλʹؔ͢ΔϩδοΫʹ ूதͰ͖Δ Store෼ׂͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 14

Slide 14 text

FluxଆͱViewଆͷ ੹೚ൣғͷϧʔϧΛܾΊΔ Fluxઃܭͷ೉͠͞ʹཱͪ޲͔͏ͨΊʹ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 15

Slide 15 text

FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ View Flux Component Component Component Store State State ComponentͱStoreͷͲͪΒͷStateʹঢ়ଶΛ͔࣋ͭ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 16

Slide 16 text

ϑϩϯτͰ؅ཧ͢Δ༷ʑͳσʔλ ▸ αʔόʔଆ͔Βऔಘ͖ͯͨ͠ӬଓԽσʔλɹˠɹStoreଆͷState ▸ ը໘ͷঢ়ଶɹˠɹComponentଆͷState ▸ αʔόʔଆ͔Βऔಘͨ͠ӬଓԽσʔλ͕ݩͰɺϢʔβʔʹΑͬͯҰ࣌తʹ ฤू͞ΕΔσʔλɹˠɹʁʁʁ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 17

Slide 17 text

ϢʔβʔʹΑͬͯߋ৽͞ΕΔσʔλͷ؅ཧΛߟ͑Δ 1. ࠨଆͷϦετ͔Βฤू͢Δίϯς ϯπΛબ୒͢Δ 2. ίϯςϯπΛฤू͢Δ 3. ίϯςϯπΛอଘ͢Δɻอଘޙ͸ ࠨଆͷϦετʹ΋൓ө͞ΕΔ ͜ͷ෦෼ͷ ঢ়ଶ؅ཧʹ ͍ͭͯߟ͑Δ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 18

Slide 18 text

ӬଓԽσʔλʹؔ͢Δ΋ͷ͸શͯ StoreଆͷStateͰ؅ཧ͢Δ தʙେن໛ΞϓϦέʔγϣϯ։ൃͷ৔߹ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 19

Slide 19 text

StoreଆͷStateͰ؅ཧ͢Δ StoreʢVuexʣ contents editContent changeTitle save FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ

Slide 20

Slide 20 text

ӬଓԽσʔλʹؔ͢Δ΋ͷ͸શͯStoreଆʹஔ͘ ͜ͱʹΑΔ֦ுੑɺ౷Ұੑͷ୲อ ▸ σʔλ͕ͲͷStateʹରԠ͢Δ͔ͱ͍͏͜ͱʹ͍ͭͯ໎Θͳ͘ͳΔʢ౷Ұ ੑʣ ▸ ίϯϙʔωϯτ͕ଟॏͷ৔߹Ͱ΋ίϯϙʔωϯτؒͰStateΛड͚౉͢ඞ ཁ͕ͳ͍ͷͰதʙେن໛ΞϓϦέʔγϣϯ։ൃʹڧ͍ʢ֦ுੑʣ #Yappli_Tech FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ

Slide 21

Slide 21 text

ӬଓԽσʔλʹؔ͢Δ΋ͷ͸શͯStoreଆʹஔ͘৔߹ͷϝϦοτ ▸ αʔόʔଆʹอଘ͢Δσʔλʹؔ͢ΔϩδοΫ͕ҰՕॴʹ·ͱ·ΔͷͰ ςετ͠΍͍͢ ▸ Viewଆ͸ViewଆͷॲཧʹूதͰ͖Δ FluxଆͱViewଆͷ੹೚ൣғͷϧʔϧΛܾΊΔ #Yappli_Tech

Slide 22

Slide 22 text

(photo) Store root Store (book) Store contents contents photo state (video) Store (shop) Store contents contents shop state video state book state View account permiss ion Flux ֤ϖʔδͷӬଓԽσʔλʹ ؔ͢ΔState Componentͷݟͨ໨ʹ ؔ͢ΔState ը໘શମʹ ؔ͢ΔState ࠷ऴతͳߏ੒ͱ֦ுੑɾ౷Ұੑʹ͍ͭͯ

Slide 23

Slide 23 text

·ͱΊ ▸ ઃܭʹਖ਼ղ͸ͳ͍͕ɺ͜ͷߏ੒Ͱ͋Δఔ౓ͷΞϓϦέʔγϣϯશମͷ֦ ுੑɺ౷ҰੑΛ୲อͰ͖Δ ▸ ͋Δఔ౓ͷઃܭج൫͕Ͱ͖ͯ։ൃελʔτͨ͠ޙ΋Flux͸ࣗ༝౓͕ߴ͍ ͨΊFluxͷػೳΛษڧͨ͠Γɺ࢖͍ʹ͍͘෦෼͸ϝϯόʔͱର࿩͠ͳ͕ ΒϧʔϧΛܾΊ͍ͯ͘͜ͱ͕େࣄ ▸ ϧʔϧͷఆணԽʹ౒ΊΔ͜ͱ΋ॏཁʢϧʔϧͷυΩϡϝϯτԽɺϨϏϡʔ ͷ࢓૊Έʣ #Yappli_Tech

Slide 24

Slide 24 text

GitHubͷWikiʹυΩϡϝϯτԽ #Yappli_Tech

Slide 25

Slide 25 text

ϓϧϦΫ͸ϝϯόʔʹΑΔApproveඞਢɺ QAલʹϨϏϡΞʔʹΑΔػೳ࠷ऴνΣοΫ #Yappli_Tech

Slide 26

Slide 26 text

ଞʹ΋͜Μͳࣄ΍ͬͯ·͢ ▸ Flux૚શମΛλΠϓηʔϑ ▸ GRPC௨৴ʹΑΔ௨৴෦෼΋ؚΊͯλΠϓηʔϑ ▸ ActionsɺMutationsͷ໋໊نଇܾΊ ▸ ଟݴޠԽରԠ ▸ watcherʹΑΔStore Stateͷ؂ࢹ #Yappli_Tech