Get documents about "Intro-slides
Shared by: jianghongl
-
Stats
- views:
- 2
- posted:
- 2/27/2012
- language:
- pages:
- 39
Document Sample
UC Berkeley
CS 98/198:
Web 2.0 Applications Using
Ruby 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 infrastructure
Opportunity: 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 disk
Project Blackbox
10/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
AWE
DC
spec
compiler
QuickTime™ and a
TIFF (Uncompressed) decompressor
logical Policy-aware are needed to see this picture.
config policy log Switching Layer
verification mining
per node SW stack
Web 2.0 apps
monitoring data
web svc
Ruby on APIs
Rails interpreter
physical trace collection
config drivers
local OS functions
VM monitor
New models of software
development
• Waterfall: Static Handoff • Process: Support 1 group
DADO Evolution,
Model, N groups
Develop Develop
Assess
Assess Deploy
Deploy
Operate
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 QuickTime™ an d a
TIFF (Uncompressed) decompressor
are need ed to see this p icture .
– 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 QuickTime™ an d a
TIFF (Uncompressed) decompressor
• Discussion of RoR and Web app
are need ed to see this p icture .
enterpreneurship toward end of sem.
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 The Internet server
HTTP in one slide
• Browser opens TCP connection to server on port
80 (default) and sends:
GET /index.html HTTP/1.0
User-Agent: Mozilla/4.73 [en] (X11; U; Linux 2.0.35
i686)
...other boring headers...
Cookie: B=2vsconq5p0h2n
• Server replies:
HTTP/1.0 200 OK
Content-Length: 16018
Content-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 Filesystem
mysql
or database
– Server (eg Apache) config info maps URLs to application
names, hands URL off to program
– Parameters and “function name” typically embedded in Ruby
URL’s or forms your app interp.
http://www.foo.com/search?term=white%20rabbit&show=10&page
=1 fork+exec
– App generates HTML content (or instantiates HTML
template with embedded code)
apache
• HTTP is stateless (every request independent) so cookies
quickly introduced
– Client gets cookie from server on 1st visit firefox
– passes cookie to server on subsequent requests
– Cookie typically used to look up session info in database or
other store
• 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
• Read data
• User actions • Update data
(Ruby) code
.rb Controller
• Directives for
rendering data
.rhtml template SQL table +
View Model
(or .rjs, .rxml...) Ruby class
• Data provided to
views
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
QuickTime™ and a
TIFF (Un compressed) decompressor
are neede d to see this picture.
• script/, useful scripts to help
develop your app
• test/ structure built right in! We’ll
meet it later
A truly trivial hello world
• in app/controllers/hello_controller.rb:
• in app/view/hello/say.rhtml:
QuickTime™ and a
TIFF (Un compressed) decompressor
are neede d to see this picture.
• 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...
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 model
2. 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 model
1. Define the model attributes
2. Create the database table
3. 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 QuickTime™ and a
• controller methods live in
TIFF (Un compressed) decompres
are neede d to see this picture.
app/controllers/student_controller.rb
• views are app/views/student/*.rhtml
Creating a simple controller:
2 ways to scaffold
1. “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?
More to notice about
scaffolding
identical app/models/student.rb
create test/unit/student_test.rb For
create test/fixtures/students.yml creating
create app/views/students/_form.rhtml test cases
create app/views/students/list.rhtml on student
model &
CRUD
create app/views/students/show.rhtml
controller
views
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
Capture common
create public/stylesheets/scaffold.css elements of
student-related
views
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 onehas_one :advisor
class Student; advisor
class Advisor; to a department
– advisor belongsbelongs_to :department
class Student; belongs to many courses
– student has andhas_and_belongs_to_many :courses
class Student; department through advisor’s department
– student has onehas_one :department, :through => :advisor
• Next week: some Ruby, plus closer look at MVC in Rails
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)
