Web programming slides
Download
Report
Transcript Web programming slides
Programming the
Interactive Web
Shriram Krishnamurthi
Brown University
The Interactive Web
• The Web is increasingly “dark matter”
• Numerous Web APIs:
– The Common Gateway Interface (CGI)
– Java Servlets
– Active Server Pages, Java Server Pages
– Scripting languages (Perl, PHP, etc)
– Microsoft’s Web Services
Where You See This
• URLs become simple:
https://onepass.continental.com/asp/statement.asp
• URLs become complex:
http://maps.yahoo.com/py/ddResults.py?Pyt=Tmap&tarnam
e=&tardesc=&newname=&newdesc=&newHash=&newTHash=&newS
ts=&newTSts=&tlt=&tln=&slt=&sln=&newFL=Use+Address+Be
low&newaddr=3007+Santa+Monica+Boulevard&newcsz=santa+
monica,+ca&newcountry=us&newTFL=Use+Address+Below&new
taddr=2815+Santa+Monica+Boulevard&newtcsz=Santa+Monic
a,+CA+904042409&newtcountry=us&Submit=Get+Directions
Why Dynamic Content?
• Server maintains large database
• Continuous upgrades (software and data)
• Platform independence for clients
• Sometimes, just a Web interface to an
existing program (eg, airline reservations)
Red Herring Says
“No software? No problem. You should be
moving all your business processes
onto the Web anyway.” (The Angler,
Anthony B. Perkins, October 2002)
Discusses successful online subscriptionbased service:
“No CD to install, no maintenance, no
backup, and no need to upgrade!”
The Orbitz Problem
Not limited to punk script monkeys!
Also found on Web sites of
• Microsoft
• Apple
• the National Science Foundation
• …
Programming Interactive
Web Scripts
Printing a Message
(Console)
print
“Hello, World\n”
exit
Printing a Message
(Web)
print
<html>
<head><title>Test</title>
</head>
<body>
<p>Hello, World!</p>
</body>
</html>
exit
Printing Uptime
(Console)
print
“Uptime: %s\n”
system (“uptime”)
exit
Printing Uptime
(Web)
print
<html>
<head><title>Uptime</title>
</head>
<body>
<p>system (“uptime”)</p>
</body>
</html>
exit
Area of Circle
(Console)
r = read “Enter radius: ”
print
“area is %d\n”
(3.14*r*r)
exit
Area of Circle
(Web)
Enter
r = get_binding
“radius”
bindings
<p>area is
(3.14*r*r)</p>
Adding Two Numbers
(Console)
n1 = read “Enter first: ”
n2 = read “Enter second: ”
print
“sum: %d\n”
(n1 + n2)
exit
Two User Interfaces
Enter first:
Enter second:
Enter first:
Enter second:
Interacting with Web Scripts
Interacting with Web Scripts
Interacting with Web Scripts
Interacting with Web Scripts
Interacting with Web Scripts
Interacting with Web Scripts
Adding Two Numbers
(Web)
Enter first:
n1 = get_binding
“n1”
bindings
<form>…</form>
A Central Problem
• Web scripts write a page, then
terminate
• When the user replies, another script
reads the form’s bindings and performs
the next step
Adding Two Numbers
(Web)
Enter first:
n2 = get_binding
“n2”
bindings
<p>sum:
(n1 + n2)</p>
n1 = get_binding
“n1”
bindings
<form>…</form>
Enter second:
Adding Two Numbers
(Web)
Enter first:
n2 = get_binding
“n2”
bindings
<p>sum:
(n1 + n2)</p>
“free variable”
n1 = get_binding
“n1”
bindings
<form>…</form>
Enter second:
In Practice
• System signals an error
– The user doesn’t get a useful answer
– The user may not understand the error
– User expended a lot of effort and time
• Program captures variable by accident
(i.e., it implements dynamic scope!), or
• “internal server error”
Adding Two Numbers
(Web)
Enter first:
n2 = get_binding
“n2”
bindings
<p>sum:
(n1 + n2)</p>
n1 = get_binding
“n1”
bindings
<form>…</form>
Enter second:
Adding Two Numbers
(Web)
Enter first:
n1 = get_binding “n1”
bindings
n2 = get_binding “n2”
bindings
<p>sum:
(n1 + n2)</p>
n1 = get_binding
“n1”
bindings
<form>…</form>
Enter second:
n1:
The Actual Form
<html>
<head>
<title>The Addition Page</title>
<body>
<p>Enter the second number:</p>
<form method="get"
action="http://www. .../cgi-second.ss">
<input type="hidden" name=“n1" value=“1729">
<input type="text" name=“n2" value="0">
</form>
</html>
Problems
• Generating forms is a pain
• Programmer must manually track these
hidden fields
• Mistakes can have painful
consequences
(Worst, silently induce dynamic scope)
Bad News
That’s the easy part!
What’s in a URL?
Let’s go back to this URL:
http://maps.yahoo.com/py/ddResults.py?Pyt=Tmap&
tarname=&tardesc=&newname=&newdesc=&newHash=&ne
wTHash=&newSts=&newTSts=&tlt=&tln=&slt=&sln=&ne
wFL=Use+Address+Below&newaddr=3007+Santa+Monica
+Boulevard&newcsz=santa+monica,+ca&newcountry=u
s&newTFL=Use+Address+Below&newtaddr=2815+Santa+
Monica+Boulevard&newtcsz=Santa+Monica,+CA+90404
2409&newtcountry=us&Submit=Get+Directions
What’s in a URL?
Let’s go back to this URL:
http://maps.yahoo.com/py/ddResults.py?Pyt=Tmap&
tarname=&tardesc=&newname=&newdesc=&newHash=&ne
wTHash=&newSts=&newTSts=&tlt=&tln=&slt=&sln=&ne
wFL=Use+Address+Below&newaddr=3007+Santa+Monica
+Boulevard&newcsz=santa+monica,+ca&newcountry=u
s&newTFL=Use+Address+Below&newtaddr=2815+Santa+
Monica+Boulevard&newtcsz=Santa+Monica,+CA+90404
2409&newtcountry=us&Submit=Get+Directions
Breaking it Down
Write it differently:
http://maps.yahoo.com/py/ddResults.py?
newaddr=3007+Santa+Monica+Boulevard&
newcsz=santa+monica,+ca&
newcountry=us&
newtaddr=2815+Santa+Monica+Boulevard&
newtcsz=Santa+Monica,+CA+904042409&
newtcountry=us&
Submit=Get+Directions
Breaking it Down
Or:
http://maps.yahoo.com/py/ddResults.py?
newaddr
3007+Santa+Monica+Boulevard
newcsz
santa+monica,+ca
newcountry
us
newtaddr
2815+Santa+Monica+Boulevard
newtcsz
Santa+Monica,+CA+904042409
newtcountry
us
Submit
Get+Directions
It looks an awful lot like a function call!
The Real Picture
The script
and the user
are
coroutines!
Event lines
script
user
Control Flow: Back Button
script
user
script
user
A silent action!
Control Flow: Cloning
script
user
script
user
Control Flow: Bookmarks
script
user
script
user
What Programmers Need
“Multiply-resumable and restartable
coroutines”
• No language has exactly this – the new
control operator for the Web
• How do we implement it?
How to Reengineer Programs
for the Web
What we Want to Write
n1 = read
“Enter first: ”
n2 = read
“Enter second: ”
print
“sum: %d\n”
(n1 + n2)
exit
What we are Forced to Write:
1 of 3
Main () = print
<form action=“f1”>
Enter first:
<input name=“n1”>
</form>
What we are Forced to Write:
2 of 3
f1 (form) = print
<form action=“f2”>
<input hidden name=“n1”
value=form.n1>
Enter second:
<input name=“n2”>
</form>
What we are Forced to Write:
3 of 3
f2 (form) = print
The sum is
form.n1 + form.n2
Sensitive to Interaction
Why Does this Work?
This form has both
• a reference to the next program (f2)
• the value of the previous input (1729)
Program Structure Destroyed
n1 = read
“Enter first: ”
n2 = read
“Enter second: ”
print
“sum: %d\n”
(n1 + n2)
exit
Main () = print
<form action=“f1”>
Enter first:
<input name=“n1”>
</form>
f1 (form) = print
<form action=“f2”>
<input hidden name=“n1”
value=form.n1>
Enter second:
<input name=“n2”>
</form>
f2 (form) = print
The sum is
form.n1 + form.n2
The Reengineering Challenge
• Web interfaces have grown up:
from “scripts” to “programs” (or “services”)
• Need debugging, maintenance, evolution, …
• We would like a “Web compiler” that
– Automatically splits programs by form
– Automatically propagates fields
– Preserves behavior in the face of bizarre control
flow