Spring with React for Enterprise Application

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

Transcript

1. Spring with React FOR ENTERPRISE APPLICATION Tagbangers, Inc. Spring Fest 2019
2. ࢁ㟒 େ λάόϯΨʔζೖࣾ5೥໨ɻ WebΞϓϦέʔγϣϯͷ։ൃɺϚωδϝϯτΛ୲౰ɻ JavaɺSpring͸΋ͪΖΜɺٕज़ͷ͜ͱͳΒͳΜͰ΋޷͖ɻ ͨͩͷΘ͞΋Μɻ ઃᒜ େޛ λάόϯΨʔζೖࣾ1೥໨ɻ WebΞϓϦέʔγϣϯͷϑϩϯτΤϯυ։ൃΛ୲౰ɻ
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. ಧ͍ͨΒձࣾʹ͓ۚΛ෷ͬͯ΋Β͏ ۀ຿ϑϩʔ
21. 1. Bounded Context = Deployment unit ͕Θ͔Δ 2. ۀ຿ϓϩηε͕୭ or ԿʹΑͬͯ։࢝͢Δͷ͔ɺͲͷΑ͏ͳ ෭࡞༻ͱ݁ՌΛੜΉͷ͔͕Θ͔Δ 3. Domain Event ͷ৚݅Ͱ͋Δ Invariant ͕ෳࡶʹͳΔ΄Ͳ αʔϏεͷ༏ҐੑͱͳΔ෦෼͕ݟ͑ͯ͘Δ 4. νʔϜͰڞ௨ͷϓϩμΫτࢹ఺͕࣋ͯΔ
22. Modeling ϞσϦϯά = ந৅Խ͢Δ࡞ۀ ίϯςΩετʹΑͬͯந৅౓͕ҟͳΔ ڞ༗͢Δʮ໊લʯʢϞσϧɾଐੑʣΛܾΊ͍ͯ͘
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!
31. Automatic critical CSS No class name bugs Easier deletion of CSS Simple dynamic styling Painless maintenance Automatic vendor prefix
33. global theme props Simple dynamic styling
35. Ұ؏ੑͷ͋ΔUIɹ มߋʹڧ͍UI Problems UI Dev
36. Component Development
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 ϨΠΞ΢τͷύλʔϯ
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. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠