Web Application

„ Web applications evolved from Web sites or

Building Web Web systems
„ Web application is a Web system that allows its
Applications with UML users to execute business logic with a Web
browser
Source:
Building Web Applications with UML Second Edition By Jim Conallen, 2002 „ Web applications use enabling technologies to
Modeling Web Application Architecture with UML By:: Jim Conallen, 1999
make their content dynamic and to allow users
IF4061 of the system to affect business logic on the
STEI ITB - 2007
server.

September 2007 IF4061 2

Web application architectures Client State Management

„ It contains the same principal components of a „ One common challenge of Web applications is
Web site: managing client state on the server.
„ Owing to the connectionless nature of client and server
„ a Web server, communications, a server doesn't have an easy way to keep
track of each client request and to associate it with the
„ a network connection, and previous request, since each and every Web page request
establishes and breaks a completely new set of connections.
„ client browsers.
„ Managing state is important for many applications; a
„ Web applications also include an application single use case scenario often involves navigating
server. through a number of Web pages.
„ The addition of the application server enables the „ The W3C has proposed an HTTP state management
mechanism, more commonly known as "cookies"
system to manage business logic and state.

September 2007 IF4061 3 September 2007 IF4061 4

Cookies
„ A cookie is a piece of data that a Web server can
ask a Web browser to hold on to, and to return
every time the browser makes a subsequent
request for an HTTP resource to that server.
„ Typically, the size of the data is small, between
100 and 1K bytes; however, the official limit is
around 4K.
Sessions
„ A session represents a single cohesive use of the system.
„ A session usually involves many executable Web pages and a lot
of interaction with the business logic on the application server.
„ The most common example of keeping client state on the server
can be found on the Internet at any e-commerce site.
„ The use of virtual shopping carts is a nice feature of an online store.
„ A shopping cart contains all the items an online customer has selected
from the store's catalog.
„ The shopper can check the contents of the cart at any time during the
session.
„ This feature requires that the server be capable of maintaining some state
about the client across a series of Web page requests.

September 2007 IF4061 5 September 2007 IF4061 6

1
 Enabling Technologies
„ Enabling technologies are the mechanism by which
Web pages become dynamic and respond to user input.
„ The earliest involved the execution of a separate
module by a Web server.
„ Instead of requesting an HTML-formatted page from the file
system, the browsers would request the module, which the
Web server interpreted as a request to load and to run the
module.
„ The module's output is usually a properly formatted HTML
page but could be image, audio, video, or other data.
Enabling Technologies (2)
The original mechanism for processing user input in a Web system is the
„
Common Gateway Interface (CGI),
„ a standard way to allow Web users to execute applications on the server.
„ can be written in any language and can even be scripted.
„ the most common language for small-scale CGI modules is Perl (practical
extraction and reporting language), which is interpreted each time it is executed.
„ The two biggest problems with CGI:
„ it doesn't automatically provide session management services
„ every execution of the CGI module requires a new and separate process on the
application/Web server
„ The available solutions:
„ by adding plug-ins to the Web server.
„ the plug-ins allow the Web server to concentrate on servicing standard HTTP
requests and deferring executable pages to another running process

September 2007 IF4061 7 September 2007 IF4061 8

Enabling Technologies (3) Enabling Technologies (4)

„ Two major approaches to Web application–enabling
technologies are used today:
„ compiled modules
„ interpreted scripts
„ Compiled-module solutions are CGI-like modules that are
compiled loadable binaries executed by the Web server.
„ These modules have access to APIs that provide the information
submitted by the request, including the values and names of all the fields
in the form and the parameters on the URL.
„ These modules produce HTML output that is sent to the requesting
browser.
„ Some popular implementations of this approach are Microsoft's Internet
Server API (ISAPI), Netscape Server API (NSAPI), and Java servlets.
„ The scripted-page solution looks like an
HTML page that happens to process business
logic (whereas the compiled-module solution looks like a
business logic program that output HTML)
„ a file in the Web server's file system, contains scripts
to be interpreted by the server;
„ the scripts interact with objects on the server and
ultimately produce HTML output.
„ some popular vendor are Java Server Pages,
Microsoft's Active Server Pages, and PHP.

September 2007 IF4061 9 September 2007 IF4061 10

Building Web App The Process

„ The Process „ Iterative and incremental
„ Defining the Architecture „ Artifacs:
„ Domain model
„ Requirement and Use Cases
„ Use case model
„ The User Experience „ Analysis/design model
„ Analysis „ Implementation model

„ Design „ Process model

„ Security model
„ Implementation
„ User experience, or user interface, model

September 2007 IF4061 11 September 2007 IF4061 12

2
 Defining the Architecture The Requirement and Use Cases
„ The key architecture activities are to: „ Can be categorized as either functional or
„ Examine and prioritize use cases and look for significant architectural
requirements nonfunctional.
„ Define and document a candidate architecture and prepare and evaluate
prototypes „ Functional requirements describe an action that
„ Define a reuse strategy the system should perform.
„ Some common structural patterns:
„ Façade. The dynamic information in any given Web page may have to be „ They usually define both the stimulus and the
constructed from a collection of business objects and controllers. response, or input and output.
„ Page composition. Each conceptual Web page in the system is
assembled at runtime from a set of independent smaller page fragments, „ Functional requirements, the most common type of
which are often reused across pages in the system. requirement, identify the things that the system can
„ Templated page. This pattern defines a one-page template that all
outgoing Web pages go through on their way to the client do, usually in response to external input.

September 2007 IF4061 13 September 2007 IF4061 14

The Requirement and Use Cases (2) The Requirement and Use Cases (3)
„ Some common nonfunctional requirement categories are:
„ Usability.
„ Security.
„ Tend to specify levels of access to the system and often map to
„ Refer to general aspects of the interface between the user and the system. human roles of the business.
„ Example: defines the maximum number of clicks a user must make to „ Example: described mechanisms: access control, authentication,
complete a function of the application. Other requirements may constrain the encryption, audit, and intrusion detection.
Web page design: "The system interface shall not use HTML frames" or "The
system shall be accessible by any browser that is forms capable and supports „ Hardware.
the use of the <table> tag." „ Often state the minimal hardware required to implement the system.
„ Performance. „ Deployment.
„ Describe system execution performance and are usually related to time. „ Describe how the application is delivered to the end users.
„ Example: "Web pages should not take longer than 15 seconds to load in the „ Example: how the system is to be installed, maintained, and accessed
browser during normal system usage." by maintenance staff.
„ Robustness/reliability.
All mission-critical applications need to clearly state the degree to which the
„
application must be available.
„ Building the use case model
„ Example: The system needs to be fully functional 24/7/52—24 hours a day,
7 days a week, 52 weeks
September 2007 IF4061 15 September 2007 IF4061 16

The User Experience (UX) The User Experience (UX) (2)

„ Outlines the intended look-and-feel for the application „ Screens
„ is something that is presented to the user
„ Its purpose is to guide the team developing the user „ contains the standard user interface infrastructure, such as menus and
interface controls, as well as business-relevant content
„ The user experience is driven and shaped by two „ Content, a generic term for business information that appears in a Web
page, is a combination of static and dynamic content
philosophies: the art and the architecture.
„ Storyboards
„ The IA must balance the technical constraints of Web-centric „ when screens are combined and ordered, they can describe use case
architectures with the artistic requirements that make the scenarios, or ministories of the behavior in an application, expressed in
application aesthetically pleasing terms of sample screens.
„ The Artifacs: „ in any given "story," any screen may be visited many times, each time
with a new set of dynamic data.
„ Screens and content descriptions „ each scenario is an expression of a specific use of the system.
„ Storyboard scenarios „ the whole goal of a storyboard scenario is to express a typical use of the
„ Navigational paths through the screens system through the eyes of the user

September 2007 IF4061 17 September 2007 IF4061 18

3
 The User Experience (UX) (3) UX Modeling with UML
„ Navigational Paths
„ one of the most architecturally important artifacts
„ express the structure of an application's screens with their
potential navigational pathways: a road map of the
application's screens
„ expresses all the legal and expected paths through the system.

September 2007 IF4061 19 September 2007 IF4061 20

Analysis
„ Transform the requirements of the system into a design that can
be realized in software
„ Focuses on the functional requirements of the system, ignoring
for the moment the architectural constraints of the system.
„ The emphasis is on ensuring that all functional requirements, as expressed
by the use cases and other documents, are realized somewhere in the
system.
„ Each requirement item and use case is linked to the classes and packages
that realize them.
„ UX Model Mapping
„ expressed as dependencies from analysis boundary classes and UX
screens
Design
„ The Web Application Extension (WAE) to UML enables us to
represent Web pages and other architecturally significant
elements in the model alongside the "normal" classes of the
model.
„ Only by doing this can we accurately express the entirety of the system in
a model and maintain its traceability and integrity
„ An extension to UML is expressed in terms of:
„ Stereotype, an extension to the vocabulary of the language, allows us to
attach a new semantic meaning to a model element.
„ Tagged value, an extension to a property of a model element, is the
definition of a new property that can be associated with a model element.
„ Constraint, an extension to the semantics of the language, specifies the
conditions under which the model can be considered well formed.

September 2007 IF4061 21 September 2007 IF4061 22

WAE – Logical View Web Class Stereotypes

„ The WAE defines three core class stereotypes and various association stereotypes.
„ Core class stereotypes:
„ Server Page; represents a dynamic Web page that contains content assembled on the server
each time it is requested
„ Client Page; an HTML-formatted Web page with a mix of data, presentation, and even logic
„ HTML Form; a collection of input fields that are part of a client page
„ Association stereotypes:
„ << link>> : is an abstraction of the HTML anchor element, when the href attribute is
defined
„ <<build>> : a directional relationship between a server page and a client page
„ <<submit>> : a directional relationship between an «HTML form» and a server page
„ <<redirect>>: indicates a command to the client to request another resource
„ <<forward>> : represents the delegation of processing a client's request for a resource to
another server-side page
„ <<object>> : a containment relationship drawn from a client page to another logical class,
typically one that represents an applet, ActiveX control, or other embeddable component
„ <<include>> : indicates that the included page gets processed, if dynamic, and that its
contents or by-products are used by the parent

September 2007 IF4061 23 September 2007 IF4061 24

4
 Association Stereotypes Server pages build the client pages

September 2007 IF4061 25 September 2007 IF4061 26

Using hyperlink parameter Form submit to server page

September 2007 IF4061 27 September 2007 IF4061 28

WAE – Component View Designing Web App

„ Static Page
„ A resource that can be directly requested by a client browser
„ Dynamic Page
„ A resource that can be requested by a client browser.
„ When requested or delegated to via a «forward» relationship, server-side
processing takes place.
„ The results of this processing can change the state of the server and be used to
construct some of the HTML that is streamed out to the requesting client.
„ Dynamic pages can accept user input submitted by forms.
„ Physical Root
„ An abstraction of a file hierarchy that contains requestable resources.
„ A «physical root» package maps directly to a Web server file system directory.
„ Tag values in this element identify the host name and the application context,
which are necessary for resolving a component under this directory into a valid
URL
„ Most of the activities are the same as for any client/server system:
„ partitioning the objects into the system's tiers and developing the necessary infrastructure
and helper classes to add to the analysis model.
„ In Web-centric systems, Web pages are first-class objects, and the WAE gives us a
notation for including them in our design models
„ Identifying web pages
„ While the objects are being partitioned, Web pages are also being defined.
„ Involves the discovery of Web pages and their relationships with one another and with the
objects of the system.
„ Web page design elements—client and server pages—are discovered by first looking at the
UX model and understanding the software architecture document
„ The early generations of Web applications, Web pages mapped one to one to what we now
refer to as UX model screens. Each page was responsible for preparing its output by
interacting with server-side objects.
„ Today's development environments and frameworks enable us to build more robust,
sophisticated Web applications with the same effort we used to create simple ones just four
years ago.
„ The two predominant Web architecture frameworks available today are J2EE and .NET.

September 2007 IF4061 29 September 2007 IF4061 30

5
 Designing Web App (2) Client Collaboration

„ Client-Side Scripting
„ Designing Web applications that have dynamic client
pages requires careful attention to the partitioning of
the objects.
„ Thick Web client applications can have all sorts of
objects and activity on the client.

September 2007 IF4061 31 September 2007 IF4061 32

Server Collaboration Designing Web App (3)

„ Mapping to the UX Model
„ Mappings directly between use case and design models to the
UX model
„ Captured in class diagrams that contain UX screens and
design model classes with dependency relationships
connecting them.
„ show which Web page classes realize which UX model screens
„ simple architectures have a one-to-one mapping between a Web page
class—client or server page—and the screen.
„ in more complex architectures, Web page classes are responsible for
delivering multiple screens

September 2007 IF4061 33 September 2007 IF4061 34

Guidelines for Web Application Design

„ Be wary of using the latest capabilities of browsers.
„ The browser wars continue, and it is difficult to predict which features
will eventually become standard.
„ Think about how the page is going to be tested.
„ Don't use visual cues to let the actor know when the page is safe to
interact with unless these same cues are accessible by an automated
testing tool.
„ Avoid the temptation to use multiple browser windows
simultaneously.
„ Although a useful feature for some applications, designing and
maintaining two client interfaces requires more than double the effort.
„ Keep the focus of server pages on the construction of the user
interface.
„ Avoid placing business logic code in the server page. Use external objects
to encapsulate this type of logic.

September 2007 IF4061 35