Decisions, Open Source, and Graph Theory

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

.*/%&91-04*0/

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

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

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

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 ﬁelds of study. 5&3.1016-"3*;&%*/5)&T

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

8&--40350'

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

)$* 8*5)

*$"/)";64&3

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

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

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

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

-JLFSU4DBMFT 4FSJPVTMZ XIZEPFTUIJTOFFEBOBNF

-JLFSU -JLFSU

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

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

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

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

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

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

"--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&

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

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.

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

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!

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

"DUVBMMZ *U`TOPUTPCBE

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

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

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" }

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

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

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

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 │ └───────┴───────────┴──────────┴──────────┴──────────┴───────────┘

AND THUS MEANINGFUL GRAPHS

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

1"64&'03 %&.0

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

HJUIVCDPNOPEFKJUTVCSPXTFOQNPSH

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

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

ANALYZE ALL THE THINGS! *TIPVMEVTFTUBUJDBOBMZTJTXJUI

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

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

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

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

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

How the what exactly? *TIPVMEVTFTUBUJDBOBMZTJTXJUI

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

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

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

Decisions, Open Source, and Graph Theory

Decisions, Open Source, and Graph Theory

More Decks by Charlie Robbins

Other Decks in Technology

Featured

Transcript