SArchitecture

Outline and § ELLS sections
From 100,000 foot view to 500 foot view of SaaS
Client-server architecture, HTTP, URIs, cookies (§2.1-2.2)
HTML & CSS, XML & XPath (§2.2-2.3)
3-tier shared-nothing architecture, horizontal scaling (§2.4)
model-view-controller design pattern (§2.5)
Models: ActiveRecord & CRUD (§2.6)
Routes, controllers, and REST (§2.7)
Template views (§2.8)
Fallacies & pitfalls, perspectives (§2.9-2.12)
Patterns, architecture, & perspective (§2.10)

The Web as a Client-Server System; TCP/IP intro
ELLS §2.1–2.2
Armando Fox

Reminder
This material expands on and gives additional perspectives/demos about the material in ELLS
We assume you will watch the screencasts too
(screencast.saasbook.info)
It does not replace reading that material
http://saasbook.info

Web at 100,000 feet
The web is a client/server architecture
It is fundamentally request/reply oriented
Web browser

Client-Server vs. Peer-to-Peer
High-level architecture of the overall system
Soon we’ll talk about architecture “inside” boxes
Client & server each specialized for their tasks
Client: ask questions on behalf of users
Server: wait for & respond to questions, serve many clients
Design Patterns capture common structural solutions to recurring problems
Client-Server is an architectural pattern

GET /bears/
Nuts and bolts:
TCP/IP protocols
IP (Internet Protocol) address identifies a physical network interface with four octets, e.g. 128.32.244.172
Special address 127.0.0.1 is “this computer”, named localhost, even if not connected to the Internet!
TCP/IP (Transmission Control Protocol/Internet Protocol)
IP: no-guarantee, best-effort service that delivers packets from one IP address to another
TCP: make IP reliable by detecting “dropped” packets, data arriving out of order, transmission errors, slow networks, etc., and respond appropriately
TCP ports allow multiple TCP apps on same computer
Vint Cerf & Bob Kahn: 2004 Turing Award for
Internet architecture & protocols, incl. TCP/IP
GET /bears/
HTTP/0.9 200 OK
HTTP/0.9 200 OK

Web at 100,000 feet
The web is a client/server architecture
It is fundamentally request/reply oriented
Domain Name System (DNS) is another kind of server that maps names to IP addresses
Web browser
DNS server

Now that we’re talking, what do we say?
Hypertext Transfer Protocol
an ASCII-based request/reply protocol for transferring information on the Web
HTTP request includes:
request method (GET, POST, etc.)
Uniform Resource Identifier (URI)
HTTP protocol version understood by the client
headers—extra info regarding transfer request
HTTP response from server
Protocol version & Status code =>
Response headers
Response body
HTTP status codes:
2xx — all is well
3xx — resource moved
4xx — access problem
5xx — server error

HTTP > TCP > IP
TCP > DNS
All the above are correct
☐
☐
☐
Assuming “>” means “relies on”, which statement is NOT correct:

Cookies
Observation: HTTP is stateless
Early Web 1.0 problem: how to guide a user “through” a flow of pages?
use IP address to identify returning user?
✖ public computers, users sharing single IP
embed per-user junk into URI query string?
✖ breaks caching
Quickly superseded by cookies
Watch: screencast.saasbook.info

Uses of cookies
Most sites quickly realized that the per-user state could be used for lots of things:
customization (“My Yahoo”)
click tracking/flow tracking
authentication (logged in or not)
Which of these could be implemented on the client side? Which ones shouldn’t be and why?
A golden rule: don’t trust the client—cookies must be tamper-evident

SaaS app; browser
HTTP request; browser
SaaS app; HTTP response
☐
☐
☐
A ____ can create and modify cookies;
the ____ is responsible for including the correct cookie with each request

HTML+CSS
ELLS §2.3
Armando Fox

CS 142 Lecture Notes: HTML
Slide
Introduction
This article is a review of the book
Dietary Preferences of Penguins,
by Alice Jones and Bill Smith. Jones
and Smith's controversial work makes
three hard-to-swallow claims about
penguins:
First, that penguins actually prefer
tropical foods such as bananas and
pineapple to their traditional diet
of fish
Second, that tropical foods give
penguins an odor that makes them
unattractive to their traditional
predators

CS 142 Lecture Notes: HTML
Slide
Introduction
This article is a review of the book
Dietary Preferences of Penguins
,
by Alice Jones and Bill Smith. Jones and Smith's
controversial work makes three hard-to-swallow claims
about penguins:
First, that penguins actually prefer tropical foods
such as bananas and pineapple to their traditional diet
of fish
Second, that tropical foods give penguins an odor that makes them unattractive to their traditional predators
...

CS 142 Lecture Notes: HTML
Slide
Introduction
This article is a review of the book
Dietary Preferences of Penguins
,
by Alice Jones and Bill Smith. Jones
and Smith's controversial work makes
three hard-to-swallow claims about
penguins:
First, ...
Introduction
This article is a review of the book Dietary Preferences of Penguins, by Alice Jones and Bill Smith. Jones and Smith's controversial work makes two hard-to-swallow claims about penguins:
First, that penguins actually prefer tropical foods such as bananas and pineapple to their traditional diet of fish
Second, that tropical foods give penguins an odor that makes them unattractive to their traditional predators
...

HTML ~1.0
Descendant of IBM’s Generalized Markup Language (1960’s) via SGML (Standard Generalized Markup Language, 1986)
Document = Hierarchical collection of elements
inline (headings, tables, lists...)
embedded (images, JavaScript code...)
forms—allow user to submit simple input (text, radio/check buttons, dropdown menus...)
Each element can have attributes (many optional) and some elements also have content
of particular interest: id and class attributes, for styling

Cascading Style Sheets
Idea: visual appearance of page described in a separate document (stylesheet)
accessibility
branding/targeting
separate designers’ & developers’ concerns
Current best practice: HTML markup should contain no visual styling information

How does it work?
(inside element) says what stylesheet goes with this HTML page
HTML id & class attributes important in CSS
id must be unique within this page
same class can be attached to many elements
I'm Armando. I teach CS169 and do
research in the AMP Lab and Par Lab.

Selectors identify specific tag(s)
Welcome,
Armando src="welcome.jpg" id="welcome"/>