75
01

Visualizing code bases for ITAKE 2016

Embed Size (px)

Citation preview

Page 1: Visualizing code bases for ITAKE 2016

01

Page 2: Visualizing code bases for ITAKE 2016

About me02

Page 3: Visualizing code bases for ITAKE 2016

Andrey AdamovichJava/Groovy developer, clean coder

DevOps guy, automation junkie

Co­author of Groovy 2 Cookbook

Co­organizer of @latcraft and @devternity

Coach at @devchampions

Twitter: @codingandrey

••••••

03

Page 4: Visualizing code bases for ITAKE 2016

Let's start!04

Page 5: Visualizing code bases for ITAKE 2016

BackgroundFind new clients

Face big code bases

Need quick analysis

Need quick results

••••

05

Page 6: Visualizing code bases for ITAKE 2016

Code sizeGoogle: 2 billions LOC

Facebook: 61 million LOC

Me: from 20K to 2M LOC

•••

06

Page 7: Visualizing code bases for ITAKE 2016

I hate reading...

07

Page 8: Visualizing code bases for ITAKE 2016

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

08

Page 9: Visualizing code bases for ITAKE 2016

Code is data!09

Page 10: Visualizing code bases for ITAKE 2016

Well, big data10

Page 11: Visualizing code bases for ITAKE 2016

Snapshot

11

Page 12: Visualizing code bases for ITAKE 2016

Temporal

12

Page 13: Visualizing code bases for ITAKE 2016

First steps13

Page 14: Visualizing code bases for ITAKE 2016

Count thelines!

14

Page 15: Visualizing code bases for ITAKE 2016

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

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

tell something.

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

••

15

Page 16: Visualizing code bases for ITAKE 2016

cloc

16

Page 17: Visualizing code bases for ITAKE 2016

Usagecloc ‐‐help

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

01.

02.

17

Page 18: Visualizing code bases for ITAKE 2016

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.

18

Page 19: Visualizing code bases for ITAKE 2016

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.

19

Page 20: Visualizing code bases for ITAKE 2016

Where are thepictures?

20

Page 21: Visualizing code bases for ITAKE 2016

We havestats, let'splot them!

21

Page 22: Visualizing code bases for ITAKE 2016

Excel?Probably not.

22

Page 23: Visualizing code bases for ITAKE 2016

Pie charts areboring!

23

Page 24: Visualizing code bases for ITAKE 2016

Infographics!24

Page 25: Visualizing code bases for ITAKE 2016

d3.js

25

Page 26: Visualizing code bases for ITAKE 2016

d3.jsJavascript library for data visualizations

Tons of examples

Many libraries built on top of d3.js

Several books

••••

26

Page 27: Visualizing code bases for ITAKE 2016

Example27

Page 28: Visualizing code bases for ITAKE 2016

Demo28

Page 29: Visualizing code bases for ITAKE 2016

Many alternativesvis.js

raphael.js

sigma.js

many, many, many more

••••

29

Page 30: Visualizing code bases for ITAKE 2016

Tableau Public

30

Page 31: Visualizing code bases for ITAKE 2016

Tableau Public

31

Page 32: Visualizing code bases for ITAKE 2016

Tableau Public

32

Page 33: Visualizing code bases for ITAKE 2016

Design yourown!

33

Page 34: Visualizing code bases for ITAKE 2016

SVG + Inkscape

34

Page 35: Visualizing code bases for ITAKE 2016

Home­made Inforgraphics

35

Page 36: Visualizing code bases for ITAKE 2016

Temporalanalysis

36

Page 37: Visualizing code bases for ITAKE 2016

GitHub

37

Page 38: Visualizing code bases for ITAKE 2016

GitHub

38

Page 39: Visualizing code bases for ITAKE 2016

FishEye

39

Page 40: Visualizing code bases for ITAKE 2016

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 for ITAKE 2016

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 for ITAKE 2016

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 for ITAKE 2016

Demo43

Page 44: Visualizing code bases for ITAKE 2016

Code MaatCode Maat is a command line tool used to mine and analyze data from

version­control systems“44

Page 45: Visualizing code bases for ITAKE 2016

Launch Maatgit log ‐‐pretty=format:'[%h] %aN %ad %s' \

    ‐‐date=short ‐‐numstat ‐‐after=YYYY‐MM‐DD

01.

02.

45

Page 46: Visualizing code bases for ITAKE 2016

Launch Maatmaat ‐l git.log ‐c git ‐a summary 

maat ‐l ratpack_evo.log ‐c git ‐a revisions > ratpack_freqs.csv

python scripts/merge_comp_freqs.py ratpack_freqs.csv ratpack_lines.csv

01.

02.

03.

46

Page 47: Visualizing code bases for ITAKE 2016

Analysis typesabs­churn, age, author­churn, authors, communication, coupling,

entity­churn, entity­effort, entity­ownership, fragmentation, identity,

main­dev, main­dev­by­revs, messages, refactoring­main­dev,

revisions, soc, summary

47

Page 48: Visualizing code bases for ITAKE 2016

Demo48

Page 49: Visualizing code bases for ITAKE 2016

Let's talk bigdata

49

Page 50: Visualizing code bases for ITAKE 2016

ElasticSearchDistributed, scalable, and highly available

Real­time search and analytics capabilities

Sophisticated RESTful API

•••

50

Page 51: Visualizing code bases for ITAKE 2016

Index data$ curl ‐XPUT 'http://localhost:9200/gitlog/commit/123345' ‐d '{

  "commitId" : "123345",

  "timestamp" : "2009‐11‐15T14:12:12",

  "message" : "git into es"

}'

01.

02.

03.

04.

05.

51

Page 52: Visualizing code bases for ITAKE 2016

KibanaFlexible analytics and visualization platform

Real­time summary and charting of streaming data

Intuitive interface for a variety of users

Instant sharing and embedding of dashboards

••••

52

Page 53: Visualizing code bases for ITAKE 2016

Kibana53

Page 54: Visualizing code bases for ITAKE 2016

Tag Cloudkibana plugin ‐i tagcloud ‐u https://github.com/stormpython/tagcloud/archive/master.zip01.

54

Page 55: Visualizing code bases for ITAKE 2016

Demo55

Page 56: Visualizing code bases for ITAKE 2016

Graphs are everywhere!

56

Page 57: Visualizing code bases for ITAKE 2016

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.

“57

Page 58: Visualizing code bases for ITAKE 2016

jQAssistantjqassistant scan ‐f binaries

jqassistant server

01.

02.

58

Page 59: Visualizing code bases for ITAKE 2016

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 for ITAKE 2016

neo4j

60

Page 61: Visualizing code bases for ITAKE 2016

Demo61

Page 62: Visualizing code bases for ITAKE 2016

That's it!62

Page 63: Visualizing code bases for ITAKE 2016

ConclusionExtract data from your code!

Visualize it!

Search for new facts and knowledge!

Become data scientist or data journalist!

••••

63

Page 64: Visualizing code bases for ITAKE 2016

Readingmaterial

64

Page 65: Visualizing code bases for ITAKE 2016

Your Code as a Crime Scene

65

Page 66: Visualizing code bases for ITAKE 2016

Metrics and Models in SQE

66

Page 67: Visualizing code bases for ITAKE 2016

Software Metrics and Metrology

67

Page 68: Visualizing code bases for ITAKE 2016

D3 Cookbook

68

Page 69: Visualizing code bases for ITAKE 2016

D3 Tips & Tricks

69

Page 70: Visualizing code bases for ITAKE 2016

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

••

••

••

70

Page 71: Visualizing code bases for ITAKE 2016

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

http://gource.io/

http://wettel.github.io/codecity­wof.html

https://github.com/adamtornhill/code­maat

http://d3js.org/

http://visjs.org/

••••••

71

Page 72: Visualizing code bases for ITAKE 2016

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

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

https://www.elastic.co/products/elasticsearch

https://www.elastic.co/products/kibana

http://jqassistant.org/

http://neo4j.com/

••••••

72

Page 73: Visualizing code bases for ITAKE 2016

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

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

73

Page 74: Visualizing code bases for ITAKE 2016

Thank you!74

Page 75: Visualizing code bases for ITAKE 2016

Questions?75