How to Design and Generate Web Programs

1
(No Transcript)
2
(No Transcript)
3
(No Transcript)
4
(No Transcript)
5
(No Transcript)
6
(No Transcript)
7
(No Transcript)
8
(No Transcript)
9
(No Transcript)
10
(No Transcript)
11
(No Transcript)
12
(No Transcript)
13
Programming theInteractive Web

• Shriram Krishnamurthi
• Brown University

14
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)
• Microsofts Web Services

15
Where You See This

• URLs become simple
• https//onepass.continental.com/asp/statement.asp
  
• URLs become complex
• http//maps.yahoo.com/py/ddResults.py?PytTmapta
  rnametardescnewnamenewdescnewHashnewTHas
  hnewStsnewTStstlttlnsltslnnewFLUse
  AddressBelownewaddr3007SantaMonicaBoulevard
  newcszsantamonica,canewcountryusnewTFLUseA
  ddressBelownewtaddr2815SantaMonicaBoulevard
  newtcszSantaMonica,CA904042409newtcountryus
  SubmitGetDirections

16
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)

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

18
The Orbitz Problem

• Not limited to punk script monkeys!
• Also found on Web sites of
• Microsoft
• Apple
• the National Science Foundation

19
Programming InteractiveWeb Scripts
20
Printing a Message(Console)

• print
• Hello, World\n
• exit

21
Printing a Message(Web)

• print
• lthtmlgt
• ltheadgtlttitlegtTestlt/titlegt
• lt/headgt
• ltbodygt
• ltpgtHello, World!lt/pgt
• lt/bodygt
• lt/htmlgt
• exit

22
Printing Uptime(Console)

• print
• Uptime s\n
• system (uptime)
• exit

23
Printing Uptime(Web)

• print
• lthtmlgt
• ltheadgtlttitlegtUptimelt/titlegt
• lt/headgt
• ltbodygt
• ltpgtsystem (uptime)lt/pgt
• lt/bodygt
• lt/htmlgt
• exit

24
Area of Circle(Console)

• r read Enter radius
• print
• area is d\n
• (3.14rr)
• exit

25
Area of Circle(Web)
Enter radius
r get_binding radius
bindings ltpgtarea is (3.14rr)lt/pgt
26
Adding Two Numbers(Console)

• n1 read Enter first
• n2 read Enter second
• print
• sum d\n
• (n1 n2)
• exit

27
Two User Interfaces
Enter first
Enter second
Enter first
Enter second
28
Interacting with Web Scripts
29
Interacting with Web Scripts
30
Interacting with Web Scripts
31
Interacting with Web Scripts
32
Interacting with Web Scripts
33
Interacting with Web Scripts
34
Adding Two Numbers(Web)
Enter first
n1 get_binding n1
bindings ltformgtlt/formgt
35
A Central Problem

• Web scripts write a page, then terminate
• When the user replies, another script reads the
  forms bindings and performs the next step

36
Adding Two Numbers (Web)
Enter first
n1 get_binding n1
bindings ltformgtlt/formgt
Enter second
37
Adding Two Numbers(Web)
Enter first
n1 get_binding n1
bindings ltformgtlt/formgt
n2 get_binding n2
bindings ltpgtsum (n1 n2)lt/pgt
Enter second
free variable
38
In Practice

• System signals an error
• The user doesnt 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

39
Adding Two Numbers(Web)
Enter first
n1 get_binding n1
bindings ltformgtlt/formgt
n2 get_binding n2
bindings ltpgtsum (n1 n2)lt/pgt
Enter second
40
Adding Two Numbers (Web)
Enter first
n1 get_binding n1
bindings ltformgtlt/formgt
n1 get_binding n1 bindings n2
get_binding n2 bindings ltpgtsum (n1
n2)lt/pgt
Enter second
n1
Enter second
41
The Actual Form

• lthtmlgt
• ltheadgt
• lttitlegtThe Addition Pagelt/titlegt
• ltbodygt
• ltpgtEnter the second numberlt/pgt
• ltform method"get"
• action"http//www. .../cgi-second.ss"gt
• ltinput type"hidden" namen1" value1729"gt
• ltinput type"text" namen2" value"0"gt
• lt/formgt
• lt/htmlgt

42
Problems

• Generating forms is a pain
• Programmer must manually track these hidden
  fields
• Mistakes can have painful consequences
• (Worst, silently induce dynamic scope)

43
Bad News

• Thats the easy part!

44
Whats in a URL?

• Lets go back to this URL
• http//maps.yahoo.com/py/ddResults.py?PytTmapta
  rnametardescnewnamenewdescnewHashnewTHas
  hnewStsnewTStstlttlnsltslnnewFLUse
  AddressBelownewaddr3007SantaMonicaBoulevard
  newcszsantamonica,canewcountryusnewTFLUseA
  ddressBelownewtaddr2815SantaMonicaBoulevard
  newtcszSantaMonica,CA904042409newtcountryus
  SubmitGetDirections

45
Whats in a URL?

• Lets go back to this URL
• http//maps.yahoo.com/py/ddResults.py?PytTmapta
  rnametardescnewnamenewdescnewHashnewTHas
  hnewStsnewTStstlttlnsltslnnewFLUse
  AddressBelownewaddr3007SantaMonicaBoulevard
  newcszsantamonica,canewcountryusnewTFLUseA
  ddressBelownewtaddr2815SantaMonicaBoulevard
  newtcszSantaMonica,CA904042409newtcountryus
  SubmitGetDirections

46
Breaking it Down

• Write it differently
• http//maps.yahoo.com/py/ddResults.py?
  newaddr3007SantaMonicaBoulevard
• newcszsantamonica,ca
• newcountryus
• newtaddr2815SantaMonicaBoulevard
• newtcszSantaMonica,CA904042409
• newtcountryus
• SubmitGetDirections

47
Breaking it Down

• Or
• http//maps.yahoo.com/py/ddResults.py?
• newaddr 3007SantaMonicaBoulevard
• newcsz santamonica,ca
• newcountry us
• newtaddr 2815SantaMonicaBoulevard
• newtcsz SantaMonica,CA904042409
• newtcountry us
• Submit GetDirections

It looks an awful lot like a function call!
48
The Real Picture
The script and the user are coroutines!
Event lines
script
user
49
Control Flow Back Button
A silent action!
50
Control Flow Cloning
script
user
51
Control Flow Bookmarks
script
user
52
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?

53
How to Reengineer Programsfor the Web
54
What we Want to Write

• n1 read
• Enter first
• n2 read
• Enter second
• print
• sum d\n
• (n1 n2)
• exit

55
What we are Forced to Write1 of 3

• Main () print
• ltform actionf1gt
• Enter first
• ltinput namen1gt
• lt/formgt

56
What we are Forced to Write2 of 3

• f1 (form) print
• ltform actionf2gt
• ltinput hidden namen1
• valueform.n1gt
• Enter second
• ltinput namen2gt
• lt/formgt

57
What we are Forced to Write3 of 3

• f2 (form) print
• The sum is
• form.n1 form.n2

58
Sensitive to Interaction
59
Why Does this Work?
60
Program Structure Destroyed

• n1 read
• Enter first
• n2 read
• Enter second
• print
• sum d\n
• (n1 n2)
• exit

• Main () print
• ltform actionf1gt
• Enter first
• ltinput namen1gt
• lt/formgt
• f1 (form) print
• ltform actionf2gt
• ltinput hidden namen1
• valueform.n1gt
• Enter second
• ltinput namen2gt
• lt/formgt
• f2 (form) print
• The sum is
• form.n1 form.n2

61
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