客户端Web应用的依赖图生成过程(IJIEEB-V7-N2-6)
A Dependency Graph Generation Process for Client-side Web Applications
I.J. Information Engineering and Electronic Business , 2015, 2, 38-50
Published Online March 2015 in MECS (http://www.mecs http://www.wendangwang.com/)
DOI: 10.5815/ijieeb.2015.02.06
Copyright © 2015 MECS I.J. Information Engineering and Electronic Business, 2015, 2, 38-50 A Dependency Graph Generation Process for Cli-
ent-side Web Applications
Tajkia R. Toma
Institute of Information Technology, University of Dhaka, Dhaka, Bangladesh
Email: tajkiatoma@http://www.wendangwang.com
Mohayeminul Islam, Mohammad Shoyaib and Md. Shariful Islam
Institute of Information Technology, University of Dhaka, Dhaka, Bangladesh
Email: mohayeminul.islam@http://www.wendangwang.com, shoyaib@du.ac.bd, shariful@univdhaka.edu
Abstract —The prolific growth of the Internet density has replaced native applications with web based applications. Current trend of web applications is moving towards fat client architecture, which results in a large codebase of the client side of web applications. Manual management of this huge code is tedious and time consuming for de-velopers. We present a technique to construct a depend-ency graph to provide an overview of the code showing the inter-dependency of the code elements. We conduct a dynamic analysis to make the JavaScript call graph to address the dynamic nature of JavaScript. We further integrate HTML and CSS with the JavaScript call graph to make a dependency graph. Because we can accurately identify the HTML and CSS relations, the result of the dependency graph depends on the JavaScript call graph. Our evaluation of the JavaScript call graph on six web applications demonstrates that the precision is high for the large applications and relatively low for small appli-cations. The recall is low for large applications and rela-tively higher for small applications. Index Terms —Web Application, Software Maintenance, Client-side, Dynamic Analysis, Test case, Call Graph, Dependency Graph. I. I NTRODUCTION
Mobility and platform independence has revolutionized web applications in recent years. Many popular native applications have been replaced by the web applications that provide the similar services. Structurally, a web ap-plication has two processing ends: server side for the data management and business logics implementation, and client side for the presentation of data and user interaction through web browser. In client side, we form the structure of a web page in the web browser through a markup lan-guage, define an enchanting presentation by the style sheets and employ a client-side scripting language to at-tain dynamicity of the page. The standard markup language used to render a web page is known as Hypertext Markup Language (HTML). HTML provides the basic structure of a web page. In addition to HTML, a Cascading Style Sheet (CSS) is used to provide more sophisticated look and feel. The web
page that is built with HTML and CSS is static because we cannot implement logic with HTML and CSS. Differ-ent scripting languages are added to them to change the page dynamically and to respond to user interactions. Among the scripting languages, JavaScript is the most popular [1]. JavaScript is supported by most modern web browsers without need of any additional plugin software. In a web application, client’s needs are fulfilled by a number of interactive features provided in client side. When a good number of features implemented in client being independent of server in server-client architecture is called fat-client architecture. This makes the applica-tion more responsive and the server more capacitive. The interactive features in fat-client applications are commonly handled by extensive use of the client side scripting language, JavaScript, along with HTML and CSS. The scripting language processes the user interface (UI) events invoked by user interactions with the features provided in a web page. Thus a fat client application needs massive JavaScript implementation, which handles massive user interactions. This makes a large codebase for a fat-client web application and codebase often be-come unstructured. The large unstructured codebase of development phase makes it hard to maintain and contin-ue supporting activities in the maintenance phase.
In the software maintenance phase, user’s requests for
changes in application are mostly based on specific fea-ture [2]. Therefore, developers who are man-aging change requests need the code that implements the specif-ic features. Since the documentation of the application does not provide the implementation detail of the applica-tion, therefore, the developers manually browse source code to locate the feature. The developers have to go through several files which is tedious and time-consuming. For a fat-client web application, the develop-ers need to browse mostly the code of client-side imple-mentation. The dynamic nature of JavaScript and the in-terplay of three different languages in a web application make the manual inspection more complicated. In cases where a developer is new in the development team having no previous knowledge about the system, faces more dif-ficulties. In such situations, an intelligent technique that provides overview of the HTML, CSS and JavaScript implementation of a full application will help the devel