Abstract: Web applications are two types' server side, and client side. Server-side, used for Data access and Business logic. And Client-side, used as a user interface. Developers developing complex interfaces in client-side. In client-side features are easy to find and vary. Whereas implementation details cannot. This ensures the restriction over understanding, maintenance and reuse of code. The main goal is to improve reusability, maintainability and performance of client-side web applications by identifying and extracting code that relates to particular/ individual features. In addition, we apply the approach in three different cases: extracting features, extracting library functionalities, page optimization. This approach gives implementation details of individual features by code identification, Code size reduction, and increased performance.
Index Terms'Web applications, feature location, program slicing, code extraction.
The web applications are one of the fastest-growing software systems. Web applications are used in almost every facet of our lives: At work applications such as Google web apps, Microsoft web applications. For shopping applications such as Amazon or eBay. Or as parts of our social experiences with applications such as Face book, Twitter, Linked in, and so on. Web applications consist of two equally important parts: the server side, used as data access and business logic, and the client side, used as a user interface (UI).a web application includes resources also such as images, videos, and fonts. The result displayed in the browser. The client side of a web application is developed with a combination of three languages.
From the user's perspective, an application has a number of different features. A feature is implemented by a subset of the whole application's code and resources. However, identifying the exact subset is a challenging task: Code responsible for the desired feature is often intermixed with irrelevant code; there is no trivial mapping between the source code and the application displayed in the browser. The main contribution of this paper is a method for identifying and extracting code and resources that implement individual features in a client-side web application. To locate the implementation code, we have to be able to track dependencies between different parts of the application. To address this, we introduce a client-side dependency graph, show how it is constructed, and how it can be used to identify the code and the resources that implement a feature.. In addition, we apply the approach in three different cases: extracting features, extracting library functionalities, page optimization. This approach gives implementation details of individual features by code identification, Code size reduction, and increased performance.
Web application example:
Fig: 1. Example web application: 1'the news cycler UI control, 2'buttons, 3'image, 4'captions.
For example this simple web application offers a simple feature of cycling between different news information, and it manifests itself when the user clicks on these buttons.
Client-side web application conceptual model:
Fig: 2 Client-side web application conceptual models.
In this section, we present a conceptual model of client-side web applications (Fig. 2) in client-side web applications are UI applications. In the Client-side applications offers number of features. UI control defines structure, presentation of that structure & its behavior. An application offers number of features, feature depend on the context. A single feature is implemented at least on UI control. Scenario captures the feature behaviors. Scenarios are sequence of user inputs that trigger actions of a system with absolute result are called scenarios. Figure shows UI control implements any number of features. We also give an introduction to the inner working of client-side web applications and introduce feature location and program slicing-two techniques fundamental for our approach.
Program Slicing:  Program slicing is reduces that program to a minimal form which still produces that behavior. Slicing can also be used to keep only parts of the application's UI.A program slice consists of the parts of a program that affect the values computed at a point of interest'the slicing criterion. A static slicing criterion is usually specified by a program point and a set of variables, while a dynamic slicing criterion is typically composed of an input, the occurrence of program statement, and a set of variables. Slicing can be a very powerful technique, but it requires starting slicing criteria, and there may be no easy way to identify slicing criteria that correspond to a user described feature.
The overall approach:
Fig: 3 the overall approach
This is why the process is divided in three phases: in the first phase, interaction recording, the user specifies and executes the usage scenario that causes the manifestation of the feature, and in the background the application execution trace is being recorded. This application execution trace + the parts of the structure that we are interested in are sent to phase 2: re-interpretation, that re executes the whole application with the application execution trace as a guideline while building a dependency graph that at each moment of execution shows exact dependencies between different parts of the application. When the process arrives to the point in execution which modifies the part of the structure we are interested in (one of the manifestations of the behavior), the process stops and enters phase 3 - Graph marking, where the dependency graph is traversed from the point making the modification by following all its dependencies, and all dependent constructs are marked as important because they are necessary for this behavior. After the traversal is done, the process continues with Phase 2. This cycle is repeated as long as there are structures modifying executions present.
Finally, when the whole application execution trace has been consumed, all the important code identified, the process serializes the code from the dependency graph, and the process is finished.
' Extracting Features
' Extracting Library Functionalities
' Page Optimization
Extracting Library Functionalities:
For the second experiment, we wanted to validate the correctness of the extraction process. Whether the extraction process is correct or not, we can consider a Unit-Test. For this purpose, we decided to use Unit-Test specified by the developers themselves. Extracting the Library functionalities did not want to include any non library code.
For the third experiment, page optimization. Web application contains more code than usually include in the web applications. Means large code bases lead to slower and less responsive web applications, which is tern increases the like hood of user'sobdoming the application. By removing the dead code, savings in terms of page loading time and increase performance can be achieves. By the help of the extraction process, we can remove the dead code.
In this work, we have shown how to identifying and extracting code responsible for certain client side feature in web applications. A client side dependency graph and how by using that graph, the code responsible for certain feature can be identified and extracted.
We have evaluated the approach based on 3 different experiments: extracting features, extracting library functionalities, page optimization.
M. Weiser, 'Program Slicing,' Proc. Int'l Conf. Software Eng.,pp. 439-449, 1981.
 S. Hurwitz, T. Reps, and D. Binkley, 'Interprocedural Slicing Using Dependence Graphs,' SIGPLAN Notices, vol. 23, no. 7,pp. 35-46, June 1988.
 P. Tonally and F. Rica, 'Web Application Slicing in Presence of Dynamic Code Generation,' Automated Software Eng., vol. 12, no. 2, pp. 259-288, 2005.
 T. Eisenbarth and R. Kosher, 'Locating Features in Source Code,' IEEE Trans. Software Eng., vol. 29, no. 3, pp. 210-224, Mar.2003.