Lecture 06: Web Technologies

Copyright Notice

Some material in this lecture is adapted from the teaching materials of the book “Web Services: Concepts, Architectures and Applications” and is thus Copyright © 2003 Gustavo Alonso, ETH Zürich and/or Copyright © 2004 Springer-Verlag Berlin Heidelberg.

Web Technologies

The need to integrate, however, is not limited to the systems within a single company. The same advantages that can be derived from automating a company's business processes can be obtained from automating business processes encompassing several companies… This chapter serves as a transition between the chapters that precede, which focus on [single company EAI], and the chapters that follow, which describe Web services for [multiple company EAI]. The purpose of this chapter is to introduce the basic Web technologies that are used to implement the “Web” portion of Web services.
— Introduction to Chapter 4 of our Textbook

Core Web Technologies
Web-Based Remote Clients
Application Servers
Web Technologies for Application Integration

Core Web Technologies

The Web is layered on top of the Internet that formed out of initial work on the ARPANET back in the late 1960s.
- This work led to the creation of the IP and TCP protocols that form the foundation for technologies that enable information sharing across the Internet.
- Early information sharing protocols include Telnet, SMTP, FTP
- Precursors to the Web: Archie and Gopher (when Mosaic appeared for the Web, Archie and Gopher were dead in the water)
Web Technologies include
- HTTP (network protocol)
- HTML (data format with embedded hyperlinks)
- URI, URL, URN (What's the Difference?)
- Web server (serves information)
- Web browser (displays information)
The basic model of the Web is that “everything is a resource”; All resources have names (URIs) and live at a location given by a URL. A Web client can use the information in a URL to locate and retrieve its associated resource.

HTTP Methods

HTTP defines various methods that can be applied to resources; The key methods are
- GET (retrieve a resource)
- HEAD (retrieve metadata about a resource)
- POST (add information to a resource)
- PUT (create a new resource)
- DELETE (delete an existing resource)
The GET method can be transformed into a “conditional” GET by adding certain headers to the request; the basic idea is to only retrieve information at a given URL if it has changed since the last time you looked at it.
These methods are the foundation upon which Web services and REST Web applications are built
Quick Demo using Telnet and my local webserver: GET, HEAD, conditional GET
- GET
  - GET index.html HTTP/1.0
  - GET /index.html HTTP/1.0
  - GET /index.html HTTP/1.1
  - GET /index.html HTTP/1.1
    Host: localhost
- HEAD
  - HEAD /index.html HTTP/1.0
  - HEAD /index.html HTTP/1.1
    Host: localhost
- conditional GET
  - GET /index.html HTTP/1.1
    Host: localhost
    If-Modified-Since: Fri, 04 May 2001 00:00:38 GMT
Basic Architectural Elements of the Web (proxy, gateway, and firewalls are optional)

Basic Architectural Elements of the World Wide Web

Disadvantages of HTTP (and their Solutions)

HTTP does not encrypt data before sending it
- Solution: Secure Sockets Layer (SSL)
HTTP is a stateless protocol; no protocol-defined ways to mark a series of HTTP calls as “related”
- Solution: HTTP cookies
- A cookie is a piece of information that is sent by a server to a client; the server is asking the client to store this information and to send it each time they reference a particular class of URLs (such as all URLs hosted by the server)
- Modern web browsers provide tools for managing the cookies that they store

Web-Based Remote Clients

Conventional 3-tier architectures are designed to operate within a single company; clients are used by employees within the safe (network) boundaries of the company
There is no technological reason why this can't be extended to users outside the company's boundaries
The textbook develops a motivating scenario around ATMs
- ATMs are an example of a remote client of a bank's IT services
- They are deployed widely and let the bank achieve several goals: avoid the need to open new branches, reduce labor costs, provide convenience to their customers, etc.
- Since ATMs are so useful, why not extend the concept and put an ATM in each customer's home?
- That's impractical, so lets make the bank's services available via the Web

Remote clients can access services via the Internet

Technologies for Achieving Remote Clients

Straight HTML and Links (!!!)
Applets

Applets enable rich client-side functionality

CGI

CGI scripts allow programs to dynamically generate HTML content

Servlets

Servlets are similar to CGI scripts but make more efficient use of a server's resources

Application Servers

Application Servers are middleware for Web Applications
The key differences between application servers and conventional middleware are
- The Web is the primary access channel
- The presentation layer is much more articulated with a wide range of technologies that can be used to prepare Web documents for delivery back to the client

Application Server Architecture

A standard J2EE-based application server is configured to support the following key APIs

J2EE-based APIs for Application Servers

Application Server Support for the Application Layer

Provides functionality similar to TP Monitors (via J2EE and JNDI) and Message Brokers (via JMS)

Support for application logic in J2EE-based application servers

Knowledge of J2EE is not required for this class; see book for more details

Application Server Support for the Presentation Layer

Application server support for the presentation layer is what differentiates app servers from other types of middleware
A typical app server can support
- Web browsers
- Applications and Devices
- E-mail programs
- Web services clients
Presentation logic support includes
- multi-device content delivery
- servlets, JSPs, XML support, etc.
- personalization logic

Support for presentation layer in J2EE-based application servers

Example of JSP-style web page (actually taken from a Ruby on Rails application, using Ruby's .rhtml file type)

                <% for product in @products %>
                  <div class="catalogentry">
                      <img src="<%= product.image_url %>" />
                      <h3><%= h(product.title) %></h3>
                      <%= product.description %>
                      <span class="catalogprice"><%= fmt_dollars(product.price) %></span>
                      <%= link_to 'Add to Cart',
                                  {:action => 'add_to_cart', :id => product },
                                  :class => 'addtocart' %><br />
                  </div>
                  <div class="separator">&nbsp;</div>
                <% end %>
                <%= link_to "Show my cart", :action => "display_cart" %>

The code above is embedded into a larger page template that looks like this

                <html>
                  <head>
                    <title>Pragprog Books Online Store</title>
                    <%= stylesheet_link_tag "scaffold", "depot", :media => "all" %>
                  </head>
                  <body>
                    <div id="banner">
                      <img src="/images/logo.png" />
                      <%= @page_title || "Pragmatic Bookshelf" %>
                    </div>
                    <div id="columns">
                      <div id="side">
                        Home<br />
                        Questions<br />
                        News<br />
                        Contact<br />
                      </div>
                      <div id="main">
                        <% if @flash[:notice] -%>
                          <div id="notice"><%= @flash[:notice] %></div>
                        <% end -%>
                        <%= @content_for_layout %>
                      </div>
                    </div>
                  </body>
                </html>

When this page is accessed in the Web application, a program called ERb for Embedded Ruby, parses the two templates and converts them into a ruby program that produces the final HTML page as output.

                <html>
                  <head>
                    <title>Pragprog Books Online Store</title>
                    <link href="/stylesheets/scaffold.css?1127302403" media="all" rel="Stylesheet" type="text/css" />
                <link href="/stylesheets/depot.css?1127302540" media="all" rel="Stylesheet" type="text/css" />
                  </head>
                  <body>
                    <div id="banner">
                      <img src="/images/logo.png" />

                      Pragmatic Bookshelf
                    </div>
                    <div id="columns">
                      <div id="side">
                        Home<br />
                        Questions<br />
                        News<br />
                        Contact<br />

                      </div>
                      <div id="main">

                  <div class="catalogentry">
                      <img src="http://www.cs.colorado.edu/users/kena/images/sk_auto_small.jpg" />
                      <h3>Pragmatic Project Automation</h3>
                      A rip-roaring, thigh-slapping read. I laughed, I cried, and then I laughed some more. A must-have book for anyone writing web applications.
                      <span class="catalogprice">$29.95</span>
                      <a href="/store/add_to_cart/1" class="addtocart">Add to Cart</a><br />

                  </div>
                  <div class="separator">&nbsp;</div>

                  <div class="catalogentry">
                      <img src="http://www.cs.colorado.edu/users/kena/images/ken.jpg" />
                      <h3>Ken's Book</h3>
                      This is a really cool book about software design.
                      <span class="catalogprice">$300.00</span>
                      <a href="/store/add_to_cart/3" class="addtocart">Add to Cart</a><br />

                  </div>
                  <div class="separator">&nbsp;</div>

                  <div class="catalogentry">
                      <img src="http://www.cs.colorado.edu/users/kena/images/rubyonrails.png" />
                      <h3>Ruby On Rails</h3>
                      A pretty good introduction to the Ruby on Rails framework.
                      <span class="catalogprice">$30.00</span>
                      <a href="/store/add_to_cart/2" class="addtocart">Add to Cart</a><br />

                  </div>
                  <div class="separator">&nbsp;</div>

                <a href="/store/display_cart">Show my cart</a>

                      </div>
                    </div>
                  </body>
                </html>

Web Technologies for Application Integration

When integrating two 3-tier systems across the Internet, the following possibilities exist:

Number of Ways Two 3-Tier Systems can be Integrated Across a WAN

Before the Web, only two options existed due to the protocols available and the lack of standardization
- Integrate via clients, i.e. clients know about both systems
- Integrate via middleware, i.e., middleware layers would forward requests to one another, when needed

A standard protocol makes middleware to middleware integration possible.

Even so, such integration was difficult because third-party systems typically live behind a firewall
EXCEPT that the Web is so popular that port 80 is rarely blocked behind a firewall
As such, companies started tunneling the messages of other protocols by hiding them within HTML (or XML) documents and sending them to programs via the open HTTP port!

HTTP is used to tunnel messages between applications because port 80 is typically not blocked by firewalls

Coming up Next

In lecture 7, we will cover chapter 5 of the textbook, which is the first chapter covering Web services (at a high-level)
In lecture 8, we will begin our look at the main standards related to Web services. I will need volunteers to do 15-20 minute presentations on SOAP, WSDL, and UDDI. Any takers?
- You can of course use the textbook (chapter 6) as a reference source, I'd also like to see examples of these formats in use (if possible).