Visualize your architectureITARC2013Peter Norrhall, Chief Architectpeter.norrhall@extenda.se
Customers	  using	  Extenda	  POS	  
Thermometer	  	  3	  Microstates	  Macrostate	  (Abstrac<on)	  Code	  Xunit	  Architect/Design	  Document	  SoAware	  Guid...
Why	  Images?	  ”A	  picture	  says	  more	  than	  1000	  words”	  	  4	  
Unconscious	  Communica<on	  	  5	  Eyesight	  10.000.000	  bit/s	  Touch	  1.000.000	  bit/s	  Hearing	  100.000	  bit/s	...
Percep<on	  model	  Stage	  1	  Features	  Stage	  2	  PaVerns	  
PaVerns	  and	  contours	  	  7	  A	   B	  C	   D	  A	   B	  C	   D	  B	  has	  a	  rela<on	  to	  A,	  C	  and	  D	  
Coulors	  
Coulors	  
Coulors	  
Opponent	  Colours	  
RISK	  RDS	  Relevance	  Data	  Admin	  -­‐	  Trigger	  Report	  Interac<on	  Data	  Flow	  Legend	  
Percep<on	  model	  Stage	  1	  Features	  Stage	  2	  PaVerns	  Stage	  3	  Visual	  	  working	  memory	  Verbal	  worki...
 14	  GUL!GUL! GUL!GUL!SVART!SVART!SVART!BLÅ!BLÅ!BLÅ!RÖD!RÖD!RÖD!GRÖN!GRÖN!
Stroop	  Effect	  	  15	  GUL!GUL! GUL!GUL!SVART!SVART!SVART!BLÅ!BLÅ!BLÅ!RÖD!RÖD!RÖD!GRÖN!GRÖN!
Percep<on	  model	  Stage	  1	  Features	  Stage	  2	  PaVerns	  Stage	  3	   Verbal	  working	  memory	  Bla	  bla	  bla	...
Effec<ve	  Sketches	  	  17	  
Icons	  &	  Symbols	  hVp://commons.wikimedia.org/wiki/File:Icon_03017_Bogorodica_Umilenie.jpg	  
Semio<cs	  of	  Graphics	  Sensory	  Symbols	  «device,smartphone»«database»Arbitrary	  Symbols	  
Different	  Associa<on	  Actor	  Developer	   Account	  Manager	  
Les	  Misérables	  –	  Communica<on	  tree	  	  21	  Exforma<on	  -­‐	  removed	  important	  informa<on	   Associa<on	  V...
Agile	  Development	  Documenta<on	  	  22	  Stakeholders	  Developers	  Architect/	  Developer	  Code	  &	  Refactor	  Re...
Effec<ve	  Sketches	  	  23	  
RISK	  RDS	  TDS	  AD	  Mail	  System	  Relevance	  Data	  Trade	  Data	   No<fica<on	  Creden<als	  Risk	  System	  Contex...
•  Maven	  Site	  	  •  Maven	  APT	  format	  •  PowerPoint/Visio/	  PlantUML	  
Select	  and	  Learn	  your	  tools	  	  27	  Powerpoint/Keynote	  Enterprise	  Architect	  Visio	  Erwin	  
Create	  an	  Icon	  and	  nota<on	  Repository	  Interac<on	  Data	  Flow	  Legend	  
Documenta<on	  –	  The	  Problem	  •  Systems	  and	  soAware	  are	  evolving	  –>	  ”Document	  Dept”	  	  •  What	  is	...
Explora<on	  SoAware	  Visualiza<on	  •  GeneraDng	  images	  instead	  of	  doing	  it	  by	  hand	  when	  we	  want	  t...
Visualize	  SoAware	  	  31	  Scanner/Parser	  Data	   Source	  Code	  Instrumenta<on	  Running	  Systems	  Mapper	  Nodes...
Code	  Quality	  
Code	  Quality	  Code	  Metrics	  Rela<onships	  Lines	  of	  Code	  Average	  Number	  of	  Methods	  (NOM)	  per	  Class...
Code	  Metrics	  •  SonarSource	  	  34	  
Code	  Metrics	  –	  Industry	  Standard	  	  35	  
Find	  the	  truth	  	  36	  
CodeCity	  	  37	  
Dependencies	  	  38	  
Dependencies	  •  ”Design	  is	  beneficially	  related	  elements”,	  K	  Beck	  –  hVp://www.threeriversins<tute.org/blog...
Structure	  101	  •  Code	  Parser	  and	  Analyzer	  for	  Java,	  .Net	  and	  C/C++	  •  Interac<ve	  explorer	  of	  r...
Demo	  :	  Spring	  	  41	  
Commercial	  Alterna<ves	  •  Sotoarc/Sonargraph/…	  -­‐	  hVp://www.hello2morrow.com/	  •  Laxx	  hVp://www.laxx.com/	  	...
Graphviz	  -­‐	  Model	  &	  Diagram	  digraph	  G	  {	  	  	  a-­‐>b;	  }	  	  43	  $	  dot	  -­‐Tpng	  simple.dot	  –o	 ...
Graphs	  •  Directed	  Graph	  !digraph G {!a -> b;!b -> c;!a -> c;!}!•  Undirected	  Graph	  graph G {!a -- b;!b -- c;!a ...
Informa<on	  Dept	  :	  	  E-­‐Commerce	  Catalog	  	  45	  Books	  SoAware	  Engineering	  Agile	  Agile	  Development	  ...
Country	  #1	  	  46	  Category	  Product	  $	  neato	  -­‐Tpng	  catalog.dot	  –o	  catalog.png	  
Country	  #2	  	  47	  
Country	  #3	  	  48	  
Other	  •  Component	  Dependencies	  (Spring	  XML	  Bean	  Config)	  •  Ant	  Target	  Dependencies	  	  •  System	  Depe...
Summary	  	  50	  Know	  your	  brain	  Use	  VisualizaDon	  PracDce	  ExformaDon	  
Ques<ons?	  	  51	  
Referenser	  •  ”Märk	  Världen”,	  Tor	  Nörretranders,	  ISBN	  9100570702	  •  ”Informa<on	  Visualiza<on,	  3rd	  Edi<...
peter.norrhall@extenda.se@peternorrhallLinkedIn53
Visualize your architecture at ITARC 2013
Upcoming SlideShare
Loading in …5
×

Visualize your architecture at ITARC 2013

1,016 views

Published on

My presentation held at IASA's and Dataföreningen's ITARC on the 16th of April in Stockholm. New part with the brain's perception model.

Published in: News & Politics, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,016
On SlideShare
0
From Embeds
0
Number of Embeds
15
Actions
Shares
0
Downloads
13
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Visualize your architecture at ITARC 2013

  1. 1. Visualize your architectureITARC2013Peter Norrhall, Chief Architectpeter.norrhall@extenda.se
  2. 2. Customers  using  Extenda  POS  
  3. 3. Thermometer    3  Microstates  Macrostate  (Abstrac<on)  Code  Xunit  Architect/Design  Document  SoAware  Guidebook  
  4. 4. Why  Images?  ”A  picture  says  more  than  1000  words”    4  
  5. 5. Unconscious  Communica<on    5  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. 6. Percep<on  model  Stage  1  Features  Stage  2  PaVerns  
  7. 7. PaVerns  and  contours    7  A   B  C   D  A   B  C   D  B  has  a  rela<on  to  A,  C  and  D  
  8. 8. Coulors  
  9. 9. Coulors  
  10. 10. Coulors  
  11. 11. Opponent  Colours  
  12. 12. RISK  RDS  Relevance  Data  Admin  -­‐  Trigger  Report  Interac<on  Data  Flow  Legend  
  13. 13. Percep<on  model  Stage  1  Features  Stage  2  PaVerns  Stage  3  Visual    working  memory  Verbal  working  memory  Bla  bla  bla  
  14. 14.  14  GUL!GUL! GUL!GUL!SVART!SVART!SVART!BLÅ!BLÅ!BLÅ!RÖD!RÖD!RÖD!GRÖN!GRÖN!
  15. 15. Stroop  Effect    15  GUL!GUL! GUL!GUL!SVART!SVART!SVART!BLÅ!BLÅ!BLÅ!RÖD!RÖD!RÖD!GRÖN!GRÖN!
  16. 16. Percep<on  model  Stage  1  Features  Stage  2  PaVerns  Stage  3   Verbal  working  memory  Bla  bla  bla  Visual    working  memory  Visual  Query  Long-­‐term  memory  
  17. 17. Effec<ve  Sketches    17  
  18. 18. Icons  &  Symbols  hVp://commons.wikimedia.org/wiki/File:Icon_03017_Bogorodica_Umilenie.jpg  
  19. 19. Semio<cs  of  Graphics  Sensory  Symbols  «device,smartphone»«database»Arbitrary  Symbols  
  20. 20. Different  Associa<on  Actor  Developer   Account  Manager  
  21. 21. Les  Misérables  –  Communica<on  tree    21  Exforma<on  -­‐  removed  important  informa<on   Associa<on  Victor  Hugo   Publisher  Tor  Nörretranders,  ”Märk  Världen”    
  22. 22. Agile  Development  Documenta<on    22  Stakeholders  Developers  Architect/  Developer  Code  &  Refactor  Refactor  
  23. 23. Effec<ve  Sketches    23  
  24. 24. RISK  RDS  TDS  AD  Mail  System  Relevance  Data  Trade  Data   No<fica<on  Creden<als  Risk  System  Context   User   Admin  -­‐  Trigger  Report  -­‐  User  Report  -­‐  Configure  Params  Interac<on  Data  Flow  Legend  
  25. 25. •  Maven  Site    •  Maven  APT  format  •  PowerPoint/Visio/  PlantUML  
  26. 26. Select  and  Learn  your  tools    27  Powerpoint/Keynote  Enterprise  Architect  Visio  Erwin  
  27. 27. Create  an  Icon  and  nota<on  Repository  Interac<on  Data  Flow  Legend  
  28. 28. Documenta<on  –  The  Problem  •  Systems  and  soAware  are  evolving  –>  ”Document  Dept”    •  What  is  important  and  to  whom?  The  sender  or  the  receiver?  •  hVp://mar<nfowler.com/ieeeSoAware/whoNeedsArchitect.pdf  •  Perhaps  the  most  important  is  to  write/visualize  •  Andy  Hunt,  Pragma<c  Thinking    29  
  29. 29. Explora<on  SoAware  Visualiza<on  •  GeneraDng  images  instead  of  doing  it  by  hand  when  we  want  to  explore  the  informa<on  (microstates).  •  Informa<on  visualiza<on  is  essen<al  in  making  sense  out  of  large  data  sets  (microstates)  by  finding  paVerns.  •  Generate  and  Display  for  a  specific  purpose  –  Rela<onships  between  modules/components/classes/en<<es/…  –  Code  or  Informa<on  dept    30  
  30. 30. Visualize  SoAware    31  Scanner/Parser  Data   Source  Code  Instrumenta<on  Running  Systems  Mapper  Nodes:  A,  B  Edges:  A-­‐>B   Renderer  Model  Diagram  
  31. 31. Code  Quality  
  32. 32. Code  Quality  Code  Metrics  Rela<onships  Lines  of  Code  Average  Number  of  Methods  (NOM)  per  Class  Average  Lines  of  Code  (LOC)  per  method  Average  Cycloma<c  Number  (CYCLO)  per  line  of  code    Duplica<on  Check-­‐in  counts  /  churn  Test  Coverage  Coupling    …  
  33. 33. Code  Metrics  •  SonarSource    34  
  34. 34. Code  Metrics  –  Industry  Standard    35  
  35. 35. Find  the  truth    36  
  36. 36. CodeCity    37  
  37. 37. Dependencies    38  
  38. 38. Dependencies  •  ”Design  is  beneficially  related  elements”,  K  Beck  –  hVp://www.threeriversins<tute.org/blog/?p=111  •  Predic<ng  Subsystem  Failures  using  Dependency  Graph  Complexi<es  –  hVp://research.microsoA.com/pubs/70340/tr-­‐2006-­‐126.pdf    39  
  39. 39. Structure  101  •  Code  Parser  and  Analyzer  for  Java,  .Net  and  C/C++  •  Interac<ve  explorer  of  rela<onships  and  quality  of  code  finding  and  displaying  technical  dept  •  CI  ”integra<on”    40  
  40. 40. Demo  :  Spring    41  
  41. 41. Commercial  Alterna<ves  •  Sotoarc/Sonargraph/…  -­‐  hVp://www.hello2morrow.com/  •  Laxx  hVp://www.laxx.com/      42  
  42. 42. Graphviz  -­‐  Model  &  Diagram  digraph  G  {      a-­‐>b;  }    43  $  dot  -­‐Tpng  simple.dot  –o  simple.png  
  43. 43. Graphs  •  Directed  Graph  !digraph G {!a -> b;!b -> c;!a -> c;!}!•  Undirected  Graph  graph G {!a -- b;!b -- c;!a -- c;!}!  44  
  44. 44. Informa<on  Dept  :    E-­‐Commerce  Catalog    45  Books  SoAware  Engineering  Agile  Agile  Development  Management  3.0  Programming  Novels  18th  Century  
  45. 45. Country  #1    46  Category  Product  $  neato  -­‐Tpng  catalog.dot  –o  catalog.png  
  46. 46. Country  #2    47  
  47. 47. Country  #3    48  
  48. 48. Other  •  Component  Dependencies  (Spring  XML  Bean  Config)  •  Ant  Target  Dependencies    •  System  Dependencies      49  hVp://blogs.informa<ca.com/perspec<ves/2011/10/25/whose-­‐fault-­‐is-­‐the-­‐integra<on-­‐hairball  
  49. 49. Summary    50  Know  your  brain  Use  VisualizaDon  PracDce  ExformaDon  
  50. 50. Ques<ons?    51  
  51. 51. Referenser  •  ”Märk  Världen”,  Tor  Nörretranders,  ISBN  9100570702  •  ”Informa<on  Visualiza<on,  3rd  Edi<on”,  Colin  Ware  •  ”Designing  Data  Visualiza<on”,  Illinsky  &  Steele  •  ”Making  soAware,  …”,  Oram  &  Wilson  •  hVp://www.codingthearchitecture.com  •  hVp://mar<nfowler.com/ieeeSoAware/whoNeedsArchitect.pdf  •  hVp://www.headwaysoAware.com/  -­‐  Structure  101  •  hVp://www.hello2morrow.com/  -­‐  Sonargraph  •  hVp://www.sonarsource.org/  -­‐  SonarSource  •  hVp://www.graphviz.org/  -­‐  Graphviz  •  Similar  presenta<ons  •  hVp://www.jfokus.se/jfokus11/preso/jf11_Vizualiza<onsForCodeMetrics.pdf  •  hVp://erik.doernenburg.com/wp-­‐content/archive/Doernenburg_SoAwareQuality_ver2a.pdf  •  hVp://www.slideshare.net/girba/pragma<c-­‐quality-­‐assessment-­‐tutorial-­‐icse-­‐2008  •  hVp://www.infoq.com/presenta<ons/Where-­‐Did-­‐My-­‐Architecture-­‐Go    
  52. 52. peter.norrhall@extenda.se@peternorrhallLinkedIn53

×