Full-Stack JavaScript meets DDD.

2020-01-10 に開催された、DDD meetup#3 でのLT資料です。
Vuex+Express環境でどんなアーキテクチャを採用したか、して良かったこと／悪かったことをまとめました。

Transcript

1. 'VMM4UBDL
   +BWB4DSJQU NFFUT
   %%% 2020-01-10 ੪౻ ༞ี @uskwitter JIBUNSTYLE Inc.
2. 8IP
   BN
   *
   iOS ߨࢣ IT ΞʔΩςΫτ αʔϏε σβΠφ iOS ΤϯδχΞ UX σβΠφ swiftຊ ࣥච 1 +*#6/45:-&
   *OD
   $&0 ೥
3. ࠓ೔࿩͢͜ͱ https://twitter.com/little_hand_s/status/1177366806853369856 2
4. େࣄͩΑͶɺڞ௨ೝࣝ ʮࢲͷதͷʯDDD ໨త γεςϜϞσϧΛϝϯλϧϞσϧͱ͚ۙͮΔ͜ͱ Ұޱʹ ݴ͏ͱ υϝΠϯ஌ࣝͱͦͷଞͷίʔυͷ෼཭ DDDͨ͠ ࡍͷ ΰʔϧ ᶃ υϝΠϯ஌͕ࣝϝϯλϧϞσϧʹ͍ۙܗͰ ϞσϦϯά͞Ε͍ͯΔ ᶄ υϝΠϯ஌ࣝͱͦͷଞͷίʔυ͕෼཭͞Εͨ ԿΒ͔ͷΞʔΩςΫνϟ͕࠾༻͞Ε͍ͯΔ 3
5. ΞʔΩςΫνϟΛಋ͖ग़ͨ͢Ίͷجຊࢦ਑ ΞϓϦέʔγϣϯ૚ υϝΠϯ૚ ͦͷଞ૚ ϝϯλϧϞσϧΛࢀߟʹ υϝΠϯϞσϦϯάͨ͠ ΦϒδΣΫτ܈ υϝΠϯϞσϧ܈Λ ࢖ͬͯϢʔεέʔεΛ ࣮ݱ͢ΔΦϒδΣΫτ܈ UI࣮૷΍API௨৴ɺ DB੍ޚ͋Δ͍͸OS ͔ΒͷΠϕϯτΛ ѻ͏ΦϒδΣΫτ܈ 4
6. ΞʔΩςΫνϟΛಋ͖ग़ͨ͢Ίͷجຊࢦ਑ ΞϓϦέʔγϣϯ૚ υϝΠϯ૚ ͦͷଞ૚ ϝϯλϧϞσϧΛࢀߟʹ υϝΠϯϞσϦϯάͨ͠ ΦϒδΣΫτ܈ υϝΠϯϞσϧ܈Λ ࢖ͬͯϢʔεέʔεΛ ࣮ݱ͢ΔΦϒδΣΫτ܈ UI࣮૷΍API௨৴ɺ DB੍ޚ͋Δ͍͸OS ͔ΒͷΠϕϯτΛ ѻ͏ΦϒδΣΫτ܈ 4 ஌͍͍ͬͯͯ ґଘੑٯస
7. 7VFY &YQSFTTΛ%%%Ͱɻ 5
8. 7VF+4ͱ͸ MVCͰ͍͏ViewͷඳըϑϨʔϜϫʔΫɻ HTMLςϯϓϨʔτʹσʔλΛ͸ΊࠐΈ DOMʹඳը͢Δɻ τϦάϰΣ ϦʔϯεΧ΢ΫʢTrygve Reenskaugʣ, 1979 6
9. 7VFYͱ͸ ૝ఆ͢Δํ๏ʢϢʔεέʔεʣ ͷΈ͕ঢ়ଶΛมߋͰ͖Δ͜ͱΛ อূ͢Δɺঢ়ଶ؅ཧύλʔϯΛ ࣮ݱ͢ΔϥΠϒϥϦɻ 7 Actions Mutations State Vue Components dispatch commit mutate render Backend API Vuex ͕͜͜ VueJS → Vuex͕૝ఆ͢Δϑϩϯτ ΤϯυΞʔΩςΫνϟ
10. Back-End Shared Infrastructure (DB) presenter .js interactor .js Front-End ࢲͷ࠾༻ͨ͠ ΞʔΩςΫνϟ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js 7
11. Shared Infrastructure (DB) presenter .js interactor .js Front-End ϑϩϯτʹண໨ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js Back-End 8
12. Back-End Shared Infrastructure (DB) presenter .js interactor .js όοΫ͚ͩݟΔͱ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js Front-End 9
13. Back-End Shared Infrastructure (DB) presenter .js interactor .js όοΫ͚ͩݟΔͱ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js Front-End 9
14. Back-End Shared Infrastructure (DB) presenter .js interactor .js Front-End શମͰݟΔͱʜ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js interactor Infrastructure 10
15. Back-End Shared Infrastructure (DB) presenter .js interactor .js Front-End શମͰݟΔͱʜ view.vue presenter .vue Infrastructure (API) DB domain models Infrastructure Interfaces Mutations State interactor .js interactor Infrastructure 'VMM4UBDL +4 υΧϯ ΞʔΩςΫνϟʂ 10
16. 1SPT
    
    $POT Pros oFront-EndͰυϝΠϯ஌͕ࣝඞཁʹͳͬͯ΋΁ͬͪΌΒ oFront-EndͱBack-End߹ܭͰͷΞʔΩςΫνϟϧʔϧΛ࡟ݮͰ͖ͨ oఆ਺ϑΝΠϧͷڞ௨Խ Cons oϓϩδΣΫτ಺ʹಉ໊͡લͷιʔεϑΝΠϧ͕૿͑ͯࠞཚͨ͠ oFront-EndͷES Modulesʢex. importʣͱɺBack-EndʢNodeJSʣͷ CommonJSʢex. requireʣʹۤ͠ΊΒΕͨ → esmImportΛར༻ͯ͠ղܾ 11
17. 1SPT
    
    $POT Pros oFront-EndͰυϝΠϯ஌͕ࣝඞཁʹͳͬͯ΋΁ͬͪΌΒ oFront-EndͱBack-End߹ܭͰͷΞʔΩςΫνϟϧʔϧΛ࡟ݮͰ͖ͨ oఆ਺ϑΝΠϧͷڞ௨Խ Cons oϓϩδΣΫτ಺ʹಉ໊͡લͷιʔεϑΝΠϧ͕૿͑ͯࠞཚͨ͠ oFront-EndͷES Modulesʢex. importʣͱɺBack-EndʢNodeJSʣͷ CommonJSʢex. requireʣʹۤ͠ΊΒΕͨ → esmImportΛར༻ͯ͠ղܾ 11 ͊͞ɺ͋ͳͨ΋ Full-Stack JavaScript Ͱ շదͳ DDD ϥΠϑΛ!