Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Spring with React for Enterprise Application

daigo3
December 18, 2019

Spring with React for Enterprise Application

Enterprise な アプリケーションにおいてもデザイン性、使い勝手に対する要求は高まってきています。
その要求を Spring と React を使って実現する方法をお話します。
・EventStorming を用いたモデリング
・Backend と Frontend を並行して開発する by Spring and React
・Contract による変化に強い開発チーム

daigo3

December 18, 2019
Tweet

More Decks by daigo3

Other Decks in Programming

Transcript

  1. Spring with React
    FOR ENTERPRISE APPLICATION
    Tagbangers, Inc.
    Spring Fest 2019

    View Slide

  2. ࢁ㟒 େ
    λάόϯΨʔζೖࣾ5೥໨ɻ
    WebΞϓϦέʔγϣϯͷ։ൃɺϚωδϝϯτΛ୲౰ɻ
    JavaɺSpring͸΋ͪΖΜɺٕज़ͷ͜ͱͳΒͳΜͰ΋޷͖ɻ
    ͨͩͷΘ͞΋Μɻ
    ઃᒜ େޛ
    λάόϯΨʔζೖࣾ1೥໨ɻ
    WebΞϓϦέʔγϣϯͷϑϩϯτΤϯυ։ൃΛ୲౰ɻ

    View Slide

  3. View Slide

  4. اۀ͕༧ࢉΛׂ͍ͯങ͏γεςϜ
    ͦͷγεςϜΛ࢖ͬͯϏδωεΛ·Θ͢
    ੒௕͢Δۀ຿ͷத৺ͱͳΔΞϓϦέʔγϣϯ
    Enterprise

    View Slide

  5. Enterprise
    ݱঢ়ͷϏδωεͰՁ஋Λఏڙ͠ͳ͕Β
    কདྷ΋Ձ஋Λग़͠ଓ͚Διϑτ΢ΣΞ
    Ͱͳ͚Ε͹ͳΒͳ͍

    View Slide

  6. มԽͰ͖Δ UI
    มԽʹڧ͍γεςϜ
    Enterprise

    View Slide

  7. ۀ຿γεςϜʹͦ͜ɺ
    มԽΛٻΊΔ͜ͱ͕Ͱ͖Δ
    ϞμϯͳUIɾγεςϜ͕ඞཁͩͱߟ͍͑ͯ·͢

    View Slide

  8. Spring + React @tagbangers way
    Dev
    Conversation
    Frontend
    Backend
    Day 0 Day 1 Day 2
    CI
    CD
    Ops
    Ops
    Feedback
    Enhancement
    >
    Share knowledge
    Contract

    View Slide

  9. Day 0
    Conversation
    Conversation UI Dev
    Service Dev
    Contract Ops
    Day 0 Day 1 Day 2

    View Slide

  10. https://www.eventstorming.com/

    View Slide

  11. σʔλ͚ͩͰ࣮ࡍͷۀ຿͕ճ͍ͬͯΔΘ͚Ͱ͸ͳ͍
    ۀ຿ϓϩηε = σʔλͱɺͦΕΛԿΒ͔ͷํ๏ͰԿΒ͔ͷܗʹ͢Δ͜ͱ
    ϞσϧԽ͢Δ΂͖ۀ຿ϓϩηεͷ։࢝఺Λ୳Δɹ-> Domain Event
    ։ൃνʔϜɾϓϩμΫτνʔϜ͕ҰॹʹϓϩμΫτʹֶ͍ͭͯͿ

    View Slide

  12. 1. Կ͕ى͔ͬͨ͜?ʢ Domain Event ʣΛ୳Δ
    2. ͳͥىͬͨ͜ͷ͔?Λ୳Δ
    3. Domain Event Λى͜͢ʹ͸ͳʹ͔৚݅͸͋Δ͔?
    4. Domain Event ͕ӨڹΛ༩͑Δ΋ͷ͸Կ͔
    5. Bounded ContextΛ୳͢

    View Slide

  13. λάόϯΨʔζͰຖि༵ۚʹߦΘΕΔϥϯνϛʔςΟϯά
    ࣮ફ

    View Slide

  14. 1. ேձͰΈΜͳͰ͡ΌΜ͚Μɻ
    2. ̎൪໨ʹউͪൈ͍ͨਓ͕ళΛܾΊΔ͜ͱ͕Ͱ͖Δɻ
    3. উऀ͸޷͖ͳళΛબΜͰslack #meshibanͰप஌
    4. ݸʑʹ৯΂͍ͨ΋ͷΛใࠂͯ͠΋Β͏
    5. উऀ͸ใࠂΛ·ͱΊͯ஫จ͢Δ
    6. ಧ͍ͨΒձࣾʹ͓ۚΛ෷ͬͯ΋Β͏
    ۀ຿ϑϩʔ

    View Slide

  15. View Slide

  16. View Slide

  17. View Slide

  18. View Slide

  19. View Slide

  20. View Slide

  21. 1. Bounded Context = Deployment unit ͕Θ͔Δ
    2. ۀ຿ϓϩηε͕୭ or ԿʹΑͬͯ։࢝͢Δͷ͔ɺͲͷΑ͏ͳ
    ෭࡞༻ͱ݁ՌΛੜΉͷ͔͕Θ͔Δ
    3. Domain Event ͷ৚݅Ͱ͋Δ Invariant ͕ෳࡶʹͳΔ΄Ͳ
    αʔϏεͷ༏ҐੑͱͳΔ෦෼͕ݟ͑ͯ͘Δ
    4. νʔϜͰڞ௨ͷϓϩμΫτࢹ఺͕࣋ͯΔ

    View Slide

  22. Modeling
    ϞσϦϯά = ந৅Խ͢Δ࡞ۀ
    ίϯςΩετʹΑͬͯந৅౓͕ҟͳΔ
    ڞ༗͢Δʮ໊લʯʢϞσϧɾଐੑʣΛܾΊ͍ͯ͘

    View Slide

  23. View Slide

  24. UI Development
    Service Development
    Shared Mental Model
    ͜͜Ͱɺ࡞Ζ͏ͱ͍ͯ͠Δ΋ͷΛڞ༗͕Ͱ͖ͨͷͰ
    ͔͜͜ΒผΕͯ։ൃΛ࢝Ί·͢

    View Slide

  25. Day 1
    UI Dev
    Conversation UI Dev
    Service Dev
    Contract Ops
    Day 0 Day 1 Day 2

    View Slide

  26. Ұ؏ੑͷ͋ΔUI
    มߋʹڧ͍UI
    Problems
    UI Dev

    View Slide

  27. Ұ؏ੑΛอͭ
    ཁૉͷදݱ͕৔ॴʹΑͬͯҧ͏
    Ϛʔδϯ͕งғؾͰܾ·Δ
    ௥Ճ͚ͩ͞Ε͍ͯ͘ελΠϧ৘ใͨͪ

    View Slide

  28. https://css-tricks.com/oh-no-stylesheet-grows-grows-grows-append-stylesheet-problem/

    View Slide

  29. CSS-in-JS is the rescue!

    View Slide

  30. View Slide

  31. Automatic critical CSS
    No class name bugs
    Easier deletion of CSS
    Simple dynamic styling
    Painless maintenance
    Automatic vendor prefix

    View Slide

  32. View Slide

  33. global theme
    props
    Simple dynamic styling

    View Slide

  34. View Slide

  35. Ұ؏ੑͷ͋ΔUIɹ
    มߋʹڧ͍UI
    Problems
    UI Dev

    View Slide

  36. Component Development

    View Slide

  37. View Slide

  38. View Slide

  39. Component Χλϩά
    Component ͷ༷ʑͳঢ়ଶΛ֬ೝͰ͖Δ༷ʹͳΔ
    Component ୯ಠͰͷ։ൃʹϑΥʔΧε͢Δ
    σʔλͱৼΔ෣͍Λ༩͑ΒΕͨ௨Γʹ΍Δ͚ͩ
    1ͭͷ͜ͱΛ͏·͘΍ΔϠπʹ͢Δ

    View Slide

  40. Component ͷ෼ׂ a.k.a Atomic Design

    View Slide

  41. Component ͷ෼ׂ a.k.a Atomic Design
    Foundations Elements Blocks Layouts Screens

    View Slide

  42. styled-components ͷ theme
    ৭΍ִؒɺϑΥϯταΠζͳͲͷҰ؏ੑΛอͭͨΊͷཁૉ
    Foundations

    View Slide

  43. UIΛߏ੒͢Δجૅཁૉ
    ͜ΕҎ্ࡉ෼Խͯ͠΋ҙຯ͕ͳ͍΋ͷ͸
    Element component ͱͯ͠࡞Δ
    Elements

    View Slide

  44. BUTTON
    ICON

    View Slide

  45. Elements, Blocks͔Β੒Δෳ߹తͳཁૉ
    Blocks

    View Slide

  46. Jane Doe
    LOGIN
    Wellcome!
    Your name
    Password

    View Slide

  47. Layouts
    ϨΠΞ΢τͷύλʔϯ

    View Slide

  48. View Slide

  49. ϖʔδ
    Screens

    View Slide

  50. Jane Doe
    Awesome app
    John Smith

    View Slide

  51. Ұ؏ੑͷ͋ΔUIɹ
    มߋʹڧ͍UIɹ ɹ
    Problems
    UI Dev

    View Slide

  52. EventStorming Ͱൃݟͨ͠
    Domain Event , workflowΛ࣮૷͢Δ
    Views States
    View
    Usecase
    ։࢝ ͡ΌΜ͚Μத
    ࣗ෼ͷखΛબ୒
    ࣗ෼ͷखΛܾΊΔ
    ࣗ෼ͷखΛAPIʹ
    ొ࿥ͯ͠΋Β͏
    States
    ͡ΌΜ͚Μऴྃ

    View Slide

  53. Your name Preparing for reception
    ROCK PAPER
    SCISSORS
    START

    View Slide

  54. Your name Preparing for reception
    ROCK PAPER
    SCISSORS
    START

    View Slide

  55. Your name Preparing for reception
    ROCK PAPER
    SCISSORS
    START
    Views
    ։࢝
    Store

    View Slide

  56. Your name Preparing for reception
    ROCK PAPER
    SCISSORS
    ͡ΌΜ͚Μத
    START
    Views
    ։࢝
    Store

    View Slide

  57. Your name Accepting
    ROCK PAPER
    SCISSORS
    ͡ΌΜ͚Μத
    START
    Views
    ։࢝
    Store

    View Slide

  58. Your name Accepting
    ROCK PAPER
    SCISSORS
    ͡ΌΜ͚Μத
    START
    Views
    ։࢝
    Store

    View Slide

  59. Your name
    ROCK PAPER
    SCISSORS
    START
    Views
    ։࢝
    Store
    API
    ։࠵ঢ়گΛมߋ
    Preparing for reception
    มߋத

    View Slide

  60. Your name Accepting
    ROCK PAPER
    SCISSORS
    ͡ΌΜ͚Μத
    START
    Views
    Store
    API
    Response
    Success

    View Slide

  61. Your name Accepting
    ROCK PAPER
    SCISSORS
    START

    View Slide

  62. Your name Accepting
    ROCK PAPER
    SCISSORS
    View
    ࣗ෼ͷखΛબ୒
    START
    move: SCISSOR
    Store

    View Slide

  63. Your name Accepting
    ROCK PAPER
    SCISSORS
    View
    ࣗ෼ͷखΛબ୒
    START
    move: SCISSOR
    Store

    View Slide

  64. Your name Accepting
    ROCK PAPER
    SCISSORS
    View
    ࣗ෼ͷखΛબ୒
    START
    move: SCISSOR
    Store

    View Slide

  65. Your name Accepting
    ROCK PAPER
    SCISSORS
    View
    ࣗ෼ͷखΛબ୒
    START
    Store
    API
    ࣗ෼ͷखΛొ࿥
    move: SCISSOR

    View Slide

  66. Your name Accepting
    ROCK PAPER
    SCISSORS
    View
    ࣗ෼ͷखΛબ୒
    START
    ొ࿥։࢝
    Store
    API
    ࣗ෼ͷखΛొ࿥
    ొ࿥த
    move: SCISSOR

    View Slide

  67. Your name Accepting
    ROCK PAPER
    SCISSORS
    View
    ࣗ෼ͷखΛબ୒
    START
    Store
    API
    ࣗ෼ͷखΛొ࿥
    API Response
    move: SCISSOR

    View Slide

  68. Your name Wait for Result
    ROCK PAPER
    SCISSORS
    View
    START
    Store
    API
    API Response
    ొ࿥੒ޭ
    ొ࿥ऴྃ

    View Slide

  69. trigger
    workflow
    event
    Action
    Repository
    interaction
    Component
    [presentational]
    Component
    [Container]
    Store
    Reducer
    Middleware
    Action
    Use case
    Execute
    Result
    State
    props
    Entity
    Result
    uses
    uses
    API

    View Slide

  70. Day 1
    Service Dev
    Conversation UI Dev
    Service Dev
    Contract Ops
    Day 0 Day 1 Day 2

    View Slide

  71. αʔϏε / Ϟδϡʔϧͷ෼ׂ
    Spring ͷ Ecosystem ͳʹΛ͔ͭ͏ʁ
    มԽ͢ΔͨΊͷ४උ
    Problems
    ServiceDev

    View Slide

  72. αʔϏε / Ϟδϡʔϧͷ෼ׂ୯ҐΛߟ͑Δ
    Conversation UI Dev
    Service Dev
    Contract Ops
    Day 0 Day 1 Day 2

    View Slide

  73. workflow
    Service Development

    View Slide

  74. workflow
    Service Development

    View Slide

  75. workflow
    Service Development
    REST
    REST
    Messaging

    View Slide

  76. Spring ͷͳʹΛ͔ͭ͏ͷ͔ʁ

    View Slide

  77. workflow
    Service Development
    Invariant ʢԫ৭ʣ͕ͳ͍
    ࢀর͸͞ΕΔ
    webhook ʹΑΔ POST
    → Spring Data RESTʂ

    View Slide

  78. workflow
    Service Development
    Invariant ʢԫ৭ʣ͕ଟ͍

    → ෳࡶͳཁ݅

    → ࡞ΓࠐΈ͕ඞཁ
    Messaging
    → Spring MVC

    → Spring Cloud Stream
    Messaging
    Invariant!

    View Slide

  79. มԽ͢ΔͨΊͷ४උ

    View Slide

  80. workflow
    Service Development
    Unit Test ͔Β࢝ΊΔ
    → TDD

    View Slide

  81. workflow
    Service Development

    View Slide

  82. workflow
    Service Development

    View Slide

  83. αʔϏε / Ϟδϡʔϧͷ෼ׂ 

    → Bounded Context Ͱ෼͚Δ
    Spring ͷ Ecosystem ͳʹΛ͔ͭ͏ʁ

    → ෇ᝦ΍໼ҹ͔Βಛ௃ΛΈ͚ͭΔ
    มԽ͢ΔͨΊͷ४උ

    → TDD ͷཁૉ͕͢Ͱʹ͋Δ
    ServiceDev

    View Slide

  84. Day 1
    Contract - Consumer Driven Contract
    Share
    Knowledge
    UI Dev
    Service Dev
    Contract Ops

    View Slide

  85. workflow
    Integration Test ͷ՝୊
    ࿈ܞ͢ΔαʔϏε͕ͨ͘͞Μ͋Δͱɾɾɾ
    ͢΂ͯͷ؀ڥΛ४උ͢Δͷ͸େม
    ४උͰ͖ͯ΋ςετ͕஗͍
    ଎͘ɺ؆୯ʹ͢ΔͨΊʹϞοΫʹ͍ͨ͠ɾɾɾ
    ϞοΫ͸৴༻Ͱ͖ͳ͍

    View Slide

  86. Consumer
    Broker
    Service
    Contract
    Unit Test
    Contract = Pact file

    View Slide

  87. Consumer
    Broker
    Service
    Contract
    Unit Test
    Contract

    View Slide

  88. Consumer
    Broker
    Service
    Contract
    Unit Test
    Contract
    Unit Test

    View Slide

  89. Consumer
    Broker
    Service
    Contract
    Unit Test
    Contract
    Unit Test
    Green

    View Slide

  90. Consumer
    Broker
    Service
    Contract
    Unit Test Unit Test
    Green
    ✅ Verified !
    Contract

    View Slide

  91. Consumer
    Broker
    Service
    Contract
    Unit Test
    Contract
    Unit Test
    Green
    ✅ Verified !
    API Stub
    Contract

    View Slide

  92. DEMO

    View Slide

  93. Consumer
    Broker
    Service
    Contract
    Unit Test
    Contract
    Unit Test
    Green
    ✅ Verified !
    API Stub
    Contract

    View Slide

  94. มԽʹڧ͍γεςϜ΁ͷΞϓϩʔν
    • νʔϜͰShared mental modelΛҭͯΔ
    • ڥքΛཧղͯ͠Ϟδϡʔϧ΍αʔϏεΛ෼͚ͯΔ͜ͱͰ
    طଘαʔϏεʹӨڹ༩͑ͣʹ։ൃ
    • Contract ͕͋Δ͜ͱͰɺطଘΞϓϦέʔγϣϯΛյͣ͞
    ʹ։ൃ

    View Slide

  95. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠

    View Slide