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

visualising software architecture with the c4 model jp

visualising software architecture with the c4 model jp

"Visualising software architecture with the c4 model"
by @simonbrown (Japanese Version, translated by me)

604160f27747e8f501810727f21b6781?s=128

Kenji Hiranabe

November 26, 2019
Tweet

Transcript

  1. @simonbrown ೔ຊޠ༁ @hiranabe ιϑτ΢ΣΞͷ ΞʔΩςΫνϟΛՄࢹԽ͢Δ C4 model Visualising software architecture

    with the C4 model
  2. Simon Brown ιϑτ΢ΣΞΞʔΩςΫνϟΛઐ໳ͱ͢Δಠཱίϯαϧλϯτ + C4 model ͱ Structurizr ͷ࡞ऀ

  3. UML ࢖ͬͯ·͔͢?

  4. ࢲͷܦݧͰ͸ɺָ؍తʹݟͯ ࢖͍ͬͯΔͷ͸10ਓʹ1ਓ

  5. #2 “νʔϜϝϯόͷશһ͕෼͔Δ༁Ͱ͸ͳ͍” #3 “ࢲҎ֎ͷνʔϜϝϯό͸୭΋஌Βͳ͍” #36 “͓͡͞ΜͩͱࢥΘΕΔ” #37 “ྲྀߦ஗ΕͩͱࢥΘΕΔ” #66 “πʔϧ͕μϝ”

    #80 “ৄࡉ͗͢Δ” #81 “౒ྗ͕࣌ؒͷϜμ” #92 “ΞδϟΠϧͰ͸ෆཁ” #97 “Ձ஋͸ձ࿩ͷதʹʂ” UMLΛආ͚Δ97ͷํ๏
  6. None
  7. None
  8. None
  9. None
  10. None
  11. None
  12. None
  13. None
  14. None
  15. None
  16. 7

  17. 7

  18. 7

  19. 7

  20. 7

  21. 7

  22. 6

  23. “Just use a whiteboard!”

  24. None
  25. None
  26. ιϑτ΢ΣΞσϕϩύʔ͕ݐஙͷΞʔΩςΫνϟਤΛ࡞ͬͨΒ… ݰ͔ؔΒͷ࿓Լ ֊ஈ Ωονϯ ϦϏϯά ৸ࣨ1 ৸ࣨ3 ৸ࣨ2 ֊ஈ τΠϨ

    τΠϨ ্ਫ Լਫ ϐʔΫిྗ ௨ৗిྗ
  27. ΤϯδχΞ͕, (ΞʔςΟετͰ͸ͳ͘)

  28. νʔϜͰಉ͡ํ޲ʹ ૉૣ͘ಈͨ͘Ίʹ͸ɺ Α͍ίϛϡχέʔγϣϯ ͕ඞཁɻ

  29. ਤͱจॻʹ͸͞·͟·ͳಡΈख͕͍ͯɺ ͦΕͧΕผʑͷؔ৺Λ͍࣋ͬͯΔ (ΞʔΩςΫτɺσϕϩύʔɺӡ༻αϙʔτɺςελʔ, ϓϩμΫτΦʔφʔɺϓϩδΣΫτϚωδϟɺεΫϥϜϚελʔ, Ϣʔβ, Ϛωδϝϯτ, Ϗδωεεϙϯαʔ, જࡏސ٬, જࡏ౤ࢿऀ, …)

  30. ιϑτ΢ΣΞͷΞʔΩςΫνϟਤΛ ඳ͘ͱ͖͸ɺ ιϑτ΢ΣΞσϕϩύʔͱͯ͠ඳ͘ɻ

  31. ڞ௨ͷந৅(abstraction)ͷηοτ ͷํ͕ɺ ڞ௨ͷϊʔςʔγϣϯΑΓ΋ॏཁ

  32. software system ͸1ͭҎ্ͷ container Λ࣋ͪ, ͦΕΒ͸1ͭҎ্ͷ component Λ࣋ͪ, ͦΕΒ͕͞Βʹɺ1ͭҎ্ͷ code

    ཁૉ Λ࣋ͭ. Code Code Code Component Component Component Container (e.g. client-side web app, server-side web app, console application, mobile app, microservice, database schema, file system, etc) Container (e.g. client-side web app, server-side web app, console applic mobile app, microservice, database schema, file system, e Container client-side web app, server-side web app, console application, obile app, microservice, database schema, file system, etc) Software System
  33. C4 c4model.com

  34. 4. Code (e.g. classes) Component implementation details. 1. System Context

    The system plus users and system dependencies. 2. Containers The overall shape of the architecture and technology choices. 3. Components Logical components and their interactions within a container. Overview first Zoom & filter Details on demand
  35. μΠΞάϥϜ͸஍ਤͰ͋Δ େ͖ͯ͘ෳࡶͳίʔυϕʔεΛιϑτ΢ΣΞσϕϩύʔ͕୳ࡧ͢ΔͷΛॿ͚Δ஍ਤ

  36. Zoom in Zoom in Level 1 Context Level 2 Containers

    Level 3 Components Level 4 Code Zoom in
  37. Example (Internet Banking System)

  38. Level 1 System Context diagram

  39. None
  40. None
  41. None
  42. None
  43. Level 2 Container diagram

  44. The container diagram shows the containers that reside inside the

    software system boundary
  45. None
  46. None
  47. None
  48. None
  49. None
  50. None
  51. Level 3 Component diagram

  52. The component diagram shows the components that reside inside an

    individual container
  53. None
  54. None
  55. None
  56. None
  57. Level 4 Class diagram

  58. None
  59. ϊʔςʔγϣϯ

  60. μΠΞάϥϜ໊ ਤͷλΠτϧ͸୹ͯ͘ҙຯͷ͋Δ໊લͰɺਤͷछྨ΋ؚΊΔɻ ॱং͕ॏཁͰ͋Ε͹ਤ൪߸ΛৼΔɻྫ͑͹ɺ Financial Risk Systemͷ System Context ਤ [System

    Context] Financial Risk System
  61. ϨΠΞ΢τ ෇ᝦࢴͱΠϯσοΫεΧʔυ(CRCΧʔυ)͸ɺ खॻ͖ͷശͷ୅ΘΓͱͯ͠͏·͘ػೳ͢Δɻ (ಛʹϗϫΠτϘʔυ͕ͳ͍৔߹)

  62. ݟͨ໨ͷҰ؏ੑ શਤʹཁૉͷϊʔςʔγϣϯͱ഑ஔʹ Ұ؏ੑΛ࣋ͨͤΔΑ͏ʹ౒ྗ͢Δɻ

  63. ུޠ ུޠΛ࢖͏ͱ͖͸৻ॏʹɻ ࣗ෼͕ଐ͍ͯ͠ΔϏδωε/໰୊ྖҬʹ ؔ࿈͢Δ΋ͷ͸ͳ͓͞Βɻ

  64. ཁૉ γϯϓϧͳശ͔ΒελʔτͤΑɻ ໊લͱλΠϓɺٕज़(΋͠ద౰ͳΒ)ɺઆ໌ͱ໾ׂɻ

  65. techtribes.je [Software System] techtribes.je ͸Channel ౡͷJersey/ Guernseyͷٕज़ɺσδλϧɺITؔ࿈ͷ࠷ ৽৘ใΛ͍࣋ͬͯΔ Anonymous User

    [Person] Web͔ΒΞΫηε͖ͯͨ͠୭Ͱ΋ Twitter Connector [Component: Spring Bean + Twitter4j] ϓϩϑΝΠϧ৘ใͱπΠʔτΛऔಘ (RESTͱStreaming APIΛ༻͍ͯ) Web Application [Container: Java + Spring MVC] Ϣʔβ͕஍Ҭͷٕज़ɺσδλϧɺITؔ࿈ͷ ਓɺछ଒ɺ಺༰ɺΠϕϯτɺ৬ۀɺetc.Λ ݟΔ͜ͱ͕Ͱ͖Δɻ
  66. None
  67. ઢ ย໼ҹΛ޷ΜͰ࢖͍ɺ࠷΋ॏཁͳґଘ΋͘͠͸ σʔλͷྲྀΕΛࣔ͢ɻจষͰ໌ࣔతʹ໨తͱํ޲Λදݱɻ

  68. ؔ܎ੑͷҙਤΛཁ໿ Single Page Application [Container] API Application [Container] Makes an

    API request to Single Page Application [Container] API Application [Container] Makes API calls using Sends an API response to
  69. ཁ໿Ͱ͸͋ͬͯ΋۩ମతʹɻ Single Page Application [Container] API Application [Container] Single Page

    Application [Container] API Application [Container] Makes API calls using Uses
  70. ҙਤ͕ҟͳΕ͹ɺ ྆ํ޲ͷ໼ҹΛͦΕͧΕඳ͘ɻ Microservice A [Container] Microservice B [Container] Requests a

    list of customers from [JSON/HTTPS] Sends new customers to [Kafka topic]
  71. ࣮ࡍͷ෺ޠ͕ಡΊΔΑ͏ʹɻ Sends messages to Microservice D [Container] Microservice C [Container]

    Sends messages to Sends messages to Sends messages to Microservice B [Container] Microservice A [Container] Kafka [Container]
  72. ࣮ࡍͷ෺ޠ͕ಡΊΔΑ͏ʹɻ Sends customer update messages to [via Kafka topic X]

    Microservice D [Container] Microservice C [Container] Microservice B [Container] Microservice A [Container] Sends order creation messages to [via Kafka topic Y]
  73. ҙਤΛ໌ࣔ͢ΔͨΊʹɺ୯ޠΛ௥Ճ Trade Data System [Software System] Financial Risk System [Software

    System] Trade data Trade Data System [Software System] Financial Risk System [Software System] Sends trade data to
  74. ຌྫΛॻ͘ ܗɺઢछɺ৭ɺ࿮ઢɺུޠɺ౳ͷҙຯɻ … ࣗ෼ͷهड़ํ๏͕౰વͩͱࢥͬͯ΋!

  75. None
  76. ܗɺ৭ɺαΠζʹΑΔ૷০͸ ิॿͱͯ͠࢖͍ɺ ͦΕΒ͕ͳͯ͘΋ҙຯ͕෼͔ΔਤΛ ॻ͘͜ͱɻ

  77. None
  78. ΞΠίϯ͸ςΩετΛิ͏΋ͷɻ ςΩετΛஔ͖׵͑Δ΋ͷͰ͸ͳ͍ɻ

  79. None
  80. None
  81. ͦͷਤ͚ͩͰҙຯ͕ͱΕΔΑ͏ɺ ιϑτ΢ΣΞΞʔΩςΫνϟਤͷ ಡΈ΍͢͞(readability) Λ޲্͠Α͏ɻ

  82. આ໌ΑΓ΋ʮ෺ޠʯͷํ͕ ͏·͘ਤͷҙਤΛิؒͰ͖Δɻ

  83. Notation, notation, notation A software architecture diagram review checklist General

    Elements Does the diagram have a title? Yes No Do you understand what the diagram type is? Yes No Do you understand what the diagram scope is? Yes No Does the diagram have a key/legend? Yes No Does every element have a name? Yes No Do you understand the type of every element? (i.e. the level of abstraction; e.g. software system, container, etc) Yes No Do you understand what every element does? Yes No Where applicable, do you understand the technology choices associated with every element? Yes No Do you understand the meaning of all acronyms and abbreviations used? Yes No Do you understand the meaning of all colours used? Yes No Do you understand the meaning of all shapes used? Yes No Do you understand the meaning of all border styles used? (e.g. solid, dashed, etc) Yes No Do you understand the meaning of all element sizes used? (e.g. small vs large boxes) Yes No
  84. “ ” ਪ঑ πʔϧ ͸͋Γ·͔͢?

  85. None
  86. ɹಛʹ C4 model ͷͨΊʹઃܭ͞Εͨɺܰྔιϑτ΢ΣΞΞʔΩςΫνϟϞσϦϯάπʔϧɻ Markdown/AsciiDoc จॻͱADRsͰิ׬ɻ

  87. ந৅͕ઌɻ ϊʔςʔγϣϯ͸࣍ɻ νʔϜ͕ιϑτ΢ΣΞΞʔΩςΫνϟΛهड़͢Δ ϢϏΩλεݴޠΛ͍࣋ͬͯΔ͜ͱɻ

  88. Thank you! simon@architectis.je @simonbrown
 ೔ຊޠ༁ @hiranabe