Transcript Web app software model and design

Web Application Model
Upsorn Praphamontripong
CS 4640
Programming Languages for Web Applications
Spring 2017
Web Applications
• Are user interactive software programs, deployed on a web
server, accessed via a web browser
• Use enabling technologies to
• make web site contents dynamic
• allow users of the system to implement business logic on the server
• Let users affect state on the server
• Constructed from diverse, distributed, and dynamically
generated web components
• Web components are software modules that implement different parts of
the application’s functionality
An enabling technology makes web pages interactive and
responsive to user input
CS 4640
2
How User Interact With Web Apps
http://www.virginia.edu/
Usability
Web client
HTML
JS
CSS
Web application
HTTP
Request
HTTP
Response
Request
Web
component1
Response
Web
component2
Web
componentn
Web server
DB
PHPs
Java servlets
JSPs
HTTP request / response cycle
CS 4640
3
Web Application Failures
• Oct 2004: Paypal waived transaction fees for an entire day because of a
service outage after an upgrade
• Aug 2006 and July 2008: Amazon failure caused businesses to lose
information and revenue
• Sep 2011: 2 hours downtime of Target’s web site and its 1 day intermittently
functioning delayed and cancelled customers’ orders
• Mar 2012: The BodyShop BOGO turned to extra discount
• September 2012: Bank of America, JPMorgan Chase, Citigroup, US Bank,
Wells Fargo, and PNC suffered online attacks
• Jan 2014: Dropbox’s outage was due to a fault in a maintenance script
• April 2016: Information lost after clicking the back button while using
TurboTax web software
CS 4640
4
Traditional Computing Use
A user works with software on her computer
CS 4640
5
Client – Server Computing
A user works with software or data on a separate computer
called a server
Client requests data
Client PC
Server returns data
Computer or
DB Server
CS 4640
6
Web Applications
Many users work with servers and databases that can be reached through
the Internet with the HyperText Transfer Protocol (HTTP)
SQL
DB
Records
HTTP Response
(HTML)
HTTP Request
Internet
Client
Browser
CS 4640
Client
Browser
Client
Browser
7
N-Tier Web Architecture
Large web applications run on many computers that have to
coordinate with each other.
Amazon and Netflix have thousands of servers.
network
Client
Browser
Javascripts
CS 4640
middleware
middleware
Web
Servers
HTML
PHP
ASP
JSP, etc
Application
Servers
DB
Servers
Java
C#
8
How the Web Software Works
Browser
Java servlet
(idProgram)
To server
Browser
To client
CS 4640
9
Server Side Processing
HTTP Request
data
XAMPP and
Tomcat
UI implemented in
a browser
Web server
Container engine
Program
components
Client
Server
HTML
HTTP Response
CS 4640
10
Execution Overview
1
Incoming request
2
Response back to
requestor
Server
HTTP
Request
HTTP
Response
8
7
Web server
3
Request / Response
Objects
Modified Response
Object
6
Container
engine
4
Create thread /
call method
Return
5
Program
component
CS 4640
11
Session Management
HTTP client-server communication is connnectionless
As soon as the request is made and fulfilled, the connection is
terminated
• Communication is simple and resistant to network problems
•
Stateless property
send a request
response a request
CS 4640
Server
12
Session Management (2)
How can servers keep track of state of different clients?
1.
2.
Session : A single coherent use of the system by the same user
– Example : shopping carts
Cookies : A string of characters that a web server places on a
browser’s client to keep track of a session
– Usually used as an index into a table (dictionary) on the
server
– Most dictionaries expire after a period of time (15 to 30
minutes)
Additional mechanisms
- URL rewriting
- Hidden form control
CS 4640
We will come back to this later …
13
Additional Web Features
User’s ability to control web application
via web browser features
index
submit a form
post (userid , password)
component
login
simple link transition
redirect
back
form link transition
record_add
redirect transition
operational transition
CS 4640
submit a form
post (name, category, content)
browse
redirect
record_insert
14
Additional Web Features (2)
Identifying web application resources
with URLs
index
submit a form
post (userid , password)
component
userlogin.jsp
login
simple link transition
redirect
back
form link transition
record_add
redirect transition
operational transition
CS 4640
submit a form
post (name, category, content)
browse
redirect
record_insert
15
Additional Web Features (3)
Communication among web components
depending on requests through the HTTP
index
get
component
submit a form
post (userid , password)
login
simple link transition
redirect
back
form link transition
record_add
redirect transition
operational transition
CS 4640
submit a form
post (name, category, content)
browse
redirect
record_insert
16
Additional Web Features (4)
Control connections: forward, include, redirect
index
submit a form
post (userid , password)
component
login
simple link transition
forward
redirect
back
form link transition
record_add
redirect transition
operational transition
CS 4640
submit a form
post (name, category, content)
browse
redirect
record_insert
17
Additional Web Features (5)
State scope of web components
page
forward
request
request
Client 1
page
forward
session
request
Client 2
page
application
Scope and Handling State in JSPs, slides from SWE 642, reproduced with permission from J. Offutt
CS 4640
18
Summary Web Applications
• The major difference is deployment
• Software is deployed across the Web using HTTP
• Other deployment methods include bundling, shrink-wrapping,
embedding, and contracting
• New software technologies
• New conceptual language constructs for programming
• Integration
• Data management
• Control connections
These differences affect every aspect of
how to engineer high quality software
CS 4640
19