Logo PTI Logo FedCSIS

Communication Papers of the 20th Conference on Computer Science and Intelligence Systems (FedCSIS)

Annals of Computer Science and Information Systems, Volume 45

Static components dependency graph detection with evaluation metrics in React.js projects

DOI: http://dx.doi.org/10.15439/2025F5264

Citation: Communication Papers of the 20th Conference on Computer Science and Intelligence Systems (FedCSIS), M. Bolanowski, M. Ganzha, L. Maciaszek, M. Paprzycki, D. Ślęzak (eds). ACSIS, Vol. 45, pages 127–134 ()

Full text

Abstract. The popularity of libraries and frameworks for JavaScript and Typescript introduces completely new problems and tasks that can be solved using code analysis. Static type of this process has a plenty of applications, and despite of dynamic or hybrid methods, it has the significant advantages of simplicity, high performance and does not require a list of tests to work properly. One of the frameworks for the mentioned languages is React.js, which introduces a component-based architecture that allows the creation of isolated parts of the user interface in the form of functions or classes that meet specific requirements. In this paper, we describe an algorithm we have developed to detect relationships between components and create a dependency graph. Its performance was validated by comparison with a manually created graph, achieving an average F1 value of 0,95. We also conducted a performance analysis of the proposed solution. In order to correctly assess the impact of a component on the rest of the system both locally and globally, we have introduced five component evaluation metrics that provide important information when designing and changing the architecture of a front end application. The developed algorithm and metrics can be useful tools for software architects and engineers, providing information about design interdependencies and the influence of individual components on parts of the system.

References

  1. “Octoverse: The top programming languages: https://octoverse.github.com/2022/top-programming-languages, 2023. [Online]. Available: https://octoverse.github.com/2022/top-programming-languages
  2. “React, the library for web and native user interfaces: https://react.dev. [Online]. Available: https://react.dev
  3. “Angular framework website: https://angular.dev. [Online]. Available: https://angular.dev
  4. “Node.js website.” [Online]. Available: https://nodejs.org/en
  5. “React native website: https://reactnative.dev. [Online]. Available: https://reactnative.dev
  6. G. Antal, Z. Tóth, P. Hegedűs, and R. Ferenc, “Enhanced bug prediction in javascript programs with hybrid call-graph based invocation metrics,” 2024. [Online]. Available: https://arxiv.org/abs/2405.07244
  7. A. Feldthaus, T. Millstein, A. Møller, M. Schäfer, and F. Tip, “Tool-supported refactoring for javascript,” SIGPLAN Not., vol. 46, no. 10, p. 119–138, oct 2011. [Online]. Available: https://doi.org/10.1145/2076021.2048078
  8. V. Haratian, P. Derakhshanfar, V. Kovalenko, and E. Tüzün, “Refexpo: Unveiling software project structures through advanced dependency graph extraction,” 2024. [Online]. Available: https://arxiv.org/abs/2407.02620
  9. M. Chakraborty, R. Olivares, M. Sridharan, and B. Hassanshahi, “Automatic root cause quantification for missing edges in javascript call graphs (extended version),” 2022. [Online]. Available: https://arxiv.org/abs/2205.06780
  10. A. Feldthaus, M. Schäfer, M. Sridharan, J. Dolby, and F. Tip, “Efficient construction of approximate call graphs for javascript ide services,” in 2013 35th International Conference on Software Engineering (ICSE), 2013, pp. 752–761.
  11. T. Besker, H. Ghanbari, A. Martini, and J. Bosch, “The influence of technical debt on software developer morale,” Journal of Systems and Software, vol. 167, p. 110586, 2020. [Online]. Available: https://www.sciencedirect.com/science/article/pii/S0164121220300674
  12. D. Che, “Automatic documentation generation from source code,” Ph.D. dissertation, 01 2016.
  13. J. Jones, “Abstract syntax tree implementation idioms,” Pattern Languages of Program Design, 2003, proceedings of the 10th Conference on Pattern Languages of Programs (PLoP2003) http://hillside.net/plop/plop2003/papers.html. [Online]. Available: http://hillside.net/plop/plop2003/Papers/Jones-ImplementingASTs.pdf
  14. L. Kurant, “Component dependency graph.” [Online]. Available: https://github.com/lukaszkurantdev/components-dependency-graph
  15. I. Malavolta, K. Nirghin, G. L. Scoccia, S. Romano, S. Lombardi, G. Scanniello, and P. Lago, “Javascript dead code identification, elimination, and empirical assessment,” IEEE Transactions on Software Engineering, vol. 49, no. 7, pp. 3692–3714, 2023.
  16. A. Møller and M. Schwarz, “Automated detection of client-state manipulation vulnerabilities,” in 2012 34th International Conference on Software Engineering (ICSE), 2012, pp. 749–759.
  17. G. Antal, P. Hegedűs, Z. Tóth, R. Ferenc, and T. Gyimóthy, “Static javascript call graphs: A comparative study,” 2024. [Online]. Available: https://arxiv.org/abs/2405.07206
  18. A. M. Mir, M. Keshani, and S. Proksch, “On the effectiveness of machine learning-based call graph pruning: An empirical study,” 2024. [Online]. Available: https://arxiv.org/abs/2402.07294
  19. A. M. Bogar, D. M. Lyons, and D. Baird, “Lightweight call-graph construction for multilingual software analysis,” 2018. [Online]. Available: https://arxiv.org/abs/1808.01213
  20. “Developer ecosystem javascript survey,” 2023. [Online]. Available: https://www.jetbrains.com/lp/devecosystem-2023/javascript/
  21. “React component analyzer library: https://github.com/activeguild/react-component-analyzer. [Online]. Available: https://github.com/activeguild/react-component-analyzer
  22. Z. Guo, M. Kang, V. Venkatakrishnan, R. Gjomemo, and Y. Cao, “Reactappscan: Mining react application vulnerabilities via component graph,” in Proceedings of the 2024 on ACM SIGSAC Conference on Computer and Communications Security, ser. CCS ’24. New York, NY, USA: Association for Computing Machinery, 2024, p. 585–599. [Online]. Available: https://doi.org/10.1145/3658644.3670331
  23. “Codeql: https://codeql.github.com. [Online]. Available: https://codeql.github.com
  24. “React developer tools: https://react.dev/learn/react-developer-tools. [Online]. Available: https://react.dev/learn/react-developer-tools
  25. L. Kurant, “Component dependency graph vscode plugin.” [Online]. Available: https://github.com/lukaszkurantdev/components-dependency-graph-vscode