DOI QR코드

DOI QR Code

Reengineering Template-Based Web Applications to Single Page AJAX Applications

단일 페이지 AJAX 애플리케이션을 위한 템플릿 기반 웹 애플리케이션 재공학 기법

  • 오재원 (가톨릭대학교 컴퓨터정보공학부) ;
  • 최현철 (가톨릭대학교 컴퓨터정보공학부) ;
  • 임승호 (한국외국어대학교 디지털정보공학과) ;
  • 안우현 (광운대학교 컴퓨터소프트웨어학과)
  • Received : 2012.06.27
  • Accepted : 2012.08.03
  • Published : 2012.10.30

Abstract

Web pages in a template-based web application (TWA) are automatically populated using a template shared by the pages with contents specific to the pages. So users can easily obtain information guided by a consistent structure of the template. Reduced duplicated code helps to increase the level of maintainability as well. However, TWA still has the interaction problem of classic web applications that each time a user clicks a hyperlink a new page is loaded, although a partial update of the page is desirable. This paper proposes a reengineering technique to transform the multi-page structure of legacy Java-based TWA to a single page one with partial page refresh. In this approach, hyperlinks in HTML code are refactored to AJAX-enabled event handlers to achieve the single page structure. In addition, JSP and Servlet code is transformed in order not to send data unnecessary for the partial update. The new single page consists of individual components that are updateable independently when interacting with a user. Therefore, our approach can improve interactivity and responsiveness towards a user while reducing CPU and network usage. The measurement of our technique applied to a typical TWA shows that our technique improves the response time of user requests over the TWA in the range from 1 to 87%.

템플릿 기반 웹 애플리케이션(TWA)은 웹 페이지들의 공통부분을 단일 코드 파일(템플릿)로, 각 페이지에 특화된 부분은 별도의 파일로 관리한다. HTTP 요청이 발생하면 이 두 종류 파일을 동적으로 조합하여 웹 페이지를 생성한다. 이를 통해 사용자에게 일관된 UI을 제공하며 코드 중복을 제거해 유지보수성을 향상시킨다. 그러나 TWA는 사용자의 요청 시 현재 페이지에서 바뀌어야 할 부분이 일부지만 페이지 전환이 이루어져 갱신이 불필요한 데이터까지 전송되고 처리되는 문제가 있다. 본 논문은 Java 기반 TWA를 대상으로 이 문제를 해결한다. 제안 기법은 페이지 전환을 제거하기 위해 HTML에 있는 하이퍼링크를 AJAX를 이용하는 JavaScript 이벤트 핸들러로 변환한다. 또한 갱신에 필요한 데이터만 반환하기 위해 JSP, Servlet 코드에서 템플릿 전송 코드를 제거한다. 따라서 이 기법은 페이지 전환으로 발생하는 네트워크와 CPU 부하를 감소시키며, 비동기적인 페이지 업데이트로 사용자의 체감 성능을 향상시킨다. 성능 검증을 위해 전형적인 TWA를 대상으로 이 기법을 적용하였다. 성능 측정 결과 기존 TWA보다 응답시간을 최대 87% 개선하였다.

Keywords

References

  1. Chulyun Kim et al., "TEXT: Automatic Template Extraction from Heterogeneous Web Pages," IEEE TKDE, Vol.23, No.4, 2011.
  2. Ali Mesbah et al., "Migrating Multi-page Web Applications to Single-page Ajax Interfaces," Proc. of the 11th CSMR, 2007.
  3. Jesse James Garrett, "Ajax: A New Approach to Web Applications," Adaptive Path, 2005.
  4. Gustavo Rossi et al., "Refactoring to Rich Internet Applications. A Model-driven Approach," Proc. of the 8th ICWE, 2008.
  5. Roberto Rodriguez-Echeverria et al., "Modernization of Legacy Web Applications into Rich Internet Applications," Proc. of the 11th intl conf. on Current Trends in Web Engineering, 2012.
  6. Y. Kim, "JSP & Servlet for Java Programmers," Chapter 13, Hanbit Media, 2010.
  7. Dong-Min Kang, "Web Performance Optimization : Today and Tomorrow," Communications of KIISE, Vol.30, No.5, 2012.

Cited by

  1. Comparison of Path Exploration and Model Checking Techniques for Checking Automotive API Call Safety vol.5, pp.12, 2016, https://doi.org/10.3745/KTSDE.2016.5.12.615