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

visualising software architecture with the c4 m...

visualising software architecture with the c4 model jp

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

Kenji Hiranabe

November 26, 2019
Tweet

Other Decks in Programming

Transcript

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

    #80 “ৄࡉ͗͢Δ” #81 “౒ྗ͕࣌ؒͷϜμ” #92 “ΞδϟΠϧͰ͸ෆཁ” #97 “Ձ஋͸ձ࿩ͷதʹʂ” UMLΛආ͚Δ97ͷํ๏
  2. 7

  3. 7

  4. 7

  5. 7

  6. 7

  7. 7

  8. 6

  9. 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
  10. 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
  11. Zoom in Zoom in Level 1 Context Level 2 Containers

    Level 3 Components Level 4 Code Zoom in
  12. 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.Λ ݟΔ͜ͱ͕Ͱ͖Δɻ
  13. ؔ܎ੑͷҙਤΛཁ໿ 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
  14. ཁ໿Ͱ͸͋ͬͯ΋۩ମతʹɻ Single Page Application [Container] API Application [Container] Single Page

    Application [Container] API Application [Container] Makes API calls using Uses
  15. ࣮ࡍͷ෺ޠ͕ಡΊΔΑ͏ʹɻ 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]
  16. ࣮ࡍͷ෺ޠ͕ಡΊΔΑ͏ʹɻ 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]
  17. ҙਤΛ໌ࣔ͢ΔͨΊʹɺ୯ޠΛ௥Ճ 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
  18. 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