A Survey Report On Analyzing And Extracting Individual Code Features In Client-Side Web Applications

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.

1. Introduction:
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.
2) CSS
3) JavaScript.

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.

Feature Location: The goal of our approach is to locate the implementation details of a particular feature. This process is known as feature location. The most common types of analyses used by feature location processes include textual analysis, static analysis, and dynamic analysis. In the client-side domain, features are implemented through the interplay of HTML, CSS, and JavaScript code. This means that, in addition to all difficulties inherent in the feature location process, the client-side feature location also has to take into account the dependencies that exist between different parts of web application code.
Program Slicing: [1] 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.
The Dependency Graph: [2] In the dependency graph three nodes are their HTML, CSS, JavaScript nodes. Structural, Data-flow, Control-flow edges. Static and Dynamic nodes. So the whole process is based on building and traversing the Client-side dependency graph. The nodes of the graph are created based on three different languages that compose the client-side web application: HTML, CSS, and JavaScript nodes. The edges represent different dependencies between nodes: a structural dependency means that a node is contained within another node, data-flow dependency that one node reads data from the other node, and control-flow edges show the flow of control in the application. Since the client side is very dynamic we also differentiate between static and dynamic nodes. The static nodes are nodes present in the source code of the application, while the dynamic nodes are nodes that are dynamically created while executing the application.
' Extracting Features
' Extracting Library Functionalities
' Page Optimization

Extracting Features:
In the first experiment, extracting features, our goal was to show that the process is capable of extracting features that are implemented with HTML, CSS, and JavaScript code, features that manifest with UI modifications of UI controls. For each test application, we have manually identified its features, the implementing UI controls of those features, and have specified the scenarios that capture the feature behavior. Each scenario is represented as a Selenium test. Selenium IDE is a plug-in for the Firefox browser, which enables automated testing of web applications.
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.
Page Optimization:
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.
[1]M. Weiser, 'Program Slicing,' Proc. Int'l Conf. Software Eng.,pp. 439-449, 1981.

[2] S. Hurwitz, T. Reps, and D. Binkley, 'Interprocedural Slicing Using Dependence Graphs,' SIGPLAN Notices, vol. 23, no. 7,pp. 35-46, June 1988.

[3] 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.

[4] T. Eisenbarth and R. Kosher, 'Locating Features in Source Code,' IEEE Trans. Software Eng., vol. 29, no. 3, pp. 210-224, Mar.2003.

[6] S. Wei and B.G. Ryder, 'A Practical Blended Analysis for Dynamic Features in JavaScript,' Technical Report TR-12-18, Dept. of Computer Science, Virginia Tech, 2012.

Source: Essay UK - http://www.essay.uk.com/free-essays/information-technology/survey-report-analyzing-extracting-individual-code.php

About this resource

This Information Technology essay was submitted to us by a student in order to help you with your studies.

Search our content:

  • Download this page
  • Print this page
  • Search again

  • Word count:

    This page has approximately words.



    If you use part of this page in your own work, you need to provide a citation, as follows:

    Essay UK, Analyzing And Extracting Individual Code Features In Client-Side Web Applications. Available from: <https://www.essay.uk.com/free-essays/information-technology/survey-report-analyzing-extracting-individual-code.php> [25-05-20].

    More information:

    If you are the original author of this content and no longer wish to have it published on our website then please click on the link below to request removal: