WebApps

Derek Bridge

Department of Computer Science,
University College Cork

WebApps

Aims:

• to know the differences between web sites, webapps and desktop applications
• to know what is meant by three-tier client-server architecture
• to know the difference between server-side scripting and client-side scripting
• to learn about event-driven programming
• to learn about unobtrusive client-side scripts
• to learn the different uses to which client-side scripting is put

Web sites vs. webapps

• In the Web, clients send HTTP requests to access resources that are stored on servers
• Web sites
  • the resources are 'documents' (web pages, usually static ones) made up of content such as text, images, etc.
  • allow users to navigate through the content
• Web-based applications/ web applications/ webapps
  • the resources are programs (scripts) that typically take in user input, perform computations, and may pull data from external resources such as databases
  • enable users to achieve some task across the web, e.g. to search; e.g. to shop online

Desktop applications vs. webapps

• Desktop applications are installed on the user's PC/laptop
• Webapps are accessed through the user's browser
• E.g. Microsoft Outlook/Mozilla Thunderbird vs. Gmail
• E.g. Microsoft Outlook's calendar/Apple iCal vs. Google Calendar
• E.g. Microsoft Streets and Trips vs. Google Maps
  Microsoft Streets and Trips screenshot; Google Maps screenshot

Three-tier client-server architectures

• Webapps often have a three-tier client-server architecture
• The application is split over three participants:
  • The client (usually the user's browser) is responsible for the presentation logic
    • i.e. the parts of the application that handle the user interface (e.g. displaying forms for input, displaying pages of output)
  • An application server (e.g. running PHP scripts) is responsible for the application logic (a.k.a. business logic)
    • i.e. the parts of the application that process the user's data, perform computations, etc.
  • A database server (which may or may not be a different physcial computer from the application server) is responsible for data storage and data access

(Note: not using the word 'logic' in the same way as in CS1105)

Three-tier client-server architectures

Server-side scripts

Server-side scripts:

• run on the server
• can access data on the server (e.g. stored in databases)
• are used for dynamic web pages, especially database-driven web pages, and for webapps
• typical language is PHP but also Python, Perl, Server-Side JavaScript (SSJS), Active Server Pages (ASP), various Java technologies,…

Client-side scripts

Client-side scripts:

• run on the client (e.g. within the browser)
• limited to non-harmful activities (e.g. severe limitations on ability to read from/write to user's disk)
• can add 'interactivity' to a web page, without involving the server
• enable us to move some of the 'logic' (processing) off the server, onto the client
• typical language: JavaScript

JavaScript

• Netscape invented it and called it Mocha then LiveScript then JavaScript
• Despite the name, it is not Java, nor based on Java
• The core of the language was standardised by ECMA: called ECMAScript
• But client-side JavaScript involves various extensions that are slightly less standardised
• This means incompatibilities between browsers, particularly early browsers
• This led to some horrible JavaScript being written (e.g. browser sniffing)
• Microsoft's version: JScript (sometimes called JavaScript)
• Microsoft's alternative: VBScript

Client-side JavaScript

• When a JavaScript interpreter is embedded in a web browser, the result is called client-side JavaScript
• In this context, the core language is extended with facilities that allow scripts to
  • interact with the user
  • control the browser
  • alter the document content and presentation
• Client-side JavaScript is the most common use of JavaScript
• But JavaScript (or languages like it) are used elsewhere too (e.g. server-side JavaScript, e.g. ActionScript in Adobe Flash player)

Dynamic HTML (DHTML)

• Although it has fallen out of fashion, you may see the phrase Dynamic HTML (DHTML)
• This is a 'marketing term' for a combination of client-side technologies:

Client-side JavaScript: simple example

• Adding a date to a page: news.html
• In PHP

  <?php echo date('D F j Y, h:i:s a'); ?>

• In client-side JavaScript

  <script type="text/javascript">
    var today = new Date();
    document.write( today.toLocaleString() );
</script>

• But be very clear where this gets executed!

Event-driven programming

• Many programs nowadays use event-driven programming: when an event occurs, the system runs a function to handle the event
• In client-side JavaScript, events include:
  • when the document has finished loading
  • when the user clicks on a hyperlink
  • when the user clicks on a button
  • when the user moves the mouse into or out of a certain region of the screen
  • …
• One way this is done is by using special attributes on HTML elements, e.g. onload, onclick, onmouseover, onmouseout

Client-side JavaScript: image rollovers

• To change an image when the mouse moves over it:

  <img src="frown.jpg"
    onmouseover="this.src='smile.jpg'"
    onmouseout="this.src='frown.jpg'" />

• See rollover1.html

Unobtrusive client-side JavaScript

Recently, there has been a concern for writing scripts that are unobtrusive:

• Scripts should not make web pages less usable (e.g. scripts that automatically set this page as your home page)
• Scripts should not make web pages less accessible (e.g. pop-ups, or visual effects with no text alternative)
• Scripts should degrade gracefully, i.e.
  • the web page is still usable by someone who has disabled JavaScript
  • the web page is still usable by all versions of all browsers
• Like CSS stylesheets, scripts should be in separate, external files, with a link to the file, rather than intermingled with the HTML
  Class exercise: Why?

Client-side JavaScript: unobtrusive image rollovers

rollover2.html: the HTML (DOCTYPE omitted)

<html lang="en">
    <head>
        <meta charset="utf-8" />
	    <title>Make me smile</title>
        <script type="text/javascript" src="rollover2.js">
        </script>
    </head>
    <body>
        <p>
            <img id="face" src="frown.jpg" />
        </p>
    </body>
</html>

Client-side JavaScript: unobtrusive image rollovers

The JavaScript:

if ( window.addEventListener )
{
	window.addEventListener("load", init, false);
}
else if ( window.attachEvent )
{
	window.attachEvent("onload", init);
}

function init()
{
	(new Image()).src = 'smile.jpg';
	document.getElementById("face").onmouseover = make_it_smile;
	document.getElementById("face").onmouseout = make_it_frown;
}

function make_it_smile()
{
	document.getElementById("face").src = 'smile.jpg';
}

function make_it_frown()
{
	document.getElementById("face").src = 'frown.jpg';
}

Client-side JavaScript: unobtrusive image rollovers

rollover3.html: In fact, for image rollovers, forget JavaScript!
CSS can do it:

#face 
{
	display: block;
	width: 500px;
	height: 500px;
	background: url('frown.jpg') top left no-repeat;
}

#face:hover
{
	background: url('smile.jpg') top left no-repeat;
}

Client-side JavaScript: so what would you use it for?

All the following can be done client-side, at the user's request:

• Sorting tables (http://www.joostdevalk.nl/code/sortable-table/)
• Expanding/collapsing trees (http://www.kryogenix.org/code/browser/aqlists/)
• Dragging and dropping (http://tool-man.org/)
• User data validation: next lecture