Tweet
Tweet

Slide 1

Slide 1 text

%&$*4*0/4 01&/4063$& (3"1)5)&03:

Slide 2

Slide 2 text

.*/%&91-04*0/

Slide 3

Slide 3 text

And why should I pay attention? 8IPBSFZPVFYBDUMZ Founder & CEO at I’m on the Internet! !JOEFY[FSP

Slide 4

Slide 4 text

-*5&3"--:" ."45&3 0')$* "/%3&$&/5-:

Slide 5

Slide 5 text

)6."/$0.165&3 */5&3"$5*0/

Slide 6

Slide 6 text

Human–computer interaction (HCI) involves the study, planning, design and uses of the interaction between people (users) and computers. It is often regarded as the intersection of computer science, behavioral sciences, design, media studies, and several other fields of study. 5&3.1016-"3*;&%*/5)&T

Slide 7

Slide 7 text

)$*'*()54'035)&64&3

Slide 8

Slide 8 text

8&--40350'

Slide 9

Slide 9 text

Why the what precisely? )$*4UBUJD"OBMZTJT

Slide 10

Slide 10 text

)$* 8*5)

Slide 11

Slide 11 text

*$"/)";64&3

Slide 12

Slide 12 text

Because reasons I guess maybe? 8IZJTBXPSUIZ)$*UPQJD Source: modulecounts.com #&$"64&*5*45)& -"3(&4501&/4063$& 1-"5'03.803-%8*%&

Slide 13

Slide 13 text

How soon exactly? 8IZJTBXPSUIZ)$*UPQJD "40' OQN .BWFO EBZ EBZ 306()-:#:56&4%": :61

Slide 14

Slide 14 text

1-&"4&5&--.&"#065 :0633&4&"3$)456%:

Slide 15

Slide 15 text

Why the what precisely? 4."--(3061 0'&91&354 8IZJTBXPSUIZ)$*UPQJD

Slide 16

Slide 16 text

-JLFSU4DBMFT 4FSJPVTMZ XIZEPFTUIJTOFFEBOBNF

Slide 17

Slide 17 text

-JLFSU -JLFSU

Slide 18

Slide 18 text

Why the what precisely? .045&''&$5*7& .&5)0%464&% .045*/'3&26&/5-: 8IZJTBXPSUIZ)$*UPQJD

Slide 19

Slide 19 text

.0%6-&"65)034 "/%%&7&-01&34 )"7&26&45*0/4 "#065.0%6-&4 #&*/(%&7&-01&%

Slide 20

Slide 20 text

)08%08&%0#&55&3 )$*530/.645,/08

Slide 21

Slide 21 text

(3"1)4 36-& &7&3:5)*/( "306/% .&

Slide 22

Slide 22 text

/055)*4,*/% 0'(3"1)

Slide 23

Slide 23 text

5)&4&,*/%4 0'(3"1)4

Slide 24

Slide 24 text

"--0'5)&4&(3"1)4 "3&%*''&3&/5 6/%*3&$5&% 8&*()5&% %*3&$5&% 8*5)038*5)065 $:$-&4 53&&4 #*1"35"5&

Slide 25

Slide 25 text

53"/4103"5*0/ /&5803,4 */'03."5*0//&5803,4 .0-&$6-"3$)&.*453: 8*3&-&44/&5803,4 ."+03-&"(6&#"4"-- %&1&/%&/$:."/"(&.&/5

Slide 26

Slide 26 text

The G = (V,E) kind of graph %FQFOEFODZHSBQIT • Basic graph representation is not extremely helpful for visualizing package relationships. • But it does provide a basic structure for a graph search problem.

Slide 27

Slide 27 text

The G = (V,E) kind of graph %FQFOEFODZHSBQIT • We then add a colored edge from any node nA to nB if package A depends on package B. • Edges are colored by dependency type: dependencies or devDependencies • To build our graph, G, we add a node (or vertex) for every package. na nb nc nd

Slide 28

Slide 28 text

The G = (V,E) kind of graph %FQFOEFODZHSBQIT { "name": "package-a", "dependencies": { "package-b": "~1.0.4", "package-c": "~2.1.3" }, "devDependencies": { "package-d": "~3.1.2" }, "main": "./index.js" } na nb nc nd Now imagine this for 80,000+ packages!

Slide 29

Slide 29 text

"/05)&3.*/%&91-04*0/

Slide 30

Slide 30 text

"DUVBMMZ *U`TOPUTPCBE

Slide 31

Slide 31 text

Ok, so what is this useful for? %FQFOEFODZHSBQIT • There are tons of useful applications of dependency graphs. • Lets consider two. First: Codependencies

Slide 32

Slide 32 text

Well, technically co(*)dependencies. • Codependencies answer the question “people who depend on package A also depend on ...” ["package", "codep", "thru"] $PVDI%# $PEFQFOEFODJFT

Slide 33

Slide 33 text

The G = (V,E) kind of graph %FQFOEFODZHSBQIT Here we would say that package-b and package-c have a codependency relationship thru package-a na nb nc nd { "name": "package-a", "dependencies": { "package-b": "~1.0.4", "package-c": "~2.1.3" }, "devDependencies": { "package-d": "~3.1.2" }, "main": "./index.js" }

Slide 34

Slide 34 text

Thanks CouchDB! for  (var  dep  in  d)  {    dep  =  dep.trim();    for  (var  codep  in  d)  {        codep  =  codep.trim();        if  (dep  !==  codep)  {            emit([dep,  codep,  doc._id],  1)        }    } } • We can get all of this from a simple CouchDB view. $PEFQFOEFODJFT

Slide 35

Slide 35 text

Thanks CouchDB! group_level=3 &start_key=["winston"] &end_key=["winston",{}] $PEFQFOEFODJFT

Slide 36

Slide 36 text

The meat of the analysis • So this is all well and good, but what the heck are you doing?!?! For module NAME generate a matrix by: - Rank codependencies based on number of times they appear - For each codependency C in the SET of the top N: Rank SET - {C} by number of times they appear to create ROW[C] $PEFQFOEFODJFT

Slide 37

Slide 37 text

Understanding codependencies through winston $PEFQFOEFODJFT • This last step yields a matrix for the codependency relationship: ┌───────┬───────────┬──────────┬──────────┬──────────┬───────────┐ │ │ asyn… │ expr… │ opti… │ requ… │ unde… │ ├───────┼───────────┼──────────┼──────────┼──────────┼───────────┤ │ asyn… │ 0.0000 │ 553.0000 │ 534.0000 │ 837.0000 │ 1359.0000 │ ├───────┼───────────┼──────────┼──────────┼──────────┼───────────┤ │ expr… │ 553.0000 │ 0.0000 │ 314.0000 │ 365.0000 │ 648.0000 │ ├───────┼───────────┼──────────┼──────────┼──────────┼───────────┤ │ opti… │ 534.0000 │ 314.0000 │ 0.0000 │ 335.0000 │ 448.0000 │ ├───────┼───────────┼──────────┼──────────┼──────────┼───────────┤ │ requ… │ 837.0000 │ 365.0000 │ 335.0000 │ 0.0000 │ 786.0000 │ ├───────┼───────────┼──────────┼──────────┼──────────┼───────────┤ │ unde… │ 1359.0000 │ 648.0000 │ 448.0000 │ 786.0000 │ 0.0000 │ └───────┴───────────┴──────────┴──────────┴──────────┴───────────┘

Slide 38

Slide 38 text

Understanding codependencies through winston • Now we need to weight the matrix based on the overall appearance of these codependencies 240 | async | 0.2761 207 | underscore | 0.2382 163 | express | 0.1875 133 | request | 0.1530 126 | optimist | 0.1449 869 total $PEFQFOEFODJFT

Slide 39

Slide 39 text

Understanding codependencies through winston • To do this we go and calculate the codependencies for each of the members $PEFQFOEFODJFT 534 | async | 0.3274 448 | underscore | 0.2746 335 | request | 0.2053 314 | express | 0.1925 1631 total 015*.*45 1359 | underscore| 0.4139 837 | request | 0.2549 553 | express | 0.1684 534 | optimist | 0.1626 3283 total "4:/$

Slide 40

Slide 40 text

AND THUS MEANINGFUL GRAPHS

Slide 41

Slide 41 text

8"5

Slide 42

Slide 42 text

W O A

Slide 43

Slide 43 text

Reading the tea leaves of dense data visualization • The size of the arc represents the degree of the codependency relationship with the parent module. • The size of the chord represents the degree of the codependency relationship between each pair. • The color of the chord represents the “dominant” module between the pair. winston $PEFQFOEFODJFT

Slide 44

Slide 44 text

1"64&'03 %&.0

Slide 45

Slide 45 text

"--01&/4063$& 4FSJPVTMZXIBUFMTFEPQFPQMFEP JOEFY[FSPOQNDPEFQFOEFODJFT JOEFY[FSPOQNDPNQTUBUXXX

Slide 46

Slide 46 text

No content

Slide 47

Slide 47 text

No content

Slide 48

Slide 48 text

No content

Slide 49

Slide 49 text

HJUIVCDPNOPEFKJUTVCSPXTFOQNPSH

Slide 50

Slide 50 text

#655)"5`4 /05"--

Slide 51

Slide 51 text

/0 /05501)"54 "/%.0/"$-&4

Slide 52

Slide 52 text

ANALYZE ALL THE THINGS! *TIPVMEVTFTUBUJDBOBMZTJTXJUI

Slide 53

Slide 53 text

3*$)"3%/*90/ 8"45)&UI13&4*%&/5

Slide 54

Slide 54 text

3*$)"3%/*90/ 8"4"13&55:"8'6-13&4*%&/5

Slide 55

Slide 55 text

3*$)"3%/*90/ *4/`53&"--:5)&10*/5

Slide 56

Slide 56 text

3*$)"3%/*90/ (3"56*5064)&"%*/"+"3

Slide 57

Slide 57 text

4*-&/5."+03*5: 8&--5)&'&"30'" "/:8":

Slide 58

Slide 58 text

How the what exactly? *TIPVMEVTFTUBUJDBOBMZTJTXJUI

Slide 59

Slide 59 text

How do you make the sausage? *TIPVMEVTFTUBUJDBOBMZTJTXJUI $0%& "45 &413*." /08%05)"5'03 &7&3:4063$&'*-&*/ &7&3:%&1&/%&/5.0%6-&

Slide 60

Slide 60 text

GET TO THE POINT ALREADY CHARLIE! *TIPVMEVTFTUBUJDBOBMZTJTXJUI Using esprima and a dependency graph we were able to perform rudimentary analysis of hottest code paths. Gives author quick feedback instantly and avoids the silent majority

Slide 61

Slide 61 text

"--01&/4063$& :VQKVTUMJLFCFGPSF JOEFY[FSPOQNTUBUJDTUBUT JOEFY[FSPOQNQJQFMJOF

Slide 62

Slide 62 text

'*/