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
   

   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