Decisions, Open Source, and Graph Theory

A bit of a rehash of my LXJS but with a focus on more decision HCI and less on the mechanics of the underlying technology.

1. %&$*4*0/4 01&/
   4063$& (3"1)
   5)&03:
2. .*/%
   &91-04*0/
3. And why should I pay attention? 8IP
   BSF
   ZPV
   FYBDUMZ Founder & CEO at I’m on the Internet! !JOEFY[FSP
4. -*5&3"--:
   "
   ."45&3 0'
   )$* "/%
   3&$&/5-:
5. )6."/$0.165&3 */5&3"$5*0/
6. 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
7. )$*
   '*()54
   '03
   5)&
   64&3
8. 8&--
   
   4035
   0'
   
9. 
   
   Why the what precisely? )$*
   
   4UBUJD
   "OBMZTJT
10. )$* 8*5)
11. *
    $"/
    )";
    64&3
12. Because reasons I guess maybe? 8IZ
    JT
    
    
    
    
    
    
    
    
    
    B
    XPSUIZ
    )$*
    UPQJD Source: modulecounts.com #&$"64&
    *5
    *4
    5)&
    -"3(&45
    01&/
    4063$&
    1-"5'03.
    803-%8*%&
13. How soon exactly? 8IZ
    JT
    
    
    
    
    
    
    
    
    
    B
    XPSUIZ
    )$*
    UPQJD "4
    0'
     OQN
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    .BWFO
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
    
          
    
    EBZ 
    
    EBZ 306()-:
    #:
    56&4%":
    :61
14. 1-&"4&
    5&--
    .&
    "#065 :063
    3&4&"3$)
    456%:
15. 
    
    Why the what precisely? 4."--
    (3061
    0'
    
    &91&354 8IZ
    JT
    
    
    
    
    
    
    
    
    
    B
    XPSUIZ
    )$*
    UPQJD
16. -JLFSU
    4DBMFT 4FSJPVTMZ
    XIZ
    EPFT
    UIJT
    OFFE
    B
    OBNF
    
17. -JLFSU -JLFSU
18. 
    
    Why the what precisely? .045
    &''&$5*7& .&5)0%4
    64&% .045
    */'3&26&/5-: 8IZ
    JT
    
    
    
    
    
    
    
    
    
    B
    XPSUIZ
    )$*
    UPQJD
19. 
    
    
    .0%6-&
    "65)034
    
    
    "/%
    %&7&-01&34
    
    
    )"7&
    26&45*0/4
    
    
    "#065
    .0%6-&4
    
    
    #&*/(
    %&7&-01&%
20. )08
    %0
    8&
    %0
    #&55&3
    
    
    )$*
    530/
    .645
    ,/08
21. (3"1)4 36-& &7&3:5)*/( "306/% .&
22. /05
    5)*4
    ,*/% 0'
    (3"1)
23. 5)&4&
    ,*/%4 0'
    (3"1)4
24. "--
    0'
    5)&4&
    (3"1)4 "3&
    %*''&3&/5 6/%*3&$5&% 8&*()5&% %*3&$5&% 8*5)
    03
    8*5)065 $:$-&4 53&&4 #*1"35"5&
25. 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
26. The G = (V,E) kind of graph %FQFOEFODZ
    HSBQIT
    • Basic graph representation is not extremely helpful for visualizing package relationships. • But it does provide a basic structure for a graph search problem.
27. The G = (V,E) kind of graph %FQFOEFODZ
    HSBQIT
    • 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
28. The G = (V,E) kind of graph %FQFOEFODZ
    HSBQIT
    { "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!
29. "/05)&3
    .*/%
    &91-04*0/
30. "DUVBMMZ
    *U`T
    OPU
    TP
    CBE
31. Ok, so what is this useful for? %FQFOEFODZ
    HSBQIT
    • There are tons of useful applications of dependency graphs. • Lets consider two. First: Codependencies
32. Well, technically co(*)dependencies. • Codependencies answer the question “people who depend on package A also depend on ...” ["package", "codep", "thru"] 
    $PVDI%# $PEFQFOEFODJFT
33. The G = (V,E) kind of graph %FQFOEFODZ
    HSBQIT
    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" }
34. 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
35. Thanks CouchDB! group_level=3 &start_key=["winston"] &end_key=["winston",{}] $PEFQFOEFODJFT
36. 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
37. 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 │ └───────┴───────────┴──────────┴──────────┴──────────┴───────────┘
38. 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
39. 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:/$
40. AND THUS MEANINGFUL GRAPHS
41. 8"5
42. W O A       
    
    
43. 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
44. 1"64&
    '03 %&.0
45. 
    
    
    "--
    01&/
    4063$&
    
    
    4FSJPVTMZ
    XIBU
    FMTF
    EP
    QFPQMF
    EP
    
    
    JOEFY[FSPOQNDPEFQFOEFODJFT
    
    
    JOEFY[FSPOQNDPNQTUBUXXX
49. 
    
    
    HJUIVCDPNOPEFKJUTVCSPXTFOQNPSH
50. #65
    5)"5`4 /05
    "--
51. /0
    /05
    501
    )"54
    "/%
    .0/"$-&4
52. 
    
    ANALYZE ALL THE THINGS! *
    TIPVME
    VTF
    TUBUJD
    BOBMZTJT
    XJUI
    
53. 3*$)"3%
    /*90/ 8"4
    5)&
    UI
    13&4*%&/5
54. 3*$)"3%
    /*90/ 8"4
    "
    13&55:
    "8'6-
    13&4*%&/5
55. 3*$)"3%
    /*90/ *4/`5
    3&"--:
    5)&
    10*/5
56. 3*$)"3%
    /*90/ (3"56*5064
    )&"%
    */
    "
    +"3
57. 4*-&/5
    ."+03*5: 8&--
    5)&
    '&"3
    0'
    " "/:8":
58. 
    
    How the what exactly? *
    TIPVME
    VTF
    TUBUJD
    BOBMZTJT
    XJUI
    
59. 
    
    How do you make the sausage? *
    TIPVME
    VTF
    TUBUJD
    BOBMZTJT
    XJUI
    
    
    
    
    
    $0%& "45 &413*." /08
    %0
    5)"5
    '03 &7&3:
    4063$&
    '*-&
    */ &7&3:
    %&1&/%&/5
    .0%6-&
60. 
    
    GET TO THE POINT ALREADY CHARLIE! *
    TIPVME
    VTF
    TUBUJD
    BOBMZTJT
    XJUI
    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
61. 
    
    
    "--
    01&/
    4063$&
    
    
    :VQ
    KVTU
    MJLF
    CFGPSF
    
    
    JOEFY[FSPOQNTUBUJDTUBUT
    
    
    JOEFY[FSPOQNQJQFMJOF
62. '*/