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

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

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

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 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 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 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 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/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 11/22/2005 Applet Example

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 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 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 11/22/2005 DHTML Example

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 11/22/2005 Advanced demo: OWA

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 11/22/2005 Then nothing happened for awhile Continuing innovation Relative calm In fact, lots of cool ideas fell by the wayside Why?

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 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: This is the key point!

23 11/22/2005 AJAX Example

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

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 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 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 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 11/22/2005 Credits + References Derek Denny-Brown  Saw lots of history in Microsoft Useful web pages for history:   Useful web pages for AJAX    Tutorial (JSP): 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

The End Questions?