13. Programming the Interactive 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) –Microsoft’s 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?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

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 Interactive Web Scripts

20. Printing a Message (Console) print “Hello, World\n” exit

21. Printing a Message (Web) print Test Hello, World! exit

22. Printing Uptime (Console) print “Uptime: %s\n” system (“uptime”) exit

23. Printing Uptime (Web) print Uptime system (“uptime”) exit

24. Area of Circle (Console) r = read “Enter radius: ” print “area is %d\n” (3.14*r*r) exit

25. Area of Circle (Web) Enter radius: r = get_binding “radius” bindings area is (3.14*r*r)

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

34. Adding Two Numbers (Web) Enter first: n1 = get_binding “n1” bindings …

35. 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

36. Adding Two Numbers (Web) Enter first: n1 = get_binding “n1” bindings … Enter second: n2 = get_binding “n2” bindings sum: (n1 + n2)

37. Adding Two Numbers (Web) Enter first: n1 = get_binding “n1” bindings … Enter second: n2 = get_binding “n2” bindings sum: (n1 + n2) “free variable”

38. 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”

39. Adding Two Numbers (Web) Enter first: n1 = get_binding “n1” bindings … Enter second: n2 = get_binding “n2” bindings sum: (n1 + n2)

40. Enter second: : n1: Adding Two Numbers (Web) Enter first: n1 = get_binding “n1” bindings … Enter second: n1 = get_binding “n1” bindings n2 = get_binding “n2” bindings sum: (n1 + n2)

41. The Actual Form The Addition Page Enter the second number: <form method="get" action="http://www..../cgi-second.ss">

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 That’s the easy part!

44. 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

45. 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

46. 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

47. Breaking it Down Or: http://maps.yahoo.com/py/ddResults.py? newaddr3007+Santa+Monica+Boulevard newcszsanta+monica,+ca newcountryus newtaddr2815+Santa+Monica+Boulevard newtcszSanta+Monica,+CA+904042409 newtcountryus SubmitGet+Directions It looks an awful lot like a function call!

48. The Real Picture The script and the user are coroutines! scriptuser Event lines

49. Control Flow: Back Button scriptuserscriptuser A silent action!

50. Control Flow: Cloning scriptuser scriptuser

51. Control Flow: Bookmarks scriptuser scriptuser

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 Programs for 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 Write: 1 of 3 Main () = print Enter first:

56. What we are Forced to Write: 2 of 3 f1 (form) = print <input hidden name=“n1” value=form.n1> Enter second:

57. What we are Forced to Write: 3 of 3 f2 (form) = print The sum is form.n1 + form.n2

58. Sensitive to Interaction

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

60. Program Structure Destroyed n1 = read “Enter first: ” n2 = read “Enter second: ” print “sum: %d\n” (n1 + n2) exit Main () = print Enter first: f1 (form) = print <input hidden name=“n1” value=form.n1> Enter second: 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