We're sorry but this page doesn't work properly without JavaScript enabled. Please enable it to continue.
Feedback

Visualize the NPM dependencies city ecosystem of your node project in VR

00:00

Formal Metadata

Title
Visualize the NPM dependencies city ecosystem of your node project in VR
Title of Series
Number of Parts
542
Author
License
CC Attribution 2.0 Belgium:
You are free to use, adapt and copy, distribute and transmit the work or content in adapted or unchanged form for any legal purpose as long as the work is attributed to the author in the manner specified by the author or licensor.
Identifiers
Publisher
Release Date
Language

Content Metadata

Subject Area
Genre
Abstract
From the minute 16:50 of video does not have audio. In this talk we present how to visualize the NPM dependencies ecosystem of your node project using the elevated city of BabiaXR, in VR using the webXR standards. We will start with a step-by-step tutorial on how to retrieve the needed data from the node project, and how to build a VR scene for the browser using only a few lines of HTML, including the BabiaXR toolset based on A-Frame. We will analyze the important features of the project, such the license usage, vulnerabilities, community, and employment of the dependencies installed. All of these metrics are mapped to building aspects (height, area, and color). The continuous emergence of OSS web development projects makes the \npm network a field of study and most important the dependencies that these projects install, adding community, vulnerabilities, or size issues to the software development process. NPM registry is a network where most web developers upload their packages, this network has been shown to grow with time. The need to control these ecosystem dependencies is an active field in academia and industry. We present a VR city for analyzing the NPM dependencies of a node project with the goal of understanding the information about the licenses, vulnerabilities, community, and employment of the dependencies installed in order to detect and prevent issues derivated from there. For creating the VR scene in the browser, we will use BabiaXR, a toolset for data visualization in VR for the web, in this case, we will focus on the elevated city, being the buildings the packages installed by npm, and the level of the dependency represented as an elevated quarter of the city. In this talk, we will follow a step-by-step tutorial for retrieving the data and needed metrics and we will show how to use this VR scene and how to change these metrics in real time, updating the city in order to see information about the license usage, vulnerabilities, community or package employment. This talk requires basic knowledge of the NPM ecosystem, nothing else beyond that.
14
15
43
87
Thumbnail
26:29
146
Thumbnail
18:05
199
207
Thumbnail
22:17
264
278
Thumbnail
30:52
293
Thumbnail
15:53
341
Thumbnail
31:01
354
359
410
SoftwareCodeSystem programmingAreaMetric systemPhysical systemBuildingHierarchyPrinciple of localityOrientation (vector space)SpiralAlgorithmElement (mathematics)Interactive televisionSource codeSelf-organizationSpiralBuildingAlgorithmVisualization (computer graphics)Source codeCharacteristic polynomialVirtual realityStudent's t-testPrototypeProjective planeLevel (video gaming)Java appletPhysical systemCASE <Informatik>Metric systemCodeWeb 2.0Revision controlDemo (music)NeuroinformatikGraph coloringAreaComputer animation
Color managementGamma functionCue sportsEmailHypothesisDirection (geometry)VisualizationComputer animation
Gamma functionProjective planeGreatest elementDemo (music)Cartesian coordinate systemGraph coloringLevel (video gaming)Different (Kate Ryan album)BuildingFormal grammarSoftware engineeringUser interfaceCASE <Informatik>Computer animation
Graphic designDew pointSoftware protection dongleBuildingLevel (video gaming)Visualization (computer graphics)BuildingCore dumpProjective planeComputer animationDiagram
Demo (music)RWE DeaGraph (mathematics)Asynchronous Transfer ModeGame theoryGamma functionDew pointGraphic designDiscrete element methodDampingDemo (music)BuildingAreaCodeVolume (thermodynamics)NumberCharacteristic polynomialMetric systemLine (geometry)Visualization (computer graphics)Total S.A.CuboidComputer animation
System callGamma functionRWE DeaUniform resource locatorDiscrete element methodRow (database)PrototypeNumberType theoryDefault (computer science)Graph coloringBuildingMetric systemComputer animation
Dynamic random-access memoryGraph coloringRight angleComputer animation
Computer wormGamma functionMeta elementComputer-generated imageryDampingDiscrete element methodMetric systemCategory of beingMultiplication signGraph coloringCASE <Informatik>Attribute grammarProjective planeRevision controlLevel (video gaming)Computer animation
Data Encryption StandardGamma functionGraphic designBuilding1 (number)Computer animation
Drum memoryDew pointNo free lunch in search and optimizationGraphic designMetric systemRepository (publishing)NumberArithmetic meanScripting languageLevel (video gaming)Visualization (computer graphics)Uniqueness quantificationVulnerability (computing)Computer animation
Discrete element methodVisualization (computer graphics)InformationNumberComputer animation
Wireless Markup LanguageGraphic designDew pointNumberRepository (publishing)Computer animation
Form (programming)Graphic designDegree (graph theory)Dew pointMetric systemAreaLine (geometry)Total S.A.Virtual realityLink (knot theory)Projective planeVisualization (computer graphics)Graph (mathematics)Set (mathematics)Computer animation
User interfaceTable (information)VirtualizationGame controllerDemo (music)TouchscreenInformationNeuroinformatikComputer animation
Gamma functionAreaTotal S.A.Metric systemLine (geometry)Decision tree learningDemo (music)Demo (music)Projective planeComputer animation
Graphic designRWE DeaPrisoner's dilemmaTotal S.A.Metric systemAreaLine (geometry)PermianMenu (computing)User interfaceVertex (graph theory)Computer animation
Gamma functionElectronic mailing listCartesian coordinate systemCodeVulnerability (computing)Repository (publishing)
Code
CodeUniform resource locatorScripting languageComputer fileComputer-generated imagery
Frame problemContent (media)Acoustic shadowRotationSphereRadiusCylinder (geometry)Clique-width
Digital filterNetwork topologyCylinder (geometry)Computer network
Cylinder (geometry)Computer networkComputer animationDiagram
Pole (complex analysis)Computer animation
Program flowchart
Transcript: English(auto-generated)
Got it? Hey, thank you for coming and thank you to the organizers as well for organizing this
FOSDEM and this JavaScript Dev Room. I'm Navid Moreno. I'm a PhD student at the Universidad Refran Carlos in Spain, Madrid. And I'm going to present you how to visualize the NPM dependency city ecosystem of Junot project in virtual reality.
I would like to say that this is not a technical talk. It's just a prototype that I designed. It's more related to academia and I'm a PhD student. So it's kind of showing new things and I have your opinion on probably if this work is useful or not. So first of all,
I'm talking about a city. How many of you know something about code city? Raise your hand. Code city? No? One, two, three. Okay, so the city metaphor in visualization is just to take the characteristics and layout of the city and then represent something with
them. And the city layout just means quarters and buildings. And in this case code city is one of the most known tool that uses this metaphor for visualizing Java software code. In this case, each building is a
source code of the Java project and the quarter is the level of the source code in the package of the Java project. So in this case we developed a new version of this city metaphor called city visualization using web technologies. It's related to the last talk that Fabian
gave us. We use WebXR and WebGL and everything related to web in this case is A-Frame. That's how many of you know of A-Frame? Probably
more, right? So we changed this metaphor a little bit, changing the algorithm of the layout of the buildings. We use a spiral algorithm instead of a pre-mapped layout because we want to reorganize the buildings in a different way because the layout is, the pre-mapped layout is too fixed and
when you have, when you want to add a new building there there are many problems. So in this visualization we have metrics that we can represent in the buildings and in the quarters. The quarters represent a three layout because, you know, you have quarters then you can have quarters at the top of the quarters and then and so.
And the buildings have different metrics like the area of the building, the height of the building, or the color of the building. We are using this metric to represent the NPM-dependent physical system of a project. So if you are in your computer right now or in your mobile phone, I
want to invite you to go to that URL or scan G-square and then visit this live demo and then you can follow the demo with me. So this is the demo. So this is the city, oh, sorry.
It's tinyurl.com slash Babia Fosden Babia is the name of the tool that I developed in my thesis. Just a minute. With your mobile phone you won't have as many as the direction that you can have with your computer, but you can have an idea and you can visualize the city.
So this is what you can see in the demo. This is the dependency city of a project. In this case is the user interface of Shorty Hut. That is a project for doing things. It's under the grammar lab project. So in this case, in this city
each building represents a dependency of the project. And we can, what we can see here is that, okay, there are buildings with different colors and so, but the first thing that we can see here is that the quarters are kind of elevated. We can see here a quarter, what this big quarter, this quarter, this quarter, this quarter, this quarter, and this quarter.
This quarter means the dependency level that your application has. And this first quarter, the big one, the first one is like the bottom or the package.json of the JMPO project where you define the first level of dependencies. Okay?
So we have the elevated city, we have to be clear of this. The second thing that we can see in this city is where the buildings are. Where the buildings, the quarter that the building is laying out means that this
this building or this package is in that level, in that dependency level. Okay? For instance, this building is in the first level of dependencies that you probably define this package in your package.json in your node project or whatever. And these three buildings that are laying out in this level
belong to the third level of dependencies of your project. Okay? I'm explaining this because it's just a matter of or explaining how the visualization works. And some buildings go through a quarter, which means that the building that goes through a quarter is
the owner of the dependencies that are in that building, in that quarter, sorry. In other words, this package is going through this quarter, so the dependencies this, this, and these are sub-dependencies of this quarter, of this building, sorry.
Okay? Again, for instance, this package is going through this quarter. So this dependency, this dependency, this dependency are two dependencies of this building, of this package. It has to be clear because it's kind of the core of this visualization. And
if you are in the demo you probably notice that there is kind of some buttons here that are the metrics available in this visualization. These metrics that are here only change the characteristics of the buildings. Okay?
So we are going to focus on the third level, first on this row, that is the heap, the height. I don't know if you can see clear what it says here. It's this, okay. Hey this means the height of the buildings and this now the height of the building represent the age of the package in number of days.
Okay, we have this metric, this numeric metric in height. The area of the buildings we have three metrics. Now we select this one that is log slash age, which means the lines of code of
the package divided by the age in days and you are probably wondering why divided by the age number of days because if you divide, if you multiply the height of the area of a building, of a box you have the volume. So if you compute these two metrics multiplying them you can have as a third metric the volume, as computed metric in this case, the volume of the buildings will be the lines of code in total.
But we can change this metric into size in bytes divided by age. We can click on the on the metric then the visualization is updated.
And the third one is the number of commit that the package has divided by the age in days. Probably this is not as important because in this project, on this prototype we are focused on the color of the buildings and now you realize why there are many metrics in the row of color. So
by default what you see as a color building is the type of license that the package has. In this case, we can see that there are many packages with a purple color, kind of a purple and then on the right we have this legend that says which
license is using. So with this color and this city we can have a quick overview of the packages that are using the same licenses or the same license or if a package is using a license that we don't want to have in our projects or so.
That's probably one of the goals of this metric color. Then we have two metrics that is time installed and time reappeared. These are not category metrics. These are numeric metrics. These metrics follow a heat map color from blue to red and this is interesting because
I think that you know pretty well the NPM ecosystem. When you are defining when you are installing a package in NPM, if NPM found a dependency
more than once, in the same version NPM will only install the dependency once. Right? We always know that. All of us know that. But if NPM found the same dependency defined in two different versions, then NPM will install the dependency twice in this case. So
this metric represents, as the color of the building, how many times the dependency of the package is installed. In other words, how many times the dependency is defined in different versions. And this one is how many times the dependency appears in the project.
There are less diversions because we are using, for instance, we added something in GraphQL and we use GraphQL in many things. Where we find many GraphQL, I don't know a package that uses GraphQL, but then we use another package that uses GraphQL as well. So this represents how many times this package appears.
How many times it stands there. And these two metrics are completely related to the first line that is the attributes line, I call it, and it's used for changing the transparency or the wireframe of the build, the wireframe features of the buildings.
Because now you notice that there are some buildings that are kind of transparent buildings, which means that these buildings are not installed. Okay, these buildings are replicas and only the solid ones are the ones that are in this installed, okay? And if we go with our
mouse or with our VR controller, over a building, we can see that if we hover a building with the mouse, we see here that this dependency is GraphQL and then some other buildings are highlighted in white as well, but only one of them, that is this one, is solid.
So it means GraphQL is defined in many many locations, but only installs one that is there. But appears nine times. We have also metrics related to the community of the, or the package of the community behind the repository of the package.
The first one is last at days, which means the days, the number of days since the last commit, so in a heat map from blue to red, if the package is red, means that probably this package has no activity in the last
maybe, for example, this, we can see this package here, this is script 002, 2000 years since the last commit, so probably this is kind of a smell, probably, in this kind of visualization. Also, we have the number of commits in the last year of the package, in the repository of the package,
the number of unique committers in the last year of the repository of the package, and of course the number of vulnerabilities that we can find with the npm audit tool as well, but this visualization has the goal of
merge all the information that we can retrieve from the package and then show it in this CD. And the last one is the number of issues radio, that is just the number of issues open of the repository divided by the number of issues closed in all the story of the other package.
So this is the first overview of the tool. I invite you to play with it. I was really quick. Of course, in the slides, there are plenty of QRs with
links to the documentation, links to the step-by-step tutorial in order to have this deep visualization with your own project, because what you need is just to have a project installed and then run a set of tools that I'm going to spread right now. But I said that this is for virtual reality. So
in academia, some researchers validated the city metaphor in virtual reality, agreeing that the notion of having a city in a table or something like that helps the user or the participant of a pyramid or whatever to have better information than using a computer or using a 2D screen. So that's the reason behind this
research. So in this case, we are using a MetaQuest 2 glasses. This is an experiment and then we have in the left controller the user interface that we already saw in the demo.
And then we can see that when we click on the buttons, you see that the city is updated instantly. I didn't tell you, but there is a second line, the user interface, because the demo, I forgot that, the demo
has four different projects to analyze in this city. Now we select the shorting hat, that is the project that we are selecting in this project, but also we have the data from the PM2 package, if you know PM2, you can click on it, we can click on the PM2 project and then the city is automatically updated.
We have also data from the portender user interface and the GitHub desktop user interface, because it's developed in Node. We're going to focus on the data, just to finish. This QR will redirect you to
this repository where I have all the codes that I use for having the data, because this is really, really easy to replicate, because what you saw here is just an HTML using A-Frame, using Babia, that is the tool that I developed, and then a JSON with all the data.
So now we're going to talk about how to produce a JSON, but you can produce a JSON whatever you want. So it's not a matter of, you can follow this tutorial or not. So the first step is to have your NPM package or application installed, of course, because we are representing the NPM
dependencies application. The second step is to use NPM to have the dependencies list and the vulnerabilities list.
Yeah, just a simple question.