Downloaded 51 times
![Node Attributes
• Blue Box
• node [shape=box,height=0.1,width=0.1,color=blue,style=filled]
• product56001;
• product57001;
• …
• Red Circle
• node [shape=circle,style=filled,color=red,height=0.1,label="”]
• category10002;
• category10003;
46 © Extenda Visualize your architecture](https://image.slidesharecdn.com/visualizeyourarchitecture-devcon11web-121206144401-phpapp02/75/Visualize-your-architecture-and-information-46-2048.jpg)
![Node Attribute
• node [shape=circle,style=filled,color=red,height=0.3,label=""];
• category10002;
• node [shape=circle,style=filled,color=red,height=0.1,label=""];
• category10003;
• category10004;
• …
47 © Extenda Visualize your architecture](https://image.slidesharecdn.com/visualizeyourarchitecture-devcon11web-121206144401-phpapp02/75/Visualize-your-architecture-and-information-47-2048.jpg)
Uploaded byPeter Norrhall
Visualize your architecture and information
The document discusses the importance of visualizing software architecture and the communication of complex information through images. It highlights various methods and tools for visualization, as well as the significance of code metrics and dependencies in assessing software quality. In addition, it references best practices and provides resources for further learning on architectural documentation and visualization techniques.
Visualize your architecture and information
- 1. Visualize your architecture PeterNorrhall, Chief Architect peter.norrhall@extenda.se
- 2. Why Images? • ”A picture says more than 1000 words” 2 © Extenda Visualize your architecture
- 3. Thermometer Macrostate (Abstraction) Microstates 3 © Extenda Visualize your architecture
- 4. The holy number7 1956 George Miller 4 © Extenda Visualize your architecture
- 5. Conscious Communication 5 © Extenda Visualize your architecture
- 6. Unconscious Communication Eyesight 10.000.000 bit/s Touch 1.000.000 bit/s Hearing 100.000 bit/s Smell 100.000 bit/s Taste 1.000 bit/s M Zimmerman, Physiologie des Menchen 6 © Extenda Visualize your architecture
- 7. Les Misérables –Communication tree Exformation - removed important information Association Victor Hugo Publisher Tor Nörretranders, ”Märk Världen” 7 © Extenda Visualize your architecture
- 8. Pictures vs Text R-Mode + L-Mode Bla, bla, bla L-Mode 8 © Extenda Visualize your architecture
- 9. Why do weneed Architect Documents? Architect/Design Document Code Xunit/BDD 9 © Extenda Visualize your architecture
- 10. ISO 42010 • Recommended practice for architectural description of software- intensive systems 10 © Extenda Visualize your architecture
- 11. Architectural Views Security Deployment Interface Operational Logical Functional Intrastructure Process Non-Functional Design Data http://www.codingthearchitecture.com/ 11 © Extenda Visualize your architecture
- 12. Agile Development Documentation Architect/ Stakeholders Developer Refactor Developers Code & Refactor 12 © Extenda Visualize your architecture
- 13. Methods & Tools Meta-model – UML/DDD/… – Association Design Tools – White Board/Enterprise Architect/Visio/PPT/… Exformation 13 © Extenda Visualize your architecture
- 14. The problem • Systems and software are evolving –> ”Document Dept” using notioned based architecture or design • What is important and to whom? The sender or the receiver? • http://martinfowler.com/ieeeSoftware/whoNeedsArchitect.pdf • Perhaps the most important is to write/visualize • Andy Hunt, Pragmatic Thinking 14 © Extenda Visualize your architecture
- 15. Software Visualization • Generating images instead of doing it by hand when we want to explore the information (microstates). • Information visualization is essential in making sense out of large data sets (microstates) by finding patterns. • Generate and Display for a specific purpose • Relationships between modules/components/classes/entities/… • Code or Information dept 15 © Extenda Visualize your architecture
- 16. Visualize Software Data Source Code Running Systems Instrumentation Scanner/Parser Mapper Diagram Nodes: A, B Model Edges: A->B Renderer 16 © Extenda Visualize your architecture
- 17. Code Quality • The Code (source and test) is the actual system • Find Relations and dependencies • Beneficial Relationships • Finding unwanted relationships • Code metrics • Average Number of Methods (NOM) per Class • Average Lines of Code (LOC) per method • Average Cyclomatic Number (CYCLO) per line of code • … 17 © Extenda Visualize your architecture
- 18. Code Metrics • Lines of Code • Average Number of Methods (NOM) per Class • Average Lines of Code (LOC) per method • Average Cyclomatic Number (CYCLO) per line of code • Duplication • Check-in counts / churn • Test Coverage • Coupling • … 18 © Extenda Visualize your architecture
- 19. Cyclomatic Complexity if( c1() ) f1(); else f2(); if( c2() ) f3(); else f4(); http://en.wikipedia.org/wiki/Cyclomatic_complexity 19 © Extenda Visualize your architecture
- 20. Code Metrics • SonarSource 20 © Extenda Visualize your architecture
- 21. Code Metrics 21 © Extenda Visualize your architecture
- 22. Code Metrics –Industry Standard 22 © Extenda Visualize your architecture
- 23. Rules Compliance 23 © Extenda Visualize your architecture
- 24. Code Violations 24 © Extenda Visualize your architecture
- 25. Measure over time 25 © Extenda Visualize your architecture
- 26. Complexity Distribution 26 © Extenda Visualize your architecture
- 27. 27 © Extenda Visualize your architecture
- 28. Find the truth 28 © Extenda Visualize your architecture
- 29. CodeCity 29 © Extenda Visualize your architecture
- 30. Dependencies 30 © Extenda Visualize your architecture
- 31. Dependencies • ”Design is beneficially related elements”, K Beck • http://www.threeriversinstitute.org/blog/?p=111 • Predicting Subsystem Failures using Dependency Graph Complexities • http://research.microsoft.com/pubs/70340/tr-2006-126.pdf 31 © Extenda Visualize your architecture
- 32. Structure 101 • Code Parser and Analyzer for Java, .Net and C/C++ • Interactive explorer of relationships and quality of code finding and displaying technical dept • CI ”integration” 32 © Extenda Visualize your architecture
- 33. Demo : Spring 33 © Extenda Visualize your architecture
- 34. Commercial Alternatives • Sotoarc/Sonargraph - http://www.hello2morrow.com/ 34 © Extenda Visualize your architecture
- 35. Drawbacks • Package Dependencies • CC metrics = # faults? 35 © Extenda Visualize your architecture
- 36. Graphviz • You are in charge • Simple textual input -> different graphical output • Automated graph layout tool based on graph theory • Developed by A&T, Common Public Licence 36 © Extenda Visualize your architecture
- 37. Model & Diagram digraph G { a->b; } $ dot -Tpng simple.dot –o simple.png 37 © Extenda Visualize your architecture
- 38. Graphs • Directed Graph digraph G { a -> b; b -> c; a -> c; } • Undirected Graph graph G { a -- b; b -- c; a -- c; } 38 © Extenda Visualize your architecture
- 39. Layout • Dot – Hierarchy graph • Neato – Undirected graph using spring model • Twopi – Radial Layout • Circo – Circular Layout • Fdp – Undirected graphs using force-directed spring model • Sfdp – Similar to Fdp 39 © Extenda Visualize your architecture
- 40. Output Formats • PostScript (ps) • Structured Vector Graphics (svg) • Images (png, gif) • Imagemap (imap) • … 40 © Extenda Visualize your architecture
- 41. Graph Attributes • Size = ”x, y” • Rankdir = LR | RL | BT • Rotate=90 • Stylesheet=”.css” • … 41 © Extenda Visualize your architecture
- 42. Information Dept : E-Commerce Catalog Books Software Novels Engineering Agile Programming 18th Century Agile Management Development 3.0 42 © Extenda Visualize your architecture
- 43. Country #1 –Dot layout 43 © Extenda Visualize your architecture
- 44. Graph Attribute • Rotate=90 44 © Extenda Visualize your architecture
- 45. $ neato -Tpngcatalog.dot –o catalog.png neato Category Product 45 © Extenda Visualize your architecture
- 46. Node Attributes • Blue Box • node [shape=box,height=0.1,width=0.1,color=blue,style=filled] • product56001; • product57001; • … • Red Circle • node [shape=circle,style=filled,color=red,height=0.1,label="”] • category10002; • category10003; 46 © Extenda Visualize your architecture
- 47. Node Attribute • node [shape=circle,style=filled,color=red,height=0.3,label=""]; • category10002; • node [shape=circle,style=filled,color=red,height=0.1,label=""]; • category10003; • category10004; • … 47 © Extenda Visualize your architecture
- 48. Highlight root category 48 © Extenda Visualize your architecture
- 49. Twopi – RadialLayout 49 © Extenda Visualize your architecture
- 50. Country #2 50 © Extenda Visualize your architecture
- 51. Country #3 51 © Extenda Visualize your architecture
- 52. Other • Component Dependencies (Spring XML Bean Config) • Ant Target Dependencies • Maven Jar Dependencies • … 52 © Extenda Visualize your architecture
- 53. Other tools • Enterprise Architect – Code (better suited for user generated) • Erwin – Database ER-model 53 © Extenda Visualize your architecture
- 54. Summary 54 © Extenda Visualize your architecture
- 55. Questions? 55 © Extenda Visualize your architecture
- 56. Referenser • ”Märk Världen”, Tor Nörretranders, ISBN 9100570702 • http://martinfowler.com/ieeeSoftware/whoNeedsArchitect.pdf • http://en.wikipedia.org/wiki/Cyclomatic_complexity • http://www.enerjy.com/blog/?p=198 - CC > 74 not good • http://www.leshatton.org/Documents/TAIC2008-29-08-2008.pdf - Tools • http://www.headwaysoftware.com/ - Structure 101 • http://www.hello2morrow.com/ - Sonargraph • http://www.sonarsource.org/ - SonarSource • http://www.graphviz.org/ - Graphviz • Similar presentations • http://www.jfokus.se/jfokus11/preso/jf11_VizualizationsForCodeMetrics.pdf • http://erik.doernenburg.com/wp-content/archive/Doernenburg_SoftwareQuality_ver2a.pdf • http://www.slideshare.net/girba/pragmatic-quality-assessment-tutorial-icse-2008 • http://www.infoq.com/presentations/Where-Did-My-Architecture-Go © Extenda Visualize your architecture
- 57. peter.norrhall@extenda.se @peternorrhall LinkedIn 57