UC Berkeley

CS 98/198:Web 2.0 Applications

UsingRuby on Rails

Armando Fox, Will Sobel, Dave Patterson

Today

• About the course– administrivia, prereqs, course format, projects

– about the RAD Lab– unique course features

• Background concepts review– Web app anatomy & brief history of Web programming

– TCP/IP, HTTP, HTML, Web servers– A bit of SQL

• (If time) Hello World in Rails• Movie: zero to blogging in 58 lines of code

Why this course?

• Important trends in “Web 2.0” style applications– Reinventing client-server: the datacenter is the computer

– New models of software development & deployment– Rich, sophisticated UI’s– Modular apps (mashups, etc.)

• Attract “end users” to RAD Lab platform– Student-conceived apps generate traffic– We provide “hosting service”

• Exercise RAD Lab infrastructureOpportunity: combine sound pedagogy with “real world”

skills & gratification of crafting a useful artifact early in your CS career.

DeCal or CS98/198?

• Jimmy Kittiyachavalit is running a Decal in RoR– Fast paced introduction targeted at seasoned programmers

– ideal if you’re a senior or 5th-year SB, want to pick up RoR informally

• CS98/198 (this class)– more systematic coverage of RoR, connected to ideas you saw in CS61A

– sophs/jrs. with moderate programming experience– more lab help/staff– you will learn about deployment and deploy/host your app in RAD Lab "ISP hosting environment"

• Note, must register for CS98/198 to take advantage of facilities/lab staff/lab hours

Datacenter is the Computer

• (From Luiz Barroso’s talk at RAD Lab 12/11)• Google program == Web search, Gmail,…• Google computer ==

– Thousands of computers, networking, storage

• Warehouse-sized facilities and workloads may be unusual today but are likely to be more common in the next few years

Datacenter is the Computer

• Datacenter composed of 20 ft. containers– Power/cooling for 200 KW of racked HW– External taps for electricity, network, water

• 250 Servers, 7 TB DRAM, or 1.5 PB diskProject Blackbox10/17/06

Datacenter management challenges

• Management == efficient use of resources under dynamic demand, cost model, reliability– Resources: Order(s) of magnitude more devices– “Dynamic demand”: peaks 5-10X averages, provisioning hard

– “Reliability”: SW/HW failures commonplace– “Software Churn”: Google search rewritten twice in last 5 years; Ebay rewritten 4 times in 9 years

– “Dynamic cost model”: nonlinear cost models for power, cooling, network traffic

Too large scale, too complex for manual administration by people SML?

RAD Lab Vision

DCspec

compiler

logicalconfig

physicalconfig

Policy-awareSwitching Layer

monitoring data

VM monitor

local OS functions

trace collection

web svc APIs

per node SW stack

AWE

drivers

policyverification

logmining

Ruby onRails interpreter

Web 2.0 apps

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

New models of software development

• Process: SupportDADO Evolution, 1 group• Waterfall: Static

Handoff Model, N groups

Develop

Assess Deploy

Operate

Develop

Assess

Deploy

Operate

Why RoR?

• We believe RoR will have lasting impact– Tastefully chosen features in language & framework combine best ideas from programming language literature

– Intellectual/academic value in reinforcing key ideas of programming structures

– Bootstrap RoR expertise within Berkeley EECS

• Exceptionally rapid prototyping of Web 2.0 apps – Incremental/agile development support– Sophisticated UI support (Ajax, etc.)– Rapid bootstrapping doesn’t require learning bad habits

Prereqs & course format

• “Guided individual study”, 2 units C/NC• Prereqs

– B+ in CS 61A or equiv.– OOP concepts in Java or a similar OO language– Unix survival skills (we’ll provide cheat sheets)

• 2-hr Lectures: introduce Rails/Ruby topics• Labs reinforce basic concepts

– Hack sessions: supervised lab sessions– Can develop primarily on your own machines– Deploy to “production ISP” (RAD Lab cluster), also available for development use

• Required team project incl. poster, demo

Real World Practices

• Development vs. deployment environments & tools– Real version control (Subversion)– Automated deployment tools– Regression testing techniques– Database schema migration

• Use cases & CRC cards (Class/ Responsibility/Collaborator; “poor man’s UML”) specify use cases and inter-component collaboration

• Checkpoints (“releases”) to force feature trimming

• Discussion of RoR and Web app enterpreneurship toward end of sem.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Sp07 Selected Projects...

• WeJoinIn (real users!): staff your volunteer events• Calentopia: organize your academic life• 5um (next generation forum; used as bug board by

developers): organize & stay on top of all the forums you read

• Lookbook: share your fashion photos• JamNet: GarageBand goes online• Telebears 2.0: better course searching & registration• MusicTree: share your playlists• Thing on Rails: a collaborative work portal• Mmmusic: a community around music tracks

Students from “award winning” projects working in RAD Lab this fall as ugrad research assistants

Outside Speakers

• Bernt Wahl - Haas Business School– teaches Web 2.0 entrepreneurship class– will give guest lecture toward middle of course, and give feedback on student projects

• Facebook– Technical description/examples of Facebook app APIs—from actual Facebook engineers

• Marti Hearst - iSchool– Information organization & retrieval in Web 2.0 apps

Project Opportunities

• Standalone apps (like 5um, Lookbook, WeJoinIn, ...)

• Facebook app/plug-in• Google Maps related apps• Web 2.0 frontend to e-healthcare system

• <your idea here>

UC Berkeley

Questions on administrivia?

Technical stuff review

• Review: Web Apps 101• Review: Model-View-Controller design pattern (MVC)

• Deconstructing Hello World– MVC and Rails– What’s Where in a Rails App

• A slightly less trivial example

The Web is basically RPC (remote procedure

call)• RPC protocol == HTTP

– ASCII based request/reply protocol run over TCP/IP

– protocol headers specify metadata about the request

– Stateless: notion of “session” must be synthesized separately

• RPC arguments == URL’s, HTML-form contents– URL names a server & resource– URL may embed “argument values”, or these can be “uploaded” as encoded HTML form submission

browser serverThe Internet

HTTP in one slide

• Browser opens TCP connection to server on port 80 (default) and sends:

GET /index.html HTTP/1.0User-Agent: Mozilla/4.73 [en] (X11; U; Linux 2.0.35

i686) ...other boring headers...Cookie: B=2vsconq5p0h2n

• Server replies:HTTP/1.0 200 OKContent-Length: 16018Content-Type: text/html

<html><head><title>Yahoo!</title><base href=http://www.yahoo.com/>

…etc.

HTML in one slide

• Roughly hierarchical collection of elements that make up a viewable page– inline (headings, tables, lists...)– embedded (images, video, Java applets, JavaScript

code...)– forms—allow user to submit simple input (text,

radio/check buttons, dropdown menus...)• Each element can have attributes (many optional)

– of particular interest are id and class attributes– CSS (Cascading Style Sheets) allow specification of

visual appearance of HTML pages based on the id’s and/or classes of elements

• Current incarnation, XHTML, more device-portable by being strict about syntax that went to pot in HTML– RoR and many other frameworks generate XHTML-

compliant code

Dynamic content generation in one

slide• Common gateway interface (cgi): run a

program– Server (eg Apache) config info maps URLs to

application names, hands URL off to program– Parameters and “function name” typically

embedded in URL’s or formshttp://www.foo.com/search?term=white

%20rabbit&show=10&page=1– App generates HTML content (or instantiates

HTML template with embedded code)• HTTP is stateless (every request

independent) so cookies quickly introduced– Client gets cookie from server on 1st visit– passes cookie to server on subsequent

requests– Cookie typically used to look up session

info in database or other store

apache

your app

fork+exec

Filesystemor databasemysql

Rubyinterp.

firefox

• Various frameworks have evolved to capture this common structure

• IMHO, “framework” == locus of control/dispatching logic + class libraries, utility libraries, etc.

Summary: Web 1.0 apps

• Browser requests web resource (URL) using HTTP; server responds w/status code & content– HTML generally the most common content-type– Vast majority of HTML today is auto-generated from templates and/or dynamic content applications

• Another common request type: POST• Another common (non-error) response status:302 Found (redirect)– original semantics: “This resource exists but has moved”

– also used these days for handling “retry” type conditions in applications, as we’ll see

The MVC Design Pattern

• Goal: separate organization of data (model) from UI & presentation (view) by introducing controller – mediates user actions requesting access to data– presents data for rendering by the view

• Web apps are “sort of” MVC by design

Controller

View Model

• User actions• Directives for rendering data

• Read data• Update data

• Data provided to views

.rb (Ruby) code

.rhtml template(or .rjs, .rxml...)

SQL table + Ruby class

What is Ruby on Rails?

• Ruby is a language that is...– dynamically typed, interpreted, object-oriented, functionally-inspired

• Rails is a web application framework that...– embodies the MVC design pattern– emphasizes convention over configuration – leverages Ruby language features incl. dynamic typing, metaprogramming, & object-orientation to provide elegant support for both goals

• Recall: Framework == locus of control + class/utility libraries

SQL 101 (Structured Query Language)

• Relational model of data organization (Codd, 1969) based on predicate logic & set theory

• Theoretical model implemented by Gray et al. in 1970’s– portable language (structured query language, SQL) to express relational operations

– relational database stores the data and provides transactional semantics to instantiate the abstract relational model

• Think of a table as an unordered collection of objects that share a schema of simply-typed attributes– eg: Student = <lastname:string, ucb_sid:int, degree_expected:date>

• Think of SELECT as picking some records out– SELECT lastname,ucb_sid FROM students WHERE degree_expected < 12/31/07

– Generally,SELECT attribs FROM tables WHERE constraints– Joins are more interesting, we’ll do them later

Oh, CRUD

• 4 basic operations on a table row: Create, Read, Update attributes, Destroy

INSERT INTO students (last_name, ucb_sid, degree_expected) VALUES (“Fox”, 99999, “1998-12-15”),        (“Bodik”, 88888, “2009-06-05”)

SELECT * FROM students WHERE (degree_expected < “2000-01-01”)

UPDATE students SET degree_expected=“2008-06-05” WHERE last_name=“Bodik”)

DELETE FROM students WHERE ucb_sid=99999

UC Berkeley

Hello World in Rails

What rails appname does• Once you install Rails...

– cd somewhere– say rails appname– make sure your ISP has

configured Apache to understand where Rails CGI dispatcher is

• app/, where the action is– especially models, view,

controllers• script/, useful scripts to

help develop your app• test/ structure built

right in! We’ll meet it later

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

A truly trivial hello world

• in app/controllers/hello_controller.rb:

• in app/view/hello/say.rhtml:

• And we invoke it by visiting:http://mywebsite.com/cookbook/hello/say– or maybe http://localhost:3002/hello/say – note similarities between URL and directory/file names...

• Let’s make it only slightly less trivial...

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

What about our trivial hello world?

• It manipulated no data models– though arguably this is where much of the strength of RoR lies

• One controller (hello_controller.rb)

• A handful of controller methods & views– Roughly, each controller method has a corresponding view

A Less Trivial Example...

Let’s walk through a full (single-table) MVC example...

1. Design the model2. Instantiate the model (table &

Ruby code)3. Basic controller to do CRUD

(Create, Read, Update, Destroy) operations on model

A simple, 1-table model

1. Define the model attributes: Student• last_name (string), UCB ID# (int),

degree_expected (date)

2. Create the database table Students: 2 options

• Manually (bad, but simple for now...)• Using migrations (good)...more on this

later Note, also creates schema_info table for

schema versioning

Rails ActiveRecord models

• ActiveRecord, a major component of Rails...– Uses SQL tables as underlying storage, and

SQL commands as underlying manipulation, of collections of Ruby objects

– (Later) Provides an object-relationship graph abstraction using SQL Joins as the underlying machinery

• For now, let’s do a simple, single-table model1. Define the model attributes2. Create the database table3. Create a “degenerate” controller for

manipulating Student objects

MVC in RoR: Convention over Configuration

If data model is called Student:

• model (Ruby class) is app/models/student.rb

• SQL table is students– table row = object instance– columns = object attribute

• controller methods live in app/controllers/student_controller.rb

• views are app/views/student/*.rhtml

QuickTime™ and aTIFF (Uncompressed) decompressor

are needed to see this picture.

Creating a simple controller: 2 ways to

scaffold1. “inline”2. script/generate scaffold modelname

– Individual controller methods & views overrideable either way

• What happened?– metaprogramming & higher-order functions

used to create the controller methods (which in turn call the methods that render “generic” views)

– later method definitions override earlier ones

– scaffold-rendering method respects existing .rhtml templates if they exist

Convention over configuration

• Model student, table students, class StudentsController in students_controller.rb, views in app/view/students/, ....– metaprogramming makes it happen

• Table students: primary key id; object attribute names match table columns– does model person live in table people? does goose live in table geese?

Capture common

elements of student-

related views

CRUD views

For creating test

cases on student model & controll

er

More to notice about scaffolding

identical app/models/student.rb create test/unit/student_test.rb create test/fixtures/students.yml create app/views/students/_form.rhtml create app/views/students/list.rhtml create app/views/students/show.rhtml create app/views/students/new.rhtml create app/views/students/edit.rhtml create app/controllers/students_controller.rb

create test/functional/students_controller_test.rb

create app/helpers/students_helper.rb create app/views/layouts/students.rhtml create public/stylesheets/scaffold.css

Recap

• metaprogramming creates scaffolding, mapping between instance methods & table columns

• scaffolding gets your app off the ground early, then you can selectively replace it

• Rails scaffolding captures common model of a Web front-end to CRUD operations on database objects

• Much more powerful when you consider multi-model relationships:– student has one advisor– advisor belongs to a department– student has and belongs to many courses– student has one department through advisor’s department

• Next week: some Ruby, plus closer look at MVC in Rails

class Student; has_one :advisor

class Advisor; belongs_to :department

class Student; has_and_belongs_to_many :courses

class Student; has_one :department, :through => :advisor

Lab 0

• Sign up for course forum (RAD Lab home page > Course home page > Forum)

• Install Ruby on Rails on your development computer– Class homepage has pointers to 1-click installers for Mac, Windows, and installer tutorial for Linux

– Having trouble? post questions to forum

• Fill out Doodle survey (link from course page) to tell us when you can attend hack sessions– hack session hours & locations will be announced via forum this week when results are mostly in

• Watch the Rails movie about blogging (link from course page)