Abstract

The Web's architecture has very simple principles revolving around the ideas of placing a heavy emphasis on a consistent and global identification mechanism for resources, a standardized way of how resource representations can be retrieved, and a standardized way of how resource representations should be usable by using standardized media types. This lecture presents an overview of these architectural principles and illustrates them with using blogs as an example of Web-based applications.

Today's Reading

Summary of Ian Jacobs, Norman Walsh, Architecture of the World Wide Web, Volume One, World Wide Web Consortium, Recommendation REC-webarch-20041215, December 2004

Examples (or counter-examples) for the following principles, practices, and constraints:
- URIs identify a single resource (versioning, aliases)
- URI opacity (assuming a specific resource representation)
- Available representations (XML namespaces as really bad example)
- Hypertext links (resource representations should be good Web citizens)
- Orthogonality (identification, interaction, and representation are orthogonal)

Outline (Parsimony)

Parsimony [3]
Principles [4]
Constraints and Good Practices [2]
Blogs as Web Apps [7]
Conclusions [1]

Keep It Simple

Loose coupling vs. tight coupling
- fewer requirements for cooperation mean fewer potential sources of problems
- taking independent developments into consideration (graceful degradation)
Parsimony may conflict with optimization
- a fully backlinked Web would be a very different hypermedia system
- modifying resources would be expensive and require considerable efforts
- an uncontrolled Web allows failure and innovative development
Programming Languages vs. Frameworks
- programming languages are very simple and very powerful
- frameworks are more complex and have some choices built into them
- both can be used to build good systems
- framework applications are more likely to not do really innovative things

Web Design as System Design

There are two ways of constructing a software design: One way is to make it so simple that there are obviously no deficiencies, and the other way is to make it so complicated that there are no obvious deficiencies. The first method is far more difficult.

C. A. R. Hoare, The Emperor's Old Clothes, 1980 Turing Award Lecture

Web: URI + HTTP + HTML ( + XML)
OASIS: Six SOA simplification committees for about 60 WS-* specs

Technology Blinders

Web architecture is an additional set of constraints
- it is not a very complicated set of constraints
- but it still makes life more complicated than in an unconstrained world
- it may require a major redesign of an application
Technology providers sometimes ignore Web architecture
- multimedia presentation concepts are often disconnected from the Web
- hypermedia researchers often regard the Web as inferior (or not as hypermedia at all)
- questions of client capabilities are often ignored (or brushed aside using statistics)
Integration vs. Transport
- integrating into the Web requires application to conform to Web architecture
- sitting on top of the Web just requires to use HTTP for data transfer
- many Web Technologies are not integrated into the Web
- many Web Applications are not integrated into the Web

Outline (Principles)

Parsimony [3]
Principles [4]
Constraints and Good Practices [2]
Blogs as Web Apps [7]
Conclusions [1]

Identification

Everything should be identified in a uniform way
Identification and access methods evolve over time
- sms: and callto: did not exist when the Web was created
Identification and access support evolve over time
- tel: now can be supported by an increasing number of clients
The Web is one huge proof for the power of network effects
- it also is a lesson for many who did not take it seriously and failed

Interaction

Many URI schemes are named after protocols
- http: can be accessed using the Hypertext Transfer Protocol (HTTP)
- ftp: can be accessed using the File Transfer Protocol (FTP)
- mailto: sends electronic mail using the Simple Mail Transfer Protocol (SMTP)
Some URI schemes do not really imply a protocol
- mailto: sends electronic mail using the Simple Mail Transfer Protocol (SMTP)
- mailto: may use any other appropriate technology for sending email
Some URI schemes have no protocol for dereferencing resources
- urn: URIs are abstract names from some namespace
- urn:ietf:rfc:2648 identifies an IETF standard and not some specific copy
- geo:27.988056,86.925278 identifies a physical resource (accessing it is really hard)

Data Formats

Agreement on the interpretation of resource representations
HTML was the first standardized data format on the Web
- CSS and XML have become successful formats as well
Some data formats are de-facto standards as Web formats
- GIF and JPEG for images and PNG as the successor of GIF
Some formats are less integrated but still widely used
- PDF for paginated documents
Some formats have become replacements for missing standards
- Flash for audio and video because no single format was sufficiently successful
Some formats were intended to become standards but failed
- SVG for vector graphics
- SMIL for multimedia presentations

Identifier, Resource, and Representation

Outline (Constraints and Good Practices)

Parsimony [3]
Principles [4]
Constraints and Good Practices [2]
Blogs as Web Apps [7]
Conclusions [1]

Constraints

Some things on the Web can be inconsistent
- guaranteeing consistency by design can lead to tight coupling
- well-defined ways of handling inconsistencies are better scalable
Some things on the Web are not perfect
- technologies being used in ways not anticipated (XML, XML Namespaces)
- company goals vs. the greater good (browser war)
The ideal Web vs. the real Web
- dealing with a given landscape can introduce additional constraints
- handling these constraints should not violate the general principles

Good Practices

Design for openness and extensibility is a key factor
- design for and support evolution and extension and reuse
- try to be a good Web citizen by embracing integration
Design with the Web in mind
- use Web standards where appropriate (URIs for identification)
- even intranet apps typically evolve and should be designed for the Web
Make content visible, accessible, usable, reusable
- URI design guidelines should be defined and followed
- think about aggregation and granularity and access to resources
- use well-defined and well-documented XML for B2B scenarios
- reuse existing vocabularies or vocabulary parts whenever possible

Outline (Blogs as Web Apps)

Parsimony [3]
Principles [4]
Constraints and Good Practices [2]
Blogs as Web Apps [7]
Conclusions [1]

Blog in XML

<?xml version="1.0" encoding="UTF-8"?>
<blogxml>
 <post date="2006-05-25">
  <title>Holyrood Park</title>
  <text>Located in the middle of Edinburgh, Holyrood Park is a hill with a lot of rock and grass.</text>
  <image src="holyrood-park">View from the west with the most spectacular cliffs.</image>
 </post>
 <post date="2007-05-15">
  <title>Half Dome</title>
  <text>The trip to half dome is a long one, but very beautiful and with a spectacular final climb.</text>
  <image src="half-dome">Me on top of half dome.</image>
 </post>
 <post date="2007-05-20">
  <title>Fifth Lake</title>
  <text>The seven lakes loop offers views of (surprise!) seven lakes settled in a remote valley.</text>
  <image src="fifth-lake">Still a lot of ice on fifth lake.</image>
 </post>
 <post date="2007-05-22">
  <title>Golden Canyon</title>
  <text>Golden Canyon leads to the famous Zabriskie Point overlook.</text>
  <image src="golden-canyon">A maze of erosion patterns carved in sediment.</image>
 </post>
 <post date="2007-08-12">
  <title>Red Rock Canyon</title>
  <text>Red Rock Canyon is easily reachable from Las Vegas and has some nice trails.</text>
  <image src="red-rock-canyon">Red Rock Canyon is called Red Rock Canyon for a reason.</image>
 </post>
</blogxml>

Support URI Guessing (Year Index)

  <xsl:for-each select="distinct-values( for $i in //post/@date return substring($i, 1, 4) )">
   <xsl:result-document href="dretblog/{current()}/index.html">
    <html>
     <head><xsl:sequence select="dret:head(format-date(xs:date(concat(current(), '-01-01')), '[Y]'), '../')"/></head>
     <body>
      <h1><a href="..">dretblog</a></h1>
      <h2><xsl:value-of select="format-date(xs:date(concat(current(), '-01-01')), '[Y]')"/></h2>
      <xsl:for-each select="$stdin//post[starts-with(@date, current())]">
       <p><a href="../{translate(@date, '-', '/')}/{dret:postname(title)}"><xsl:value-of select="concat(format-date(@date, '[F] [MNn] [D], [Y]'), ': ', title)"/></a></p>
      </xsl:for-each>
     </body>
    </html>
   </xsl:result-document>
  </xsl:for-each>

Support URI Guessing (Month Index)

  <xsl:for-each select="distinct-values( for $i in //post/@date return substring($i, 1, 7) )">
   <xsl:result-document href="dretblog/{translate(current(), '-', '/')}/index.html">
    <html>
     <head><xsl:sequence select="dret:head(format-date(xs:date(concat(current(), '-01')), '[MNn] [Y]'), '../../')"/></head>
     <body>
      <h1><a href="../..">dretblog</a></h1>
      <h2>
       <xsl:value-of select="format-date(xs:date(concat(current(), '-01')), '[MNn] ')"/>
       <a href="../.."><xsl:value-of select="format-date(xs:date(concat(current(), '-01')), '[Y]')"/></a>
      </h2>
      <xsl:for-each select="$stdin//post[starts-with(@date, current())]">
       <p><a href="../../{translate(@date, '-', '/')}/{dret:postname(title)}"><xsl:value-of select="concat(format-date(@date, '[F] [MNn] [D], [Y]'), ': ', title)"/></a></p>
      </xsl:for-each>
     </body>
    </html>
   </xsl:result-document>
  </xsl:for-each>

Support URI Guessing (Day Index)

  <xsl:for-each select="distinct-values(//post/@date)">
   <xsl:result-document href="dretblog/{translate(current(), '-', '/')}/index.html">
    <html>
     <head><xsl:sequence select="dret:head(format-date(xs:date(current()), '[F] [MNn] [D], [Y]'), '../../../')"/></head>
     <body>
      <h1><a href="../../..">dretblog</a></h1>
      <h2>
       <xsl:value-of select="format-date(xs:date(current()), '[F] ')"/>
       <a href=".."><xsl:value-of select="format-date(xs:date(current()), '[MNn]')"/></a>
       <xsl:value-of select="format-date(xs:date(current()), ' [D], ')"/>
       <a href="../.."><xsl:value-of select="format-date(xs:date(current()), '[Y]')"/></a>
      </h2>
      <xsl:for-each select="$stdin//post[starts-with(@date, current())]">
       <p><a href="../../../{translate(@date, '-', '/')}/{dret:postname(title)}"><xsl:value-of select="concat(format-date(@date, '[F] [MNn] [D], [Y]'), ': ', title)"/></a></p>
      </xsl:for-each>
     </body>
    </html>
   </xsl:result-document>
  </xsl:for-each>

Support Spontaneous Navigation

     <body>
      <h1><xsl:value-of select="title"/></h1>
      <h2>
       <a href="./"><xsl:value-of select="format-date(@date, '[F]')"/></a>
       <xsl:text> </xsl:text>
       <a href=".."><xsl:value-of select="format-date(@date, '[MNn]')"/></a>
       <xsl:text> </xsl:text>
       <a href="./"><xsl:value-of select="format-date(@date, '[D]')"/></a>
       <xsl:text>, </xsl:text>
       <a href="../.."><xsl:value-of select="format-date(@date, '[Y]')"/></a>
      </h2>
      <a href="../../../../../img/{image/@src}.jpg" title="{image}"><img src="../../../../../img/{image/@src}-small.jpg"/></a>
      <p><xsl:value-of select="text"/></p>
     </body>

Publishing as Atom Feed

  <feed xmlns="http://www.w3.org/2005/Atom" xml:base="http://dret.net/lectures/web-fall07/src/dretblog.atom">
   <title>dretblog</title>
   <id>http://dret.net/lectures/web-fall07/src/dretblog.atom</id>
   <link rel="self" href=""/>
   <updated><xsl:value-of select="current-dateTime()"/></updated>
   <author><name>Erik Wilde</name></author>
   <xsl:for-each select="//post">
    <entry xml:base="http://dret.net/lectures/web-fall07/src/{translate(@date, '-', '/')}/{dret:postname(title)}">
     <title><xsl:value-of select="title"/></title>
     <link href="http://dret.net/lectures/web-fall07/src/{translate(@date, '-', '/')}/{dret:postname(title)}"/>
     <id><xsl:value-of select="concat('http://dret.net/lectures/web-fall07/src/', translate(@date, '-', '/'), '/', dret:postname(title))"/></id>
     <published><xsl:value-of select="@date"/>T00:00:00Z</published>
     <updated><xsl:value-of select="current-dateTime()"/></updated>
     <content type="xhtml">
      <div xmlns="http://www.w3.org/1999/xhtml">
       <h1><xsl:value-of select="title"/></h1>
       <h2><xsl:value-of select="format-date(@date, '[F] [MNn] [D], [Y]')"/></h2>
       <a href="http://dret.net/lectures/web-fall07/img/{image/@src}.jpg" title="{image}"><img src="http://dret.net/lectures/web-fall07/img/{image/@src}-small.jpg"/></a>
       <p><xsl:value-of select="text"/></p>
      </div>
     </content>
    </entry>
   </xsl:for-each>
  </feed>

Blog as Atom Feed

<feed xmlns="http://www.w3.org/2005/Atom" xml:base="http://dret.net/lectures/web-fall07/src/dretblog.atom">
 <title>dretblog</title>
 <id>http://dret.net/lectures/web-fall07/src/dretblog.atom</id>
 <link rel="self" href=""/>
 <updated>2007-08-30T00:52:27.718-07:00</updated>
 <author>
  <name>Erik Wilde</name>
 </author>
 <entry xml:base="http://dret.net/lectures/web-fall07/src/2006/05/25/holyrood_park">
  <title>Holyrood Park</title>
  <link href="http://dret.net/lectures/web-fall07/src/2006/05/25/holyrood_park"/>
  <id>http://dret.net/lectures/web-fall07/src/2006/05/25/holyrood_park</id>
  <published>2006-05-25T00:00:00Z</published>
  <updated>2007-08-30T00:52:27.718-07:00</updated>
  <content type="xhtml">
   <div xmlns="http://www.w3.org/1999/xhtml">
    <h1>Holyrood Park</h1>
    <h2>Thursday May 25, 2006</h2>
    <a href="http://dret.net/lectures/web-fall07/img/holyrood-park.jpg" title="View from the west with the most spectacular cliffs.">
     <img src="http://dret.net/lectures/web-fall07/img/holyrood-park-small.jpg"/>
    </a>
    <p>Located in the middle of Edinburgh, Holyrood Park is a hill with a lot of rock and grass.</p>
   </div>
  </content>
 </entry>

Outline (Conclusions)

Parsimony [3]
Principles [4]
Constraints and Good Practices [2]
Blogs as Web Apps [7]
Conclusions [1]

Web Architecture Essentials

Principles (violating these causes architectural problems)
Constraints (disregarding these causes technical problems)
Good Practices (ignoring these causes user problems)

Architecture of the World Wide Web

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information
2007-08-30

Abstract

Today's Reading

Outline (Parsimony)

Keep It Simple

Web Design as System Design

Technology Blinders

Outline (Principles)

Identification

Interaction

Data Formats

Identifier, Resource, and Representation

Outline (Constraints and Good Practices)

Constraints

Good Practices

Outline (Blogs as Web Apps)

Blog in XML

Support URI Guessing (Year Index)

Support URI Guessing (Month Index)

Support URI Guessing (Day Index)

Support Spontaneous Navigation

Publishing as Atom Feed

Blog as Atom Feed

Outline (Conclusions)

Web Architecture Essentials

Architecture of the World Wide Web

Web Architecture (INFO 290-03)

Erik Wilde, UC Berkeley School of Information2007-08-30

Abstract

Today's Reading

Outline (Parsimony)

Keep It Simple

Web Design as System Design

Technology Blinders

Outline (Principles)

Identification

Interaction

Data Formats

Identifier, Resource, and Representation

Outline (Constraints and Good Practices)

Constraints

Good Practices

Outline (Blogs as Web Apps)

Blog in XML

Support URI Guessing (Year Index)

Support URI Guessing (Month Index)

Support URI Guessing (Day Index)

Support Spontaneous Navigation

Publishing as Atom Feed

Blog as Atom Feed

Outline (Conclusions)

Web Architecture Essentials

Erik Wilde, UC Berkeley School of Information
2007-08-30