visualizing code bases for craftconf 2016 / full stack meetup budapest

79
01

Upload: andrey-adamovich

Post on 13-Apr-2017

397 views

Category:

Technology


0 download

TRANSCRIPT

Page 1: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

01

Page 2: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Hello!

02

Page 3: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

About me03

Page 4: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Andrey AdamovichJava/Groovy developer

DevOps guy, automation junkie

Co­author of Groovy 2 Cookbook

Co­organizer of @latcraft and @devternity

Coach at @devchampions

Twitter: @codingandrey

••••••

04

Page 5: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Let's start!05

Page 6: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

BackgroundFind new clients

Face big code bases

Need quick analysis

Need quick results

••••

06

Page 7: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Code sizeGoogle: 2 billions LOC

Facebook: 61 million LOC

Me: from 20K to 2M LOC

•••

07

Page 8: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

I hate reading...

08

Page 9: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Reading the 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 for CraftConf 2016 / Full Stack Meetup Budapest

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

10

Page 11: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Code is data!11

Page 12: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Well, big data12

Page 13: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Snapshot

13

Page 14: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Temporal

14

Page 15: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

First steps15

Page 16: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Count thelines!

16

Page 17: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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.

••

17

Page 18: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

cloc

18

Page 19: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Usagecloc ‐‐help

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

01.

02.

19

Page 20: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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 for CraftConf 2016 / Full Stack Meetup Budapest

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 for CraftConf 2016 / Full Stack Meetup Budapest

Where are thepictures?

22

Page 23: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

We havestats, let'splot them!

23

Page 24: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Excel?Probably not.

24

Page 25: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Pie charts areboring!

25

Page 26: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Infographics!26

Page 27: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

d3.js

27

Page 28: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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 for CraftConf 2016 / Full Stack Meetup Budapest

Example29

Page 30: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Demo30

Page 31: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Many alternativesvis.js

raphael.js

sigma.js

many, many, many more

••••

31

Page 32: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Tableau Public

32

Page 33: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Tableau Public

33

Page 34: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Tableau Public

34

Page 35: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

infogr.am

35

Page 36: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

infogr.am

36

Page 37: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Temporalanalysis

37

Page 38: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

GitHub

38

Page 39: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

GitHub

39

Page 40: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

FishEye

40

Page 41: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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.

“41

Page 42: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Launch gourcegource ‐s 0.1 ‐1280x720 

gource ‐‐output‐custom‐log log1.txt 

gource ‐s 0.1 ‐1280x720 log1.txt

01.

02.

03.

42

Page 43: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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.

43

Page 44: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Demo44

Page 45: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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

version­control systems“45

Page 46: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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

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

01.

02.

46

Page 47: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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.

47

Page 48: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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

48

Page 49: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Demo49

Page 50: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Let's talk bigdata

50

Page 51: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

ElasticSearchDistributed, scalable, and highly available

Real­time search and analytics capabilities

Sophisticated RESTful API

•••

51

Page 52: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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.

52

Page 53: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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

••••

53

Page 54: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Kibana54

Page 55: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Tag Cloudkibana plugin ‐i tagcloud \

‐u https://github.com/stormpython/tagcloud/archive/master.zip

01.

02.

55

Page 56: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Demo56

Page 57: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Structure57

Page 58: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Structure101

58

Page 59: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Demo59

Page 60: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Graphs are everywhere!

60

Page 61: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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.

“61

Page 62: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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.

62

Page 63: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

neo4j

63

Page 64: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Demo64

Page 65: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

That's it!65

Page 66: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

ConclusionExtract data from your code!

Visualize it!

Search for new facts and knowledge!

•••

66

Page 67: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Readingmaterial

67

Page 68: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Your Code as a Crime Scene

68

Page 69: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Metrics and Models in SQE

69

Page 70: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Software Metrics and Metrology

70

Page 71: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

D3 Cookbook

71

Page 72: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

D3 Tips & Tricks

72

Page 73: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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

••

••

••

73

Page 74: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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/

••••••

74

Page 75: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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/

••••••

75

Page 76: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

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

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

76

Page 77: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Köszönöm!77

Page 78: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Thank you!78

Page 79: Visualizing code bases for CraftConf 2016 / Full Stack Meetup Budapest

Questions?79