The Art of Visualising Software - Simon Brown
-
Upload
valtech-uk -
Category
Software
-
view
926 -
download
3
Transcript of The Art of Visualising Software - Simon Brown
![Page 1: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/1.jpg)
Simon Brown @simonbrown
The Art of Visualising Software Architecture
![Page 2: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/2.jpg)
Jersey
![Page 3: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/3.jpg)
Jersey
![Page 4: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/4.jpg)
Jersey
![Page 5: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/5.jpg)
![Page 6: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/6.jpg)
I help software teams understand
software architecture,
technical leadership and
the balance with agility
![Page 7: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/7.jpg)
Software architecture needs to be more
accessible
![Page 8: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/8.jpg)
Free!
![Page 9: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/9.jpg)
I code too⇧ ; - ⇧ 0
![Page 10: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/10.jpg)
![Page 11: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/11.jpg)
What’s been challenging about
the exercise?
![Page 12: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/12.jpg)
People expect to present their designs and therefore information is still
stuck in their heads
10111010101101001101111011101010010101011011
![Page 13: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/13.jpg)
The diagram isn’t self-evident, but we’ll explain it
![Page 14: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/14.jpg)
Review the diagrams
3 things we like
about the diagrams 3 things we think would improve the diagrams
3 things we like about the diagrams3 things we like
about the diagrams
3 things we think would improve the diagrams
3 things we think would
improve the diagrams
(focus on the communication of the solution rather than the solution itself)
![Page 15: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/15.jpg)
![Page 16: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/16.jpg)
In my experience, software teams aren’t able to
effectively visualise the
software architecture
of their systems
![Page 17: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/17.jpg)
We can visualise our process...
...but not our software!
![Page 18: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/18.jpg)
Moving fast requires
good communication
![Page 19: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/19.jpg)
![Page 20: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/20.jpg)
![Page 21: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/21.jpg)
The Shopping List
![Page 22: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/22.jpg)
Boxes & No Lines
![Page 23: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/23.jpg)
The Functional View
![Page 24: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/24.jpg)
Stormtroopers
![Page 25: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/25.jpg)
The Airline Route Map
![Page 26: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/26.jpg)
Generically True
![Page 27: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/27.jpg)
The Logical View
![Page 28: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/28.jpg)
Missing technology details
![Page 29: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/29.jpg)
Deployment vs Execution Context
![Page 30: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/30.jpg)
Homeless Old C# Object (HOCO)
![Page 31: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/31.jpg)
Choose your own adventure
![Page 32: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/32.jpg)
Should have used a whiteboard
![Page 33: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/33.jpg)
Eh?
![Page 34: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/34.jpg)
Who here uses UML
on a regular basis?
![Page 35: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/35.jpg)
9 out of 10 people
don’t use UML (in my experience)
![Page 36: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/36.jpg)
UML tool?
Whiteboard or flip chart?
![Page 37: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/37.jpg)
I do use UML (activity, class, sequence, collaboration, state)
![Page 38: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/38.jpg)
Collaborative design (e.g. pair architecting)
![Page 39: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/39.jpg)
Some tips for
effective sketches
Titles Short and meaningful, numbered if
diagram order is important
Lines Make line style and arrows explicit, add annotations to lines to provide
additional information
Layout Sticky notes and index cards make a
great substitute for drawn boxes, especially early on
![Page 40: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/40.jpg)
![Page 41: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/41.jpg)
Some tips for
effective sketches
Titles Short and meaningful, numbered if
diagram order is important
Lines Make line style and arrows explicit, add annotations to lines to provide
additional information
Layout Sticky notes and index cards make a
great substitute for drawn boxes, especially early on
Labels Be wary of using acronyms
Colour Ensure that colour coding
is made explicit
Orientation Users at the top and database at the bottom? Or perhaps “upside-down”?
Shapes Don’t assume that people will
understand what different shapes are being used for
Keys Explain shapes, lines, colours,
borders, acronyms, etc
Responsibilities Adding responsibilities to boxes can provide a nice “at a glance” view
(Miller’s Law; 7±2)
![Page 42: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/42.jpg)
It’s usually difficult to show the entire design on
a single diagram
Different views of the design can be used to manage complexity and
highlight different aspects of the solution
![Page 43: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/43.jpg)
Do the names of those views make sense?
Development vs PhysicalProcess vs FunctionalConceptual vs Logical
Development vs ImplementationPhysical vs Implementation
Physical vs Deployment
![Page 44: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/44.jpg)
Would you
code it that way?
![Page 45: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/45.jpg)
As an industry, we lack a common vocabulary
with which to think about, describe and communicate software architecture
![Page 46: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/46.jpg)
A software system is made up of one or more containers,
each of which contains one or more components,
which in turn are implemented by one or more classes.
Class Class Class
Component Component Component
Container (e.g. web application, application server, standalone application,
browser, database, file system, etc)
Container (e.g. web application
browser, database, file system, etc)
Container (e.g. web application
browser, database, file system, etc)
Software System
![Page 47: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/47.jpg)
Static model
(software systems, containers, components
and classes)
Runtime and behaviour
(sequence and collaboration diagrams of elements in the
static model)
Deployment (mapping of containers
to infrastructure)
Business process and workflow
Infrastructure (physical, virtual,
containerised hardware; firewalls, routers, etc)
Data (entity relationship
diagrams)etc…
![Page 48: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/48.jpg)
The C4 model
Classes Component or pattern implementation details
System Context The system plus users and system dependencies
Containers The overall shape of the architecture and technology choices
Components Logical components and their interactions within a container
![Page 49: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/49.jpg)
Diagrams are maps that help a team navigate a complex codebase
![Page 50: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/50.jpg)
Think about the
target audience
Non-technical Semi-technical Very technical
![Page 51: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/51.jpg)
A common set of abstractions
is more important than a common notation
![Page 52: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/52.jpg)
techtribes.je
bit.ly/sa4d-techtribesje
![Page 53: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/53.jpg)
Componentdiagram
(level 3)
Container diagram
(level 2)
Context diagram
(level 1)
Class diagram
(level 4)
![Page 54: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/54.jpg)
Componentdiagram
(level 3)
Container diagram
(level 2)
Context diagram
(level 1)
Class diagram
(level 4)
![Page 55: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/55.jpg)
Component diagram
(level 3)
Container diagram
(level 2)
Context diagram
(level 1)
Class diagram
(level 4)
![Page 56: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/56.jpg)
A simple notation (whiteboard and sticky note friendly, supplemented with colour coding)
techtribes.je [Software System]
techtribes.je is the only way to keep up to date with the IT, tech and digital sector in
Jersey and Guernsey, Channel Islands.
Anonymous User [Person]
Anybody on the web.
Twitter Connector [Component: Spring Bean + Twitter4j]
Retrieves profile information and tweets (using the REST and Streaming APIs).
Web Application [Container: Apache Tomcat 7.x]
Allows users to view people, tribes, content, events, jobs, etc from the local tech, digital
and IT sector.
![Page 57: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/57.jpg)
C4++ Enterprise context
User interface mockups and wireframes Domain model
Sequence and collaboration diagrams Business process and workflow models
Infrastructure model Deployment model
...
![Page 58: The Art of Visualising Software - Simon Brown](https://reader035.fdocuments.net/reader035/viewer/2022062306/58a44e001a28ab55068b4c39/html5/thumbnails/58.jpg)
Ensure you have a
ubiquitous language
to describe software architecture and let the notation evolve
@simonbrown on Twitter