Document Sample
Intro-slides Powered By Docstoc
					        UC Berkeley

       CS 98/198:
Web 2.0 Applications Using
     Ruby on Rails
    Armando Fox, Will Sobel,
        Dave Patterson
• 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
  – 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
   – 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
                   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
           Datacenter management
• 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

                                                               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

• Waterfall: Static Handoff • Process: Support 1 group
                              DADO Evolution,
  Model, N groups

  Develop                              Develop

                              Assess              Deploy
                              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
  ...other boring headers...
Cookie: B=2vsconq5p0h2n
• Server replies:
HTTP/1.0 200 OK
Content-Length: 16018
Content-Type: text/html

                        HTML in one slide
• Roughly hierarchical collection of elements that make up a viewable
   – 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
                                                                      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.
         =1                                                                   fork+exec
     – 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                                  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
             What is Ruby on Rails?
• Ruby is a language that is...
  – dynamically typed, interpreted, object-oriented,
• 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
• 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,
• 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:
   – 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
• 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
1. Design the model
2. Instantiate the model (table & Ruby
3. Basic controller to do CRUD (Create,
    Read, Update, Destroy) operations on
                    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
•    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
• 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.

• 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
• 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
 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 &
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
                                             Capture common
create public/stylesheets/scaffold.css          elements of
• 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
   – 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
  – 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)

Shared By: