+ All Categories
Home > Documents > Programming the Interactive Web Shriram Krishnamurthi Brown University.

Programming the Interactive Web Shriram Krishnamurthi Brown University.

Date post: 14-Dec-2015
Category:
Upload: miguel-summerhill
View: 221 times
Download: 2 times
Share this document with a friend
61
Transcript
Page 1: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 2: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 3: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 4: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 5: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 6: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 7: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 8: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 9: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 10: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 11: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 12: Programming the Interactive Web Shriram Krishnamurthi Brown University.
Page 13: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Programming theInteractive Web

Shriram KrishnamurthiBrown University

Page 14: 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

Page 15: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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

Page 16: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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)

Page 17: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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!”

Page 18: Programming the Interactive Web Shriram Krishnamurthi Brown University.

The Orbitz Problem

Not limited to punk script monkeys!

Also found on Web sites of• Microsoft• Apple• the National Science Foundation• …

Page 19: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Programming InteractiveWeb Scripts

Page 20: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Printing a Message(Console)

print

“Hello, World\n”

exit

Page 21: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Printing a Message(Web)

print <html> <head><title>Test</title> </head> <body> <p>Hello, World!</p> </body> </html>exit

Page 22: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Printing Uptime(Console)

print

“Uptime: %s\n”

system (“uptime”)

exit

Page 23: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Printing Uptime(Web)

print <html> <head><title>Uptime</title> </head> <body> <p>system (“uptime”)</p> </body> </html>exit

Page 24: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Area of Circle(Console)

r = read “Enter radius: ”

print

“area is %d\n”

(3.14*r*r)

exit

Page 25: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Area of Circle(Web)

Enter radius:

r = get_binding “radius” bindings<p>area is (3.14*r*r)</p>

Page 26: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Adding Two Numbers(Console)

n1 = read “Enter first: ”

n2 = read “Enter second: ”

print

“sum: %d\n”

(n1 + n2)

exit

Page 27: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Two User Interfaces

Enter first:

Enter second:

Enter first:

Enter second:

Page 28: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Interacting with Web Scripts

Page 29: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Interacting with Web Scripts

Page 30: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Interacting with Web Scripts

Page 31: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Interacting with Web Scripts

Page 32: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Interacting with Web Scripts

Page 33: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Interacting with Web Scripts

Page 34: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Adding Two Numbers(Web)

Enter first:

n1 = get_binding “n1” bindings<form>…</form>

Page 35: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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

Page 36: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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>

Page 37: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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”

Page 38: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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”

Page 39: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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>

Page 40: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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>

Page 41: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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>

Page 42: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Problems

• Generating forms is a pain

• Programmer must manually track these hidden fields

• Mistakes can have painful consequences(Worst, silently induce dynamic scope)

Page 43: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Bad News

That’s the easy part!

Page 44: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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

Page 45: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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

Page 46: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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

Page 47: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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!

Page 48: Programming the Interactive Web Shriram Krishnamurthi Brown University.

The Real Picture

The scriptand the user

arecoroutines!

script user

Event lines

Page 49: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Control Flow: Back Button

script user script user

A silent action!

Page 50: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Control Flow: Cloning

script user script user

Page 51: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Control Flow: Bookmarks

script user script user

Page 52: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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?

Page 53: Programming the Interactive Web Shriram Krishnamurthi Brown University.

How to Reengineer Programs

for the Web

Page 54: Programming the Interactive Web Shriram Krishnamurthi Brown University.

What we Want to Write

n1 = read

“Enter first: ”

n2 = read

“Enter second: ”

print

“sum: %d\n”

(n1 + n2)

exit

Page 55: Programming the Interactive Web Shriram Krishnamurthi Brown University.

What we are Forced to Write:1 of 3

Main () = print

<form action=“f1”> Enter first:

<input name=“n1”>

</form>

Page 56: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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>

Page 57: Programming the Interactive Web Shriram Krishnamurthi Brown University.

What we are Forced to Write:3 of 3

f2 (form) = print The sum is

form.n1 + form.n2

Page 58: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Sensitive to Interaction

Page 59: Programming the Interactive Web Shriram Krishnamurthi Brown University.

Why Does this Work?This form has both• a reference to the next program (f2)• the value of the previous input (1729)

Page 60: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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

Page 61: Programming the Interactive Web Shriram Krishnamurthi Brown University.

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


Recommended