1. An Idiosyncratic History of Web-Page Generation Denise Draper Dev Manager Webdata XML Microsoft

2. 2 11/22/2005 Outline First generation: scripting and stylesheets Second generation: DHTML and Applets Third generation(?): AJAX Where next?

3. 3 11/22/2005 In the beginning was HTML Beginnings around 1990, derived from SGML A sample HTML instance An Example of Structure Here's a typical paragraph. Item one has an anchor Here's item two.

4. 4 11/22/2005 In the beginning was HTML Key features:  Easier than SGML to parse and render  Open format: run on any HW & OS  Text base made editing easy  HTTP for linking Downsides:  Hard to find stuff… Yahoo to the rescue  Pages are static: no interactivity

5. 5 11/22/2005 Which quickly begat scripting Server-side scripting was first:  CGI scripts  Forms in HTML passed parameters via URL query notation  Many languages used, especially Perl Example: http://www.census.gov/cgi-bin/gazetteer http://www.census.gov/cgi-bin/gazetteer

6. 6 11/22/2005 Which quickly begat scripting Key features:  Parameters made it possible to generate custom web pages Downsides:  Downloading the same boilerplate for all pages started to get annoying.

7. 7 11/22/2005 And Stylesheets … Applies the “intro” style to the paragraph … Inline definition of styling attributes … Doesn’t show range of text at all Originally designed to simplify web pages by separating content from style Separation of stylesheets allowed controlling common formatting for a whole web site The use of display=none was used as a way to separate content from control

8. 8 11/22/2005 Mimeviewer: a side-bar in history Stylesheets taken to the limit:  Stylesheet as a transformation program (XSL)  Content is sent as XML Still used in some places, e.g. for localization

9. 9 11/22/2005 Checkpoint: what’s what Server: Serves static HTML pages or creates w/ CGI scripts click=HTTP request url+params HTTP Response=HTML User experience: Click = page load some pages customized Browser: Renders HTML pages Understands stylesheets (Approx 1995, Netscape 3, IE 3)

10. 10 11/22/2005 Wouldn’t it be cool if The page could really be a tiny program that ran on the client?  Java applets  Microsoft ActiveX controls The page could be updated in place to change it’s content?  Mimeviewer + Data Islands  DHTML = HTML 4.0/CSS + javascript … And thus we have Netscape/IE 4

11. 11 11/22/2005 Java Applets: run code in the browser tag introduces applet content Applet  Runs in its own sandboxed process  Keeps its own state  Has full rendering capabilities  Is fully interactive (responds to events and can generate its own behavior)

12. 12 11/22/2005 Applet Example

13. 13 11/22/2005 ActiveX Same idea, but:  Windows specific  Uses components installed in OS  Execution not sandboxed  …thus both powerful and the source of many security concerns

14. 14 11/22/2005 Applets/ActiveX Key features:  Arbitrary code (java or windows)  Complete interactivity Downsides:  Slow to download  Have to write code  Programming model tricky (especially state management)

15. 15 11/22/2005 DHTML keeps the focus on HTML The D stands for dynamic, which really means self-modifying  In memory representation (DOM) of page Individual elements can be identified by id: …  DOM is modified by client-side scripts document.getElementbyID( " intro " ).color=red  Scripts are triggered by events  Page is re-rendered as it changes

16. 16 11/22/2005 DHTML Example

17. 17 11/22/2005 DHTML Key features:  Modify parts of pages without reload Downsides:  Slow  Programming model tricky (mixing server & client-side scripting)  Hard to make it look good

18. 18 11/22/2005 Advanced demo: OWA

19. 19 11/22/2005 Checkpoint: what’s what Server: Serves/creates HTML pages containing client-side script; Serves applets or activeX HTTP request post Response=HTML or download Browser: Renders HTML pages; Understands stylesheets; Provides execution context for code; Presents drawing surface for code; Manages in-memory DOM for pages; Provides event management User experience: Local interactivity; Some pages “page-like” (DHTML) Some pages or regions completely “rich client”; Slow download times (Approx 1997, Netscape 4, IE 4) mouse action etc=event

20. 20 11/22/2005 Then nothing happened for awhile Continuing innovation 1991-1997 Relative calm 1998-2003 In fact, lots of cool ideas fell by the wayside Why?

21. 21 11/22/2005 Why? Not enough bandwidth New technologies not broadly supported; web designers went for least common denominator Change of focus  Push technologies “channels” (sorta like RSS), died  Then Web services, J2EE,.NET and the.com boom/bubble

22. 22 11/22/2005 Then came AJAX Asynchronous Javascript and XML Mostly just putting the pieces together:  Client-side script or code running in thread  Manipulating the DHTML DOM  And using HTTP request to get bits of data to feed into page Asynchronously: don’t wait for response Google Suggest the quintessential example: http://www.google.com/webhp?complete=1&hl=en This is the key point!

23. 23 11/22/2005 AJAX Example

24. 24 11/22/2005 Checkpoint: what’s what HTTP request post Response=HTML or download (Approx 2004) mouse action etc=event

25. 25 11/22/2005 Why now? Well somebody gave it a name… Seriously:  Critical capability (XMLHTTPRequest) supported by all major browsers  Everybody has broadband  Web services re-applied to browser applications

26. 26 11/22/2005 So what’s next? Factors:  Rich media everywhere  Devices everywhere  Shared data “in the cloud”  In the home: personalization, sharing  In enterprise: manpower the dominant cost

27. 27 11/22/2005 What’s next? Blur the line between rich client and web client  Interaction models: indistinguishable  Deployment model: indistinguishable? If the cloud is the master, and your device simply caches some stuff… Applies both to bits (the executable) and state (your data) Microsoft projects: Avalon

28. 28 11/22/2005 So what’s next? Creating the client application  Code is still too complicated State management, multi-threading Systems like Ruby on Rails make lots of built in assumptions to simplify development  Many form factors Separating data from presentation (again)  web services for data  personalized & device-dependent styles Support for development and debugging

29. 29 11/22/2005 Credits + References Derek Denny-Brown  Saw lots of history in Microsoft Useful web pages for history:  http://www.livinginternet.com/  http://www.dejavu.org/ http://www.dejavu.org/ Useful web pages for AJAX  http://en.wikipedia.org/wiki/AJAX http://en.wikipedia.org/wiki/AJAX  http://www.xml.com/pub/a/2005/02/09/xml-http-request.html http://www.xml.com/pub/a/2005/02/09/xml-http-request.html  Tutorial (JSP): http://www-128.ibm.com/developerworks/edu/wa-dw- wa-ajax-i.html?S_TACT=105AGX59&S_CMP=HP&dgr-lnxw09AJAXappshttp://www-128.ibm.com/developerworks/edu/wa-dw- wa-ajax-i.html?S_TACT=105AGX59&S_CMP=HP&dgr-lnxw09AJAXapps

30. The End Questions?