Spring with React for Enterprise Application

4949e02e40e5ff952754152c44e20df7?s=47 daigo3
December 18, 2019

Spring with React for Enterprise Application

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

4949e02e40e5ff952754152c44e20df7?s=128

daigo3

December 18, 2019
Tweet

Transcript

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

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

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

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

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

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

  8. Spring + React @tagbangers way Dev Conversation Frontend Backend Day

    0 Day 1 Day 2 CI CD Ops Ops Feedback Enhancement </> Share knowledge Contract
  9. Day 0 Conversation Conversation UI Dev Service Dev Contract Ops

    Day 0 Day 1 Day 2
  10. https://www.eventstorming.com/

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

  12. 1. Կ͕ى͔ͬͨ͜?ʢ Domain Event ʣΛ୳Δ 2. ͳͥىͬͨ͜ͷ͔?Λ୳Δ 3. Domain Event

    Λى͜͢ʹ͸ͳʹ͔৚݅͸͋Δ͔? 4. Domain Event ͕ӨڹΛ༩͑Δ΋ͷ͸Կ͔ 5. Bounded ContextΛ୳͢
  13. λάόϯΨʔζͰຖि༵ۚʹߦΘΕΔϥϯνϛʔςΟϯά ࣮ફ

  14. 1. ேձͰΈΜͳͰ͡ΌΜ͚Μɻ 2. ̎൪໨ʹউͪൈ͍ͨਓ͕ళΛܾΊΔ͜ͱ͕Ͱ͖Δɻ 3. উऀ͸޷͖ͳళΛબΜͰslack #meshibanͰप஌ 4. ݸʑʹ৯΂͍ͨ΋ͷΛใࠂͯ͠΋Β͏ 5.

    উऀ͸ใࠂΛ·ͱΊͯ஫จ͢Δ 6. ಧ͍ͨΒձࣾʹ͓ۚΛ෷ͬͯ΋Β͏ ۀ຿ϑϩʔ
  15. None
  16. None
  17. None
  18. None
  19. None
  20. None
  21. 1. Bounded Context = Deployment unit ͕Θ͔Δ 2. ۀ຿ϓϩηε͕୭ or

    ԿʹΑͬͯ։࢝͢Δͷ͔ɺͲͷΑ͏ͳ ෭࡞༻ͱ݁ՌΛੜΉͷ͔͕Θ͔Δ 3. Domain Event ͷ৚݅Ͱ͋Δ Invariant ͕ෳࡶʹͳΔ΄Ͳ αʔϏεͷ༏ҐੑͱͳΔ෦෼͕ݟ͑ͯ͘Δ 4. νʔϜͰڞ௨ͷϓϩμΫτࢹ఺͕࣋ͯΔ
  22. Modeling ϞσϦϯά = ந৅Խ͢Δ࡞ۀ ίϯςΩετʹΑͬͯந৅౓͕ҟͳΔ ڞ༗͢Δʮ໊લʯʢϞσϧɾଐੑʣΛܾΊ͍ͯ͘

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

  25. Day 1 UI Dev Conversation UI Dev Service Dev Contract

    Ops Day 0 Day 1 Day 2
  26. Ұ؏ੑͷ͋ΔUI มߋʹڧ͍UI Problems UI Dev

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

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

  29. CSS-in-JS is the rescue!

  30. None
  31. Automatic critical CSS No class name bugs Easier deletion of

    CSS Simple dynamic styling Painless maintenance Automatic vendor prefix
  32. None
  33. global theme props Simple dynamic styling

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

  36. Component Development

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

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

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

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

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

  44. BUTTON ICON

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

  46. Jane Doe LOGIN Wellcome! Your name Password

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

  48. None
  49. ϖʔδ Screens

  50. Jane Doe Awesome app John Smith

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

  52. EventStorming Ͱൃݟͨ͠ Domain Event , workflowΛ࣮૷͢Δ Views States View Usecase

    ։࢝ ͡ΌΜ͚Μத ࣗ෼ͷखΛબ୒ ࣗ෼ͷखΛܾΊΔ ࣗ෼ͷखΛAPIʹ ొ࿥ͯ͠΋Β͏ States ͡ΌΜ͚Μऴྃ
  53. Your name Preparing for reception ROCK PAPER SCISSORS START

  54. Your name Preparing for reception ROCK PAPER SCISSORS START

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

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

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

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

    Store
  59. Your name ROCK PAPER SCISSORS START Views ։࢝ Store API

    ։࠵ঢ়گΛมߋ Preparing for reception มߋத
  60. Your name Accepting ROCK PAPER SCISSORS ͡ΌΜ͚Μத START Views Store

    API Response Success
  61. Your name Accepting ROCK PAPER SCISSORS START

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

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

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

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

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

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

    API ࣗ෼ͷखΛొ࿥ API Response move: SCISSOR
  68. Your name Wait for Result ROCK PAPER SCISSORS View START

    Store API API Response ొ࿥੒ޭ ొ࿥ऴྃ
  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
  70. Day 1 Service Dev Conversation UI Dev Service Dev Contract

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

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

    Day 0 Day 1 Day 2
  73. workflow Service Development

  74. workflow Service Development

  75. workflow Service Development REST REST Messaging

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

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

    Spring Data RESTʂ
  78. workflow Service Development Invariant ʢԫ৭ʣ͕ଟ͍
 → ෳࡶͳཁ݅
 → ࡞ΓࠐΈ͕ඞཁ Messaging

    → Spring MVC
 → Spring Cloud Stream Messaging Invariant!
  79. มԽ͢ΔͨΊͷ४උ

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

  81. workflow Service Development

  82. workflow Service Development

  83. αʔϏε / Ϟδϡʔϧͷ෼ׂ 
 → Bounded Context Ͱ෼͚Δ Spring ͷ

    Ecosystem ͳʹΛ͔ͭ͏ʁ
 → ෇ᝦ΍໼ҹ͔Βಛ௃ΛΈ͚ͭΔ มԽ͢ΔͨΊͷ४උ
 → TDD ͷཁૉ͕͢Ͱʹ͋Δ ServiceDev
  84. Day 1 Contract - Consumer Driven Contract Share Knowledge UI

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

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

  87. Consumer Broker Service Contract Unit Test Contract

  88. Consumer Broker Service Contract Unit Test Contract Unit Test

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

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

    Verified ! Contract
  91. Consumer Broker Service Contract Unit Test Contract Unit Test Green

    ✅ Verified ! API Stub Contract
  92. DEMO

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

    ✅ Verified ! API Stub Contract
  94. มԽʹڧ͍γεςϜ΁ͷΞϓϩʔν • νʔϜͰShared mental modelΛҭͯΔ • ڥքΛཧղͯ͠Ϟδϡʔϧ΍αʔϏεΛ෼͚ͯΔ͜ͱͰ طଘαʔϏεʹӨڹ༩͑ͣʹ։ൃ • Contract

    ͕͋Δ͜ͱͰɺطଘΞϓϦέʔγϣϯΛյͣ͞ ʹ։ൃ
  95. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠