programming the interactive web shriram krishnamurthi brown university
TRANSCRIPT
Programming theInteractive Web
Shriram KrishnamurthiBrown 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&tarname=&tardesc=&newname=&newdesc=&newHash=&newTHash=&newSts=&newTSts=&tlt=&tln=&slt=&sln=&newFL=Use+Address+Below&newaddr=3007+Santa+Monica+Boulevard&newcsz=santa+monica,+ca&newcountry=us&newTFL=Use+Address+Below&newtaddr=2815+Santa+Monica+Boulevard&newtcsz=Santa+Monica,+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 subscription-based 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 InteractiveWeb Scripts
Printing a Message(Console)
“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)
“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: ”
“area is %d\n”
(3.14*r*r)
exit
Area of Circle(Web)
Enter radius:
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: ”
“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:
n1 = get_binding “n1” bindings<form>…</form>
Enter second:
n2 = get_binding “n2” bindings<p>sum: (n1 + n2)</p>
Adding Two Numbers(Web)
Enter first:
n1 = get_binding “n1” bindings<form>…</form>
Enter second:
n2 = get_binding “n2” bindings<p>sum: (n1 + n2)</p>
“free variable”
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:
n1 = get_binding “n1” bindings<form>…</form>
Enter second:
n2 = get_binding “n2” bindings<p>sum: (n1 + n2)</p>
Enter second:
n1::
Adding Two Numbers(Web)
Enter first:
n1 = get_binding “n1” bindings<form>…</form>
Enter second:
n1 = get_binding “n1” bindingsn2 = get_binding “n2” bindings<p>sum: (n1 + n2)</p>
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=&newTHash=&newSts=&newTSts=&tlt=&tln=&slt=&sln=&newFL=Use+Address+Below&newaddr=3007+Santa+Monica+Boulevard&newcsz=santa+monica,+ca&newcountry=us&newTFL=Use+Address+Below&newtaddr=2815+Santa+Monica+Boulevard&newtcsz=Santa+Monica,+CA+904042409&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=&newTHash=&newSts=&newTSts=&tlt=&tln=&slt=&sln=&newFL=Use+Address+Below&newaddr=3007+Santa+Monica+Boulevard&newcsz=santa+monica,+ca&newcountry=us&newTFL=Use+Address+Below&newtaddr=2815+Santa+Monica+Boulevard&newtcsz=Santa+Monica,+CA+904042409&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 scriptand the user
arecoroutines!
script user
Event lines
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: ”
“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: ”
“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