web architecture : first week hand out

Web Application ArchitecturesModule 1: Introduction and Background

Overview

c© 2011-13 G.L. Heileman Module 1: Overview 1 / 2

Module 1 Overview

Historical PerspectiveWhat is a Web Application?Web 1.0, 2.0, 3.0 Application ArchitecturesDesign PatternsSetting Up Your Development Environment

c© 2011-13 G.L. Heileman Module 1: Overview 2 / 2


Lecture 1: Historical Perspective

c© 2011-13 G.L. Heileman Module 1, Lecture 1 1 / 3

Historical Timeline

1945 1970 1980 1990 2000 2010

First electroniccomputer (ENIAC)

ARPANET

Internet Protocols(TCP/IP)

World Wide Web

AmazonGoogle

Facebook

Ajax

Amazon EC2

HTML5

Military Business PC Era Web 1.0 Web 2.0 Web 3.0


Web 1.0, 2.0, 3.0

Web 1.0 – Creation of static web sites, the first web business models.Web 2.0 – Interactivity (Ajax), social networking, mash-ups, media sharing,online commerce, lightweight collaboration, wikis.Web 3.0 – The “intelligent web”, i.e., machine-facilitated understanding ofinformation. E.g., semantic web, NLP, machine learning/reasoning,recommender systems.

Enablers of Web 2.0 and 3.0 —JavaScript, XML, JSON (Ajax).Web services interoperability.Infrastructure-, platform- and software-as-a-service capabilities, i.e.,cloud computing.Mobile platforms and apps leading to ubiquitous computing.Metadata, linked data and machine processing by intelligent agents.


Web Application ArchitecturesModule 1: Introduction and BackgroundLecture 2: What is a Web Application?


Web Applications

This course is about modern web application architectures.

Next we will consider, at a very high level, the architectural modelthat all web applications are based upon.

This will be refined significantly as the course progresses.

Based upon the models described here, we can begin to consider themost basic web protocols and standards.


Client-Sever Model

The client-server architecture is the most basic model for describing therelationship between the cooperating programs in a web application.

The two parts of a client-server architecture are:Server component – “listens” for request, and provides services and/orresources accordingly.Client component – establishes a connection to the server, andrequests services and/or resources from it.


Client-Sever Model

There is a request/response protocol associated with any client-serverarchitecture:

Client Server

Network

1: request

2: response

(Web Server)(Browser)

(HTTP)


Web Applications

Definition (Web Application)A web application is accessed by users over a network, uses a browser asthe client, and consists of a collection of client- and server-side scripts,HTML pages, and other resources that may be spread across multipleservers. The application itself is accessed by users via a specific path withina web server, e.g., www.amazon.com.

Ex. Webmail, online retail stores, online banks, online auctions, wikis,blogs, document storage, etc.


Web Applications

There’s a bit more to it:

Network –The Internet, a global system of interconnected computer networks.Uses the standard Internet protocol suite (TCP/IP).

Web (World Wide Web) –A system of interlinked documents (web pages) accessed via theInternet using HTTP.Web pages contain hypermedia: text, graphics, images, video andother multimedia, along with hyperlinks to other web pages.Hyperlinks give the Web its structure.The structure of the Web is what makes it useful and gives it value.


Web Applications

Advantages —Ubiquity and convenience of using a web browser as a client.Inherent cross-platform compatibility.Ability to update and maintain web applications without distributingand installing software on potentially thousands of client computers.Reduction in IT costs.

Disadvantages —User experience not as good as standalone (workstation/PC)applications — increasingly not the case.Privacy and security issues associated with your data.From a developer’s perspective, difficult to develop and debug —there are a lot of moving parts!



Lecture 3: Web 1.0, 2.0, 3.0 Application Architectures


Web 1.0 Applications

A Web 1.0 application architecture is not much more complicated than theclient-server model we previously showed:

WebClient

(Browser)

WebServerNetwork Web

Pages

1: request

2: responseWeb Application

The web server is primarily fetching static web pages – not muchinteractivity.No separation of data from its presentation.The browser is very simple – it only needs to render HTML.


Web 1.0 Context

Web 1.0100,000 websites

(read-only Web)

50,000,000 users

user-generated

content

publishedcontent


Web 1.0 Applications

As applications became richer, server-side scripts became morecomplicated, and Web 1.0 applications became very difficult tomaintain.The “Browser Wars” led to more functionality on the client side, alongwith compatibility issues.Developers began creating applications that were more interactive –requires saving state.Technologies that improved performance emerged – e.g., client-sidescripts, faster web servers, web caching, CDNs, etc.


Web Applications

Web 2.0 and 3.0 application architectures are better organized to deal withthis complexity:

WebClient

(Browser)

WebServerNetwork

1: request

2: response

Database

Script/Service

Script/Service

Script/Service

Connector

DatabaseConnector

Server-side functionality is partitioned more intelligently – we’ll spendquite a bit of time studying this.The browser is more capable, with better standards support.


Web 2.0 Context

Web 1.0 Web 2.0

100,000 websites 100,000,000 websites(read-only Web) (read-write Web)

50,000,000 users

user-generated

contentuser-

generatedcontent

publishedcontent published

content

1,000,000,000 users


Web 3.0 Context

Web 1.0 Web 2.0 Web 3.0

100,000 websites 100,000,000 websites 1,000,000,000 websites(read-only Web) (read-write Web) (read-write Web)

50,000,000 users

user-generated

contentuser-

generatedcontent

user-generated

content

publishedcontent published

contentpublished

content

1,000,000,000 users 2,500,000,000 users

Intelligence



Lecture 4: Design Patterns


Web Application Architectures

We have already seen that modern web applications involve asignificant amount of complexity, particularly on the server side.A typical web application involves numerous protocols, programminglanguages and technologies spread throughout the web stack.Developing, maintaining and extending a complex web application isextremely difficult – but, building it using a foundation of solid designprinciples can simplify each of these tasks.Software engineers use abstraction to deal with this type of complexity.Design patterns provide useful design abstractions for object-orientedsystems.


Design Patterns

Definition (Design Pattern)A design pattern is a description of interacting objects and classes thatinteract to solve a general design problem within a particular context.

A design pattern is an abstract template that can be applied over andover again.

The idea is apply abstract design patterns in order to solve specificdesign problems that occur while building real systems.

Design patterns provide a way to communicate the parts of a design,i.e., it’s the vernacular software engineers use to talk about designs.


Client-Sever Model

The whole point of a client-server architecture is to distribute thecomponents of an application between the client and the server insome way. E.g., this makes sense if your trying to share a database orfiles among some users, share printers, etc.

What gets put where determines the particular type of theclient-server architecture.

In order to build complex web applications, we’re going to make use ofnumerous design patterns that will help us organize how pieces areplaced within the client-server architecture.


n-Tier Architecture

The n-tier architecture is a highly useful design pattern that maps tothe client-server model.This design pattern is based on the concept of breaking a system intodifferent pieces or tiers that can be physically separated:

– Each tier is responsible for providing a specific functionality.– A tier only interacts with the tiers adjacent to it through a well-defined

interface.

Ex.Print server – 2-tier architectural pattern.Early web applications – 2-tier client-server architecture:

- User interface (browser) functionality resided on the (thin) client.- Server provided static web pages (HTML).- Interface between the two via the hypertext transfer protocol (HTTP).


n-Tier Architecture

Additional tiers show up when the application functionality is furtherpartitioned.

What are the advantages of such a design?The abstraction provides a means for managing the complexity of thedesign.Tiers can be upgraded or replaced independently as requirements ortechnology change — the new tier just needs to use the sameinterfaces as the old one.It provides a balance between innovation and standardization.Tiered systems are much easier to build, maintain, scale and upgrade.


3-Tier Architecture

One of the most common is the 3-tier architecture:- Presentation tier – The user interface.- Application (logic) tier – Retrieves, modifies and/or deletes data in thedata tier, and sends the results to the presentation tier. Alsoresponsible for processing the data itself.

- Data tier – The source of the data associated with the application.

A modern web application is often deployed over the Internet as a3-tier architecture:

- Presentation tier – User’s web browser.- Application (logic) tier – The web server and logic associated withgenerating dynamic web content, e.g., collecting and formatting theresults of a search.

- Data tier – A database.


6-Tier Web Application Architecture

The Application tier is often subdivided into two tiers:- Business logic tier – Models the business objects associated with theapplication, e.g., accounts, inventories, etc., and captures the businessrules and workflows associated with how these processes can beprocessed and manipulated.

- Data access tier – Responsible for accessing data, and passing it to thebusiness logic tier, e.g., account balances, transactions, etc.

The Presentation tier is often subdivided into two tiers:- Client tier – client-side user interface components.- Presentation logic tier – server-side scripts for generating web pages.

Finally, the web server is often separated out into its own Web tier.


Web Application Architecture Tiers

WebClient

(Browser)

WebServerNetwork

1: request

2: response

Database

Script/Service

Script/Service

Script/Service

Connector

DatabaseConnector

Clienttier

Webtier

Businesslogictier

Presentation logictier

Dataaccess

tier

Datatier



Lecture 5: Setting Up Your Development Environment


Your Development Environment

We will be using the Ruby on Rails (Rails) web application frameworkextensively in this class.

In order to use this framework effectively, you’ll need to set up adevelopment environment on your computer with the followingcomponents:

– Ruby programming language.– Rails web application framework (a Ruby gem).– A modern text editor that supports syntax highlighting, or an

integrated Rails development environment.– A modern browser with integrated developer tools – these will help you

inspect, debug and optimize your web applications.– SQLite Database Browser – GUI editor for SQLite databases.– Git – a distributed version control and source code management

system.


Your Development Environment

The exact manner in which you configure your developmentenvironment will depend upon the operating system you’re using, aswell as your personal preferences.

In the notes associated with this lecture, we provide:– The specific versions of Ruby, Rails, RVM and Git that you need to use

in this class.– Operating system-dependent suggestions for constructing your

development environment.

We will also make a virtual machine available that contains a pre-builtdevelopment environment.

Throughout this course I will be demonstrating the manner in which Idevelop and use Rails applications.


web architecture : first week hand out

Documents