VISUALIZATION SOFTWARE FOR HIERARCHICAL TREE OF WEB COMPONENTS FROM NEXT.JS PAGE ROUTER SOURCE CODE
This final project produces software for visualizing the hierarchical tree of web components from the Next.js page router source code. There are two visualization display options: page routes only or page routes along with the component hierarchy. This software is targeted at junior developers to...
Saved in:
| Main Author: | |
|---|---|
| Format: | Final Project |
| Language: | Indonesia |
| Online Access: | https://digilib.itb.ac.id/gdl/view/85012 |
| Tags: |
Add Tag
No Tags, Be the first to tag this record!
|
| Institution: | Institut Teknologi Bandung |
| Language: | Indonesia |
| Summary: | This final project produces software for visualizing the hierarchical tree of
web components from the Next.js page router source code. There are two
visualization display options: page routes only or page routes along with the
component hierarchy. This software is targeted at junior developers to help them
understand the structure of React/Next.js.
React is a component-based web interface development library. React is
currently widely used in conjunction with the Next.js framework to simplify the
development process. The modular nature of React components and file-system-
based page routing in Next.js can cause the source code to become complex as the
web application grows larger. Software visualization plays an important role in
helping developers understand the structure of web applications. Currently, there
are three popular libraries for visualizing React/Next.js, namely React Developer
Tools, Next Route Visualizer, and React Bratus. However, there is no library
capable of visualizing both page routes and components from the Next.js page
router source code.
The development process consists of three stages: data acquisition, analysis,
and visualization. The data acquisition stage uses Node File System to extract the
source code, searching for React files. The analysis stage uses Babel Parser. At this
stage, parsing is performed to obtain the component hierarchy and page route
hierarchy. The visualization stage uses React Flow to display the visualization.
Testing is conducted by comparing the visualization results with the source
code. The input for testing is a Reddit clone website taken from a public repository.
The output of the test is the visualization of the page routes and the components
within them. The test results show that the generated visualization is consistent with
the Next.js source code. |
|---|