Visualize your architecture and information

2,866 views

Published on

Visualization is an effective method of communication and there is more than UML. Peter will in this presentation show a few of the most common methods and tools to visualize your system's design (or lack of it) and the theories used. You will also be able to visualize how the information in the system looks like from different perspectives in order to detect any "information dept" or how the system behaves in operation. The purpose of the presentation is to inspire you to use visualization as a technique to improve the quality of your software.

Published in: Technology

Visualize your architecture and information

  1. 1. Visualize your architecturePeter Norrhall, Chief Architectpeter.norrhall@extenda.se
  2. 2. Why Images? • ”A picture says more than 1000 words”2 © Extenda Visualize your architecture
  3. 3. Thermometer Macrostate (Abstraction) Microstates3 © Extenda Visualize your architecture
  4. 4. The holy number 7 1956 George Miller4 © Extenda Visualize your architecture
  5. 5. Conscious Communication5 © Extenda Visualize your architecture
  6. 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 Menchen6 © Extenda Visualize your architecture
  7. 7. Les Misérables – Communication treeExformation -removed important information Association Victor Hugo Publisher Tor Nörretranders, ”Märk Världen”7 © Extenda Visualize your architecture
  8. 8. Pictures vs Text R-Mode + L-Mode Bla, bla, bla L-Mode8 © Extenda Visualize your architecture
  9. 9. Why do we need Architect Documents? Architect/Design Document Code Xunit/BDD9 © Extenda Visualize your architecture
  10. 10. ISO 42010 • Recommended practice for architectural description of software- intensive systems10 © Extenda Visualize your architecture
  11. 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. 12. Agile Development Documentation Architect/ Stakeholders Developer Refactor Developers Code & Refactor12 © Extenda Visualize your architecture
  13. 13. Methods & Tools Meta-model – UML/DDD/… – Association Design Tools – White Board/Enterprise Architect/Visio/PPT/… Exformation13 © Extenda Visualize your architecture
  14. 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 Thinking14 © Extenda Visualize your architecture
  15. 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 dept15 © Extenda Visualize your architecture
  16. 16. Visualize Software Data Source Code Running Systems Instrumentation Scanner/Parser Mapper Diagram Nodes: A, B Model Edges: A->B Renderer16 © Extenda Visualize your architecture
  17. 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. 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. 19. Cyclomatic Complexity if( c1() ) f1(); else f2(); if( c2() ) f3(); else f4(); http://en.wikipedia.org/wiki/Cyclomatic_complexity19 © Extenda Visualize your architecture
  20. 20. Code Metrics • SonarSource20 © Extenda Visualize your architecture
  21. 21. Code Metrics21 © Extenda Visualize your architecture
  22. 22. Code Metrics – Industry Standard22 © Extenda Visualize your architecture
  23. 23. Rules Compliance23 © Extenda Visualize your architecture
  24. 24. Code Violations24 © Extenda Visualize your architecture
  25. 25. Measure over time25 © Extenda Visualize your architecture
  26. 26. Complexity Distribution26 © Extenda Visualize your architecture
  27. 27. 27 © Extenda Visualize your architecture
  28. 28. Find the truth28 © Extenda Visualize your architecture
  29. 29. CodeCity29 © Extenda Visualize your architecture
  30. 30. Dependencies30 © Extenda Visualize your architecture
  31. 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.pdf31 © Extenda Visualize your architecture
  32. 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. 33. Demo : Spring33 © Extenda Visualize your architecture
  34. 34. Commercial Alternatives • Sotoarc/Sonargraph - http://www.hello2morrow.com/34 © Extenda Visualize your architecture
  35. 35. Drawbacks • Package Dependencies • CC metrics = # faults?35 © Extenda Visualize your architecture
  36. 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 Licence36 © Extenda Visualize your architecture
  37. 37. Model & Diagram digraph G { a->b; } $ dot -Tpng simple.dot –o simple.png37 © Extenda Visualize your architecture
  38. 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. 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 Fdp39 © Extenda Visualize your architecture
  40. 40. Output Formats • PostScript (ps) • Structured Vector Graphics (svg) • Images (png, gif) • Imagemap (imap) • …40 © Extenda Visualize your architecture
  41. 41. Graph Attributes • Size = ”x, y” • Rankdir = LR | RL | BT • Rotate=90 • Stylesheet=”.css” • …41 © Extenda Visualize your architecture
  42. 42. Information Dept : E-Commerce Catalog Books Software Novels Engineering Agile Programming 18th Century Agile Management Development 3.042 © Extenda Visualize your architecture
  43. 43. Country #1 – Dot layout43 © Extenda Visualize your architecture
  44. 44. Graph Attribute • Rotate=9044 © Extenda Visualize your architecture
  45. 45. $ neato -Tpng catalog.dot –o catalog.png neato Category Product45 © Extenda Visualize your architecture
  46. 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. 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. 48. Highlight root category48 © Extenda Visualize your architecture
  49. 49. Twopi – Radial Layout49 © Extenda Visualize your architecture
  50. 50. Country #250 © Extenda Visualize your architecture
  51. 51. Country #351 © Extenda Visualize your architecture
  52. 52. Other • Component Dependencies (Spring XML Bean Config) • Ant Target Dependencies • Maven Jar Dependencies • …52 © Extenda Visualize your architecture
  53. 53. Other tools • Enterprise Architect – Code (better suited for user generated) • Erwin – Database ER-model53 © Extenda Visualize your architecture
  54. 54. Summary54 © Extenda Visualize your architecture
  55. 55. Questions?55 © Extenda Visualize your architecture
  56. 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. 57. peter.norrhall@extenda.se @peternorrhall LinkedIn57

×