visualizing code bases

81
01

Upload: andrey-adamovich

Post on 29-Jan-2018

1.146 views

Category:

Technology


1 download

TRANSCRIPT

Page 1: Visualizing code bases

01

Page 2: Visualizing code bases

About me02

Page 3: Visualizing code bases

Andrey AdamovichBio: Developer, coach, speaker, author

Company: Aestas/IT (http://aestasit.com)••

03

Page 4: Visualizing code bases

Contact detailsE­mail: [email protected]

Linkedin: http://www.linkedin.com/in/andreyadamovich

Lanyrd: http://lanyrd.com/profile/andrey­adamovich

GitHub: https://github.com/aadamovich

SO: http://stackoverflow.com/users/162792/andrey­adamovich

Twitter: @codingandrey, @aestasit

••••••

04

Page 5: Visualizing code bases

Let's start!05

Page 6: Visualizing code bases

BackgroundFind new clients

Face big code bases

Need quick analysis

Need quick results

••••

06

Page 7: Visualizing code bases

Code sizeGoogle: 2 billions LOC

Facebook: 61 million LOC

Me: from 20K to 2M LOC

•••

07

Page 8: Visualizing code bases

I hate reading...

08

Page 9: Visualizing code bases

Reading codeI want this to work

This just works

Working is the definition of this block

Work! You, stupid!

The work should be here

01.

02.

03.

04.

05.

09

Page 10: Visualizing code bases

It's life, Jim, but not as we know it!

10

Page 11: Visualizing code bases

Code is data!11

Page 12: Visualizing code bases

Well, big data12

Page 13: Visualizing code bases

Snapshot

13

Page 14: Visualizing code bases

Temporal

14

Page 15: Visualizing code bases

First steps15

Page 16: Visualizing code bases

Count thelines!

16

Page 17: Visualizing code bases

Size does matterGives you an estimate (on how much reading is needed).

Most of the code bases are polyglot. Ratio between languages can

tell a lot.

Ratio between test code, comments, blank lines is also interesting.

••

17

Page 18: Visualizing code bases

cloc

18

Page 19: Visualizing code bases

Usagecloc ‐‐help

cloc ‐‐write‐lang‐def=lang.defs

01.

02.

19

Page 20: Visualizing code bases

Usagecloc ‐‐csv 

     ‐‐quite 

     ‐‐progress‐rate=0

     ‐‐ignored=files.ignored 

     ‐‐exclude‐dir=test,build

     ‐‐read‐lang‐def=lang.defs 

     ‐‐out=data.csv

     .

01.

02.

03.

04.

05.

06.

07.

08.

20

Page 21: Visualizing code bases

Language definitionsGradle

    filter remove_matches ^\s*//

    filter remove_inline //.*$

    filter call_regexp_common C

    extension gradle

    3rd_gen_scale 4.10

01.

02.

03.

04.

05.

06.

21

Page 22: Visualizing code bases

Where are thepictures?

22

Page 23: Visualizing code bases

We havestats, let'splot them!

23

Page 24: Visualizing code bases

Excel?Probably not.

24

Page 25: Visualizing code bases

Pie charts areboring!

25

Page 26: Visualizing code bases

Infographics!26

Page 27: Visualizing code bases

d3.js

27

Page 28: Visualizing code bases

d3.jsJavascript library for data visualizations

Tons of examples

Many libraries built on top of d3.js

Several books

••••

28

Page 29: Visualizing code bases

Example29

Page 30: Visualizing code bases

Many alternativesvis.js

raphael.js

sigma.js

many, many, many more

••••

30

Page 31: Visualizing code bases

Tableau Public

31

Page 32: Visualizing code bases

Tableau Public

32

Page 33: Visualizing code bases

Tableau Public

33

Page 34: Visualizing code bases

infogr.am

34

Page 35: Visualizing code bases

infogr.am

35

Page 36: Visualizing code bases

Temporalanalysis

36

Page 37: Visualizing code bases

GitHub

37

Page 38: Visualizing code bases

GitHub

38

Page 39: Visualizing code bases

FishEye

39

Page 40: Visualizing code bases

GourceSoftware projects are displayed by Gource as an animated tree with

the root directory of the project at its centre.

Directories appear as branches with files as leaves.

Developers can be seen working on the tree at the times they

contributed to the project.

“40

Page 41: Visualizing code bases

Launch gourcegource ‐s 0.1 ‐1280x720 

gource ‐‐output‐custom‐log log1.txt 

gource ‐s 0.1 ‐1280x720 log1.txt

01.

02.

03.

41

Page 42: Visualizing code bases

Log format1444125624|Luke Daley|M|/ratpack‐core/.../WiretapPublisher.java

1444125624|Luke Daley|M|/ratpack‐core/.../YieldingPublisher.java

1444306114|Stian Lindhom|M|/ratpack‐manual/.../13‐http.md

1444312172|Andrey Antukh|M|/ratpack‐core/.../WebSocketEngine.java

01.

02.

03.

04.

42

Page 43: Visualizing code bases

Demo43

Page 44: Visualizing code bases

Metrics44

Page 45: Visualizing code bases

SonarQube

45

Page 46: Visualizing code bases

Demo46

Page 47: Visualizing code bases

Supported langauges IABAP (comercial)

Android

C/C++ (comercial)

C#

COBOL (comercial)

Flex

••••••

47

Page 48: Visualizing code bases

Supported langauges IIGroovy

Java

JavaScript

Objective­C (comercial)

PHP

•••••

48

Page 49: Visualizing code bases

Supported langauges IIPL/I (comercial)

PL/SQL (comercial)

Python

RPG (comercial)

Swift (comercial)

•••••

49

Page 50: Visualizing code bases

Supported langauges IIVB.NET (comercial)

Visual Basic 6 (comercial)

Web (HTML, JSP/JSF)

XML

50

Page 51: Visualizing code bases

Extracting data

51

Page 52: Visualizing code bases

Structure52

Page 53: Visualizing code bases

Saikurohttps://github.com/ThoughtWorksStudios/saikuro_treemap

https://www.youtube.com/watch?v=iiIytERhV9o••

53

Page 54: Visualizing code bases

Structure101

54

Page 55: Visualizing code bases

Stan4j55

Page 56: Visualizing code bases

Graphs are everywhere!

56

Page 57: Visualizing code bases

AST

57

Page 58: Visualizing code bases

jQAssistantjQAssistant is a QA tool which allows the definition and validation of

project specific rules on a structural level.

It is built upon the graph database Neo4j and can easily be plugged

into the build process to automate detection of constraint violations

and generate reports about user defined concepts and metrics.

“58

Page 59: Visualizing code bases

Query your codeMATCH

  (class:Class)‐[:DECLARES]‐>(method:Method)

RETURN

  class.fqn, count(method) as Methods

ORDER BY

  Methods DESC

LIMIT 20

01.

02.

03.

04.

05.

06.

07.

59

Page 60: Visualizing code bases

neo4j

60

Page 61: Visualizing code bases

Demo61

Page 62: Visualizing code bases

That's it!62

Page 63: Visualizing code bases

ConclusionExtract data from your code!

Visualize it!

Search for new facts and knowledge!

•••

63

Page 64: Visualizing code bases

Readingmaterial

64

Page 65: Visualizing code bases

D3 Cookbook

65

Page 66: Visualizing code bases

D3 Tips & Tricks

66

Page 67: Visualizing code bases

Metrics and models in SQE

67

Page 68: Visualizing code bases

Software metrics and metrology

68

Page 69: Visualizing code bases

Cool infographics

69

Page 70: Visualizing code bases

The infographic history of the world

70

Page 71: Visualizing code bases

Infographica

71

Page 72: Visualizing code bases

Information is beautiful

72

Page 73: Visualizing code bases

Knowledge is beautiful

73

Page 74: Visualizing code bases

Show me numbers

74

Page 75: Visualizing code bases

Links: imageshttp://abstrusegoose.com/432

http://camarenaphoto.tumblr.com/post/112238079516/its­life­jim­but­

not­as­we­know­it­spock

http://technology.ie/big­data­looks­like/

http://www.informationisbeautiful.net/visualizations/million­lines­of­

code/

http://githut.info/

http://emmanueloga.com/2013/10/07/Graphs­are­Everywhere­An­

overview­of­GraphConnect­San­Francisco­2013.html

••

••

••

75

Page 76: Visualizing code bases

Links: toolshttps://github.com/AlDanial/cloc

http://gource.io/

http://d3js.org/

http://visjs.org/

••••

76

Page 77: Visualizing code bases

Links: toolshttp://www.sonarqube.org/

https://www.atlassian.com/pt/software/fisheye/overview

http://jqassistant.org/

http://neo4j.com/

••••

77

Page 78: Visualizing code bases

Links: toolshttps://github.com/ThoughtWorksStudios/saikuro_treemap

https://www.youtube.com/watch?v=iiIytERhV9o••

78

Page 79: Visualizing code bases

Danke schön!79

Page 80: Visualizing code bases

Thank you!80

Page 81: Visualizing code bases

Questions?81