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)

Kenji Hiranabe

November 26, 2019
Tweet

Other Decks in Programming

Transcript

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

    View full-size slide

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

    View full-size slide

  3. UML ࢖ͬͯ·͔͢?

    View full-size slide

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

    View full-size slide

  5. #2 “νʔϜϝϯόͷશһ͕෼͔Δ༁Ͱ͸ͳ͍”
    #3 “ࢲҎ֎ͷνʔϜϝϯό͸୭΋஌Βͳ͍”
    #36 “͓͡͞ΜͩͱࢥΘΕΔ”
    #37 “ྲྀߦ஗ΕͩͱࢥΘΕΔ”
    #66 “πʔϧ͕μϝ”
    #80 “ৄࡉ͗͢Δ”
    #81 “౒ྗ͕࣌ؒͷϜμ”
    #92 “ΞδϟΠϧͰ͸ෆཁ”
    #97 “Ձ஋͸ձ࿩ͷதʹʂ”
    UMLΛආ͚Δ97ͷํ๏

    View full-size slide

  6. “Just use a whiteboard!”

    View full-size slide

  7. ιϑτ΢ΣΞσϕϩύʔ͕ݐஙͷΞʔΩςΫνϟਤΛ࡞ͬͨΒ…
    ݰ͔ؔΒͷ࿓Լ
    ֊ஈ
    Ωονϯ ϦϏϯά
    ৸ࣨ1
    ৸ࣨ3
    ৸ࣨ2
    ֊ஈ τΠϨ
    τΠϨ
    ্ਫ
    Լਫ
    ϐʔΫిྗ
    ௨ৗిྗ

    View full-size slide

  8. ΤϯδχΞ͕,
    (ΞʔςΟετͰ͸ͳ͘)

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  13. 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

    View full-size slide

  14. C4
    c4model.com

    View full-size slide

  15. 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

    View full-size slide

  16. μΠΞάϥϜ͸஍ਤͰ͋Δ
    େ͖ͯ͘ෳࡶͳίʔυϕʔεΛιϑτ΢ΣΞσϕϩύʔ͕୳ࡧ͢ΔͷΛॿ͚Δ஍ਤ

    View full-size slide

  17. Zoom in
    Zoom in
    Level 1
    Context
    Level 2
    Containers
    Level 3
    Components
    Level 4
    Code
    Zoom in

    View full-size slide

  18. Example
    (Internet Banking System)

    View full-size slide

  19. Level 1
    System Context diagram

    View full-size slide

  20. Level 2
    Container diagram

    View full-size slide

  21. The container diagram shows the
    containers that reside inside
    the software system boundary

    View full-size slide

  22. Level 3
    Component diagram

    View full-size slide

  23. The component diagram
    shows the components
    that reside inside an
    individual container

    View full-size slide

  24. Level 4
    Class diagram

    View full-size slide

  25. ϊʔςʔγϣϯ

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  31. 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.Λ
    ݟΔ͜ͱ͕Ͱ͖Δɻ

    View full-size slide


  32. ย໼ҹΛ޷ΜͰ࢖͍ɺ࠷΋ॏཁͳґଘ΋͘͠͸
    σʔλͷྲྀΕΛࣔ͢ɻจষͰ໌ࣔతʹ໨తͱํ޲Λදݱɻ

    View full-size slide

  33. ؔ܎ੑͷҙਤΛཁ໿
    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

    View full-size slide

  34. ཁ໿Ͱ͸͋ͬͯ΋۩ମతʹɻ
    Single Page Application
    [Container]
    API Application
    [Container]
    Single Page Application
    [Container]
    API Application
    [Container]
    Makes API calls using
    Uses

    View full-size slide

  35. ҙਤ͕ҟͳΕ͹ɺ
    ྆ํ޲ͷ໼ҹΛͦΕͧΕඳ͘ɻ
    Microservice A
    [Container]
    Microservice B
    [Container]
    Requests a list of customers from
    [JSON/HTTPS]
    Sends new customers to
    [Kafka topic]

    View full-size slide

  36. ࣮ࡍͷ෺ޠ͕ಡΊΔΑ͏ʹɻ
    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]

    View full-size slide

  37. ࣮ࡍͷ෺ޠ͕ಡΊΔΑ͏ʹɻ
    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]

    View full-size slide

  38. ҙਤΛ໌ࣔ͢ΔͨΊʹɺ୯ޠΛ௥Ճ
    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

    View full-size slide

  39. ຌྫΛॻ͘
    ܗɺઢछɺ৭ɺ࿮ઢɺུޠɺ౳ͷҙຯɻ
    … ࣗ෼ͷهड़ํ๏͕౰વͩͱࢥͬͯ΋!

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  44. 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

    View full-size slide

  45. “ ”
    ਪ঑ πʔϧ ͸͋Γ·͔͢?

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  48. Thank you!
    [email protected]
    @simonbrown

    ೔ຊޠ༁ @hiranabe

    View full-size slide