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.
Speakers: David Moreno-Lumbreras