[논문 리뷰] JSClassFinder: A Tool to Detect Class-like Structures in JavaScript

Leonardo Humberto Silva, Daniel Hovadick외 4명|arXiv (Cornell University)|2016. 02. 18.

Software Engineering Research참고 문헌 8인용 수 6

한 줄 요약

JSClassFinder는 추상 구문 트리(_AST_)의 정적 분석을 사용하여 JavaScript 코드 내의 클래스 유사 구조를 탐지하는 리엔지니어링 도구입니다. 이는 UML 다이어그램, 분포도, 표준 메트릭을 포함한 객체 지향 모델 구축을 가능하게 하며, 원래의 클래스 문법이 없는 레거시 JavaScript 시스템에 대해 시각화 및 메트릭 계산을 지원함으로써 소프트웨어 분석과 향후 ECMAScript 6로의 마이그레이션을 촉진합니다.

ABSTRACT

With the increasing usage of JavaScript in web applications, there is a great demand to write JavaScript code that is reliable and maintainable. To achieve these goals, classes can be emulated in the current JavaScript standard version. In this paper, we propose a reengineering tool to identify such class-like structures and to create an object-oriented model based on JavaScript source code. The tool has a parser that loads the AST (Abstract Syntax Tree) of a JavaScript application to model its structure. It is also integrated with the Moose platform to provide powerful visualization, e.g., UML diagram and Distribution Maps, and well-known metric values for software analysis. We also provide some examples with real JavaScript applications to evaluate the tool.

연구 동기 및 목표

• ES5에서 원래의 클래스 문법이 없음에도 불구하고 JavaScript 내의 클래스 유사 구조를 식별할 수 있는 도구의 부족을 보완하기 위해.
• 클래스, 메서드, 속성과 같은 객체 지향 엔티티를 모델링하여 JavaScript 시스템의 소프트웨어 분석을 지원하기 위해.
• Moose 플랫폼과의 통합을 통해 객체 지향 모델의 구조적 조직을 시각화하고 메트릭 기반의 통찰을 제공하기 위해.
• 더 나은 유지보수성을 위해 원형 기반 상속 패턴을 공식적인 클래스 모델로 역설계하기 위해.
• 향후 ECMAScript 6로의 마이그레이션을 지원하기 위해 새로운 클래스 문법과 일치하는 패턴을 식별하기 위해.

제안 방법

• Esprima를 사용하여 JavaScript 소스 코드를 AST로 파싱하고, 분석을 위해 JSON 형식의 AST로 변환하기.
• 생성자 함수가 속성과 메서드를 정의하는지 식별하고, 원형 기반 상속 관계를 추론함으로써 클래스 유사 구조를 탐지하기.
• 이름 및 구조적 패턴을 기반으로 속성과 메서드를 클래스 유사 엔티티 아래에 묶어 AST에서 객체 지향 모델을 구성하기.
• 결과 모델을 Moose 플랫폼과 통합하여 UML 클래스 다이어그램, 분포도, 트리 뷰 시각화를 가능하게 하기.
• 클래스 수(NOC), 메서드 수(NOM), 속성 수(NOA), 상속 계층 트리 깊이(DIT)와 같은 표준 소프트웨어 메트릭 계산하기.
• 사용자 인터페이스를 통해 Pharo 기반 인터페이스를 제공하여 모델을 로드하고, 사용자 정의 가능한 시각적 및 메트릭 필터를 통해 탐색 및 시각화 가능하게 하기.

실험 결과

연구 질문

• RQ1 ES5에서 원래의 클래스 문법이 없더라도 JavaScript 코드 내의 클래스 유사 구조를 어떻게 자동으로 탐지할 수 있는가?
• RQ2 원형 기반 상속 패턴이 얼마나 정확하게 공식적인 클래스 모델로 역설계될 수 있는가?
• RQ3 실제 웹 애플리케이션에서 객체 지향적 구조를 탐지하고 시각화하는 데 도구가 얼마나 효과적인가?
• RQ4 어떤 메트릭과 시각화 방식이 JavaScript 시스템의 구조적 조직을 이해하는 데 도움이 되는가?
• RQ5 레거시 JavaScript 코드를 ECMAScript 6의 원래 클래스 문법으로 마이그레이션하는 데 도구는 어떻게 지원할 수 있는가?

주요 결과

• JSClassFinder는 생성자 함수와 원형 체인을 분석함으로써 AST를 기반으로 클래스 정의를 추론함으로써, ES5에서 원래의 클래스 문법이 없더라도 클래스 유사 구조를 성공적으로 식별합니다.
• 도구는 PDF.js나 jQuery와 같은 실제 웹 애플리케이션의 구조적 조직을 반영한 정확한 UML 클래스 다이어그램과 분포도를 생성합니다.
• NOC, NOM, NOA, DIT와 같은 표준 소프트웨어 메트릭을 계산하여 코드 복잡성과 설계에 대한 정량적 통찰을 제공합니다.
• Moose 플랫폼과의 통합을 통해 고급 시각화 및 분석이 가능해져 객체 지향 모델의 탐색과 탐색이 가능해졌습니다.
• ClazzJS와 같은 제3자 라이브러리에서 생성된 클래스나 싱글턴 객체를 탐지하는 데에는 한계가 있음을 확인하였으며, 향후 개선이 필요한 영역임을 밝혔습니다.
• 도구는 공개되어 있으며, 향후 ECMAScript 6 클래스 문법을 위한 확장도 가능하여 레거시 코드 현대화에 기여합니다.