Client-side Web Application Primer - AUTOMATING REUSE IN WEB APPLICATION DEVELOPMENT

A client-side web application is an HTML page that includes JavaScript code, CSS code, and various resources (e.g. images and fonts), and the interplay of these elements produces the result displayed in the browser. HTML (HyperText Markup Language) is a markup language used for specifying the structure of a Web application. The markup takes the

2.1 Web Applications 15

form of elements applied to content, typically text. Additional properties can be assigned to each HTML element by adding one or more attributes.

1 <html> 2 <head>

3 <title> Example Page </title> 4 </head>

5 <body>

6 <div id=" c o n t a i n e r "> 7 <img src=" image . png "/ >

8 <span class=" caption "> Test </span> 9 </span>

10 </body> 11 </html>

Listing 2.1: Example HTML code

For example, Listing 2.1 presents a simple HTML document com- posed out of HTML elements (e.g. html, head, title), attributes (e.g. attribute src=“image.png” of an img element in line 7 that specifies the location of the image), and text content (string “Test” in line 8). Based on the HTML markup, the browser builds the structure and content of a web application.

CSS (Cascading Style Sheets) is a declarative language used to specify the presentational aspects of HTML elements. The CSS code is com- posed of CSS rules, each rule consisting of a CSS selector and a set of property-value pairs. A CSS selector, by combing node type, node attributes (e.g. id, class), and node position in the page hierarchy, is used to specify to which HTML elements the given property-value pairs will be applied to.

1 img { border - style : solid ; border - color : red ; } 2 # c o n t a i n e r { color : blue ; }

3 # c o n t a i n e r . caption { font - weight : bold ; }

Listing 2.2: Example CSS code

Listing 2.2 gives a simple example of CSS rules: the rule at line 1 specifies that a property border-style with a value solid and a property border-color with a value red should be applied to any element of type img, while the rule at line 3 specifies that a property font-weight with value bold should be applied to elements with a class attribute caption that are descendants of an element with the id attribute container.

JavaScript is a weakly typed, imperative, object-oriented scripting language with prototype based inheritance. It has no type declarations

14 Chapter 2. Background

the application. The browser parses the code, builds the layout of the page, and for each referenced external file (e.g. images, videos, audio, JavaScript, style files) creates an additional HTTP request that is sent to the server.

Figure 2.1: Life-time of a web application

Once the application is built and displayed in the browser, the user can interact with it. At any time, during the life-time of the application, the browser can initiate communication with the server-side (by send- ing an HTTP request), can update the UI of the application, or store information in the client browser.

2.1.1 Client-side Web Application Primer

2.1 Web Applications 15

form of elements applied to content, typically text. Additional properties can be assigned to each HTML element by adding one or more attributes.

1 <html> 2 <head>

3 <title> Example Page </title> 4 </head>

5 <body>

6 <div id=" c o n t a i n e r "> 7 <img src=" image . png "/ >

8 <span class=" caption "> Test </span> 9 </span>

10 </body> 11 </html>

Listing 2.1: Example HTML code

1 img { border - style : solid ; border - color : red ; } 2 # c o n t a i n e r { color : blue ; }

3 # c o n t a i n e r . caption { font - weight : bold ; }

Listing 2.2: Example CSS code

JavaScript is a weakly typed, imperative, object-oriented scripting language with prototype based inheritance. It has no type declarations

16 Chapter 2. Background

and only run-time checking of calls and field accesses. Functions are first-class objects and can be manipulated and passed around like other objects. JavaScript is a dynamic language and everything can be modified at runtime, from fields and methods of an object to its prototype. One object can act as a prototype to a number of different objects, and changes to that prototype affect all derived objects. The language also offers an eval function which can execute an arbitrary string of JavaScript code. JavaScript code, at least when discussing client-side web applications, is executed inside a browser which offers a number of globally available built-in objects: e.g. the global window object which stores all global variables and acts as an interface to the window in which the application is executed; the document object used as an interface to the structure of the page, etc. Due to the dynamicity of JavaScript each built-in object can be accessed and modified from any point in the application.

1 f u n c t i o n addText ( element ) {

2 element . t e x t C o n t e n t += " added by J a v a S c r i p t "; 3 }

5 var caption = d o c u m e n t . q u e r y S e l e c t o r (" # c o n t a i n e r . caption ") ; 6 addText ( caption ) ;

Listing 2.3: Example JavaScript code

Listing 2.3 presents a simple example of a JavaScript application that selects an element from the page by using the global document object (line 5), and appends a text string to it (line 2).

Life-cycle. Client-side web applications are event-driven UI applications, and a majority of code is executed as a response to user-generated events. Their life-cycle can be divided into two phases: i) page initializa- tion and ii) event-handling. The purpose of the page initialization phase is to build the UI of the web page. The browser achieves this by parsing the HTML code and building a representation of the HTML document – the Document Object Model (DOM). When parsing the HTML code the DOM is constructed one HTML element at a time. After the last element is parsed and the UI is built, the application enters the event- handling phase, where code is executed in response to events. All UI updates are done by JavaScript modifications of the DOM, which can go as far as completely reshaping the DOM, or even modifying the code of the application.

In document AUTOMATING REUSE IN WEB APPLICATION DEVELOPMENT (Page 32-34)