1 / 61

Exploring Programming for Interactive Web: APIs, Dark Matter, & Dynamic Content

Learn about programming for the interactive web, including APIs, dynamic content, and the role of dark matter in web development. Understand how web scripts interact and handle user interfaces effectively.

setor
Download Presentation

Exploring Programming for Interactive Web: APIs, Dark Matter, & Dynamic Content

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Programming theInteractive Web Shriram Krishnamurthi Brown University

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

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

  4. 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)

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

  6. The Orbitz Problem Not limited to punk script monkeys! Also found on Web sites of • Microsoft • Apple • the National Science Foundation • …

  7. Programming InteractiveWeb Scripts

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

  9. Printing a Message(Web) print <html> <head><title>Test</title> </head> <body> <p>Hello, World!</p> </body> </html> exit

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

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

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

  13. Area of Circle(Web) r = get_binding “radius” bindings <p>area is (3.14*r*r)</p>

  14. Adding Two Numbers(Console) n1 = read “Enter first: ” n2 = read “Enter second: ” print “sum: %d\n” (n1 + n2) exit

  15. Two User Interfaces Enter first: Enter second:

  16. Interacting with Web Scripts

  17. Interacting with Web Scripts

  18. Interacting with Web Scripts

  19. Interacting with Web Scripts

  20. Interacting with Web Scripts

  21. Interacting with Web Scripts

  22. Adding Two Numbers(Web) n1 = get_binding “n1” bindings <form>…</form>

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

  24. n2 = get_binding “n2” bindings <p>sum: (n1 + n2)</p> Adding Two Numbers (Web) n1 = get_binding “n1” bindings <form>…</form>

  25. Adding Two Numbers(Web) n1 = get_binding “n1” bindings <form>…</form> n2 = get_binding “n2” bindings <p>sum: (n1 + n2)</p> “free variable”

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

  27. Adding Two Numbers(Web) n1 = get_binding “n1” bindings <form>…</form> n2 = get_binding “n2” bindings <p>sum: (n1 + n2)</p>

  28. Adding Two Numbers (Web) n1 = get_binding “n1” bindings <form>…</form> n1 = get_binding “n1” bindings n2 = get_binding “n2” bindings <p>sum: (n1 + n2)</p>

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

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

  31. Bad News That’s the easy part!

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

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

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

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

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

  37. script user script user Control Flow: Back Button A silent action!

  38. script user Control Flow: Cloning script user

More Related