Designing Web

Applications

Thaddeus Diamond

CPSC 112

The Social Network

Great Movie

Not so great at depicting website-making

We will not make Facebook… today

What You See When You Look

at Facebook• A page

• Some information

• Dynamic

• Links to other pages

• Pretty pictures

You

FBServer

DataLayer

HTTP Request

Hive/MapReduce

JavaScriptEngine

HTML, JS, CSS

Scripts

XMLHttpRequestJSON

Raw

Facebook’s Actual Architecture(BIGPIPE)

• Inspired by parallel processor execution• Years of development• PhD-Level Architecture

And That’s Just the Beginning…

• BIGPIPE

• Hive/Hadoop

• Mobile infrastructure

• API and JavaScript SDK

• HipHop for PHP

• Scribe Logging

• …

Don’t Be Discouraged!

All good websites start somewhere

Rome wasn’t built in a day

Take more Computer Science classes!

Hey, if a Harvard kid can make Facebook…

Google App Engine

Fast, scalable web deployment service

Abstracts data layer, server environment, away

Applications can be written in Python or Java(!)

Many powerful APIs, extensions, examples

Well-documented

How it Works (An Overview)

Servers

VirtualMachine

VirtualMachine

Operating System

Network Interface

Datastore

Operating Sandbox

Application Code

(Python, Java)

Memory

Our Basic Architecture

Clients

GET(Address Bar)

POST(Submitted form data)

Servlet 1(JAVA)

Servlet 2(JAVA)

Servlet 3(JAVA)

Template 1

(HTML/CSS)

Template 2

(HTML/CSS)

Template 3

(HTML/CSS)

The Next Big Google App!

Let’s build a group note repository

People will be able to go to the site and see what notes have been posted

People will be able to create their own and edit anyone’s

Only an administrator can delete a note

Lab Part 2…?

Add the ability to specify which class and sort by class

Add the ability to specify school and sort by school

Add the ability to do rich text editing

Add the ability to log in

…?