Web 2.0 Application development with Ruby on Rails

Web 2.0 Application
Development
make your webapps more social
Amit K Mathur
akmathur@gmail.com

http://www.magnionlabs.com

Web 2.0 Application Development – p.

Trainer
Independent consultant and freelance developer
http://www.magnionlabs.com/blog Follow me on Twitter
@akmags
Reachable also on:
Skype (akmags) and
Cell (+91 99863 95538).


You
Have you done web
development before?
Which platform?
What do you expect to
gain out of this train-
ing? Build an app?


Goals of this training
Introduction to the medley of technologies in
web dev
How to take advantage of some of emerging
web 2.0 techniques


Rules
Flames, abuse, questions? Welcome any time
Use the “make sure you cover” sheet
Hands on work - no rush to ﬁnish
4 days


Day 1
Web 2.0 - deﬁnition
Review of Webapp architecture
Set up system for hands on exercises
Review of Ruby
RoR Introduction


Day 2
Developing Quiz app with Rails
Rails theory
RESTful architecture


Day 3
AJAX with Rails
Enhance Quiz app
Javascript, Jquery


Day 4
Feeds, Microformats
Mashup - develop an example app
Tag cloud, Reverse AJAX
Flash
The End


Let’s start..

6560

Web 2.0 Application Development – p. 1

Web is young

6560

Approximate number of days since Tim Berners-Lee’s ﬁrst
public webpage (Aug 6, 1991)
Great achivements: Google, Wikipedia, Amazon,
ebay, online banking, etc.


Web - beginning
Web pages as “Shared documents” - send a
request to server, get a document back (HTTP
headed towards "Sematic Web" - a web of dat


Web - the new goal

Semantic Web - web of data
A page is atomic to computers but not to a
human
structures so that machines can recognize the
data on the page


Web 2.0
A small step towards semantic web
“sharing” and “data” are now more importan
site’s importance increases as user
participation increases


Web 2.0

The Web 2.0 dilemma


Web 2.0
Social: database grows in importance as user
participation increases
Site is just a platform
• delicious.com, ﬂickr.com, twitter, digg,
Google maps, uservoice.com, picnik.com
• See it in action:
http://del.icio.us/popular

http://delicious.com/tag/programming+development


Web 2.0
Architectural: scaling, RESTful, microformats
Security is paramount since data is important
Frivolous and incidental: drop shadows, beta
tag (eg. ajax-loader.com), vowel-less names,
AJAX, tagging


Web 2.0
Reference: James Surowiecki, The Wisdom of
Crowds: Why the Many Are Smarter than the Few
and How Collective Wisdom Shapes Business,
Economies, Societies, and Nations. Published by:
Random House, 2004.


Webapp architecture
Server Client
www.example.com

HTML doc
CSS

Javascript
Response
/path/to/action construct
a page
if(...)
... ...
else
DB ... ...
end
HTTP Request
http://www.example.com/path/to/action

Application Server


Web development

Browser Framework
When user types an address, browser sends a
HTTP GET (or POST) request to server
Server send back a response
• 1xx (Informational)

• 2xx (Success)

• 3xx (Redirect)

• 4xx (Client Error)

• 5xx (Server Error) Web 2.0 Application Development – p. 2

Web development
Response is text
• formatted as HTML
• CSS ﬁle speciﬁes layout
• Javascript, which is executed as code by th
browser

Theory over!


Hands on work
Set up your system
Linux Desktop
install Ruby 1.8.6 (or
1.8.7)
install Rubygems
sudo gem install rails

Take a break!


Dekho
http://yellowpages.com
http://www.hulu.com
http://revolutionhealth.com
http://www.twitter.com
http://basecamphq.com
http://43things.com/
http://penny-arcade.com/

These are all powered by Ruby on Rails

Web development
It can get overwhelming.
graphic design
HTML/CSS
Javascript/AJAX
RIAA/Flash
HTTP
Server side development
Database design
Analytics & operation

Rails makes it easy. Really.


Ruby on Rails
Ruby is a (very powerful) general purpose
programming language
Ruby on Rails is a framework to write web
applications in Ruby


Ruby on Rails
Ruby on Rails is
sometimes shortened
to just Rails
Ruby on Rails is more
of a DSL for web-apps
full stack framework


Database backed web application
Web application which provides interface to an
underlying database
Examples are plentiful
• Gmail, Airline ticketing system like
cleartrip.com , ﬂickr,
• and almost any webapp these days...
Non examples are: chat systems, mortgage
calculators, etc.


Romancing with Ruby

Say, Hi!
History: Originated in
Japan
created by Yukihiro
Matsumoto (aka Matz)


Romancing with Ruby

Personality
An easy to learn OO scripting language
Inﬂuenced by Perl, Smalltalk, CLU, OCaml,
Dylan and others
VHLL, Simpler, better OO
Superb Regex support
Interpreted (Code, test, tinker cycle is shorter)
even declarations are executed,

Romancing with Ruby

Personality
Agile language - changes are less painful
GC

Programming should be enjoyable -
Ruby is optimized for humans - Matz.


Romancing with Ruby
Is it Strongly typed or weakly typed
it depends. Ruby supports duck typing


Romancing with Ruby

Basic OO concepts
fundamental unit is an object: container of da
and methods to access this data
attributes and methods
Object is an instance of a Class; Class is a
blueprint for creating Objects; complex type
than Integer or String


Romancing with Ruby

Basic OO concepts
Class can also have class attributes - shared
amongst all the objects
Inheritance: is-a relationship; means of
extending functionality - achieves code reuse
Polymorphism
Abstract Class (can only be inherited from),
Concrete Class

Romancing with Ruby

Syntax
no semicolon needed
line beginning with # is a comment


Romancing with Ruby

Syntax
data types:
• Integers, String (can be double quoted or
singly quoted), Array, Hash
• Symbols are names of variables. e.g.
:question, :user
• Read them as the thing called question
• Symbols are constants - hence, can be used
as enums

Romancing with Ruby
Everything, including a literal, is an object, so this
works:
-15.abs
"mera bharat mahan".length
"Venkat".index("n")
"We are like this only!".downcase.spl

Variables don’t have any type, only objects
have type


Romancing with Ruby
Variable naming convention is important - denote
scope
All constants & Class names begin with a
capital letter (e.g. PI, Vehicle)
All local variables begin with a lower case (e.g
sum_total, nn)


Romancing with Ruby
Iteration of enumerable objects
# An array with some elements
arr = [1, 2, 3, 5,
:lemme_see, 13,
"is it Fibonacci or what"]

arr.each do |e|
puts e
end

Romancing with Ruby
# output
1
2
3
5
lemme_see
13
is it Fibonacci or what


Romancing with Ruby
Mutation is also easy
arr.map { |e| e.to_s }
["1", "2", "3", "5", "lemme_see",
"13", "is it Fibonacci or what"]


Romancing with Ruby
capitals = { "Karnataka" => "Bangalor
"Kerala" => "Thiruvananthapuram", "
capitals.keys # ["Karnataka", "A.P.",
"T.N.", "Kerala"]
capitals.values # ["Bangalore", "Hyde
"chennai", "Thiruvananthapuram"]
capitals["T.N."] # Chennai
capitals["Kerala"] = "Trivandrum"


Romancing with Ruby
Loops and branches
if temp > 30
puts "It’s very hot"
else
puts "I can bear it"
end

puts "Pass me a glass of water" if te


Romancing with Ruby
case "Web application development"
when "some value"
puts "Branch 1"
when "different value"
puts "Branch 2"
when /char/
puts "Branch 3"
else
puts "Branch 4"
end

Romancing with Ruby

Exercise: write a Ruby program
Given a string of tags - each tag is a word,
separated by comma - ﬁnd whether a given ta
exists in the tag list
Find whether all of a list of tags (given as
string), exists in a tag list


Romancing with Ruby

Exercise: hints
tags = "social,friend,comic,fun"
tags.split(",").find { |t|
t == ’social’
}


Romancing with Ruby

OO in Ruby
Declare a class
public, private and protected visbility
No multiple inheritance
Package namespace


Romancing with Ruby
class Rectangle < GeometricShape
def set_length(l)
@length = l
end

def set_width(w)
@width = w
end

def area
@length * @width
end

protected
def calculate_sides
end
end


Romancing with Ruby

OO contd.
Duck Typing: Behaviour is more important
than inheritance
Classes are Open - Methods can be added any
time to any class even to built-in, library ones


Romancing with Ruby

Exception Handling
Ways to throw an exception
raise "this is an Exception"
raise ArgumentError.new(
"Illegal value for #{i}th argument"


Romancing with Ruby
Handling one
begin
# do something
rescue ArgumentError => e
# do the firefighting
retry # start the begin block again
ensure
# clean up - executed always
end

Romancing with Ruby

Modules
deﬁnes a namespace
mixins - instance methods of modules become
instance methods of the class


Romancing with Ruby

Tools
Rdoc for online documentation
irb for testing your scripts quickly


Romancing with Ruby

Other miscellany:
parenthesis are optional with method calls
foo(a, b, c)
foo a, b, c
passing hash to a method if its the only parameter
does not require braces
foo(a => 1, b => 2)
# is really foo({a => 1, b => 2})


Romancing with Ruby

Other nitty gritty
In nested if ladder, elsif is used instead of else
method names can end in ! (object itself is
modiﬁed) or ? (method returns a boolean
value)
there are no ++ or - - operators
everything is true except false and nil. 0, "", []
are all true

Romancing with Ruby
inside a string, anything within # is an
expression
def do_something(param1, param2)
result = hello()
puts "The result of compuation is #{result.capitalize}"
return result if xxx
end


Romancing with Ruby

More nitty gritty
variables don’t have classes, only values have
classes
there are both &&, || and ’and’, ’or’ operator
and, or have a lower precedence
variable and method names may not be alway
distinguishable by eye


Romancing with Ruby
Ruby allows aliasing - giving a method other
names

vowels = [’a’, ’e’, ’i’, ’o’, ’u’]
# following are the same method
vowels.size
vowels.length


Romancing with Ruby

yet more nitty gritty
powerful range operator (.. and ...)
multiple assignment is allowed

a,b = b,a # easy peasy swap

regex are very powerful (if you know Java or
Perl ones, you are good)


Romancing with Ruby

OK, that’s it!

Day 2
Developing Quiz app with Rails
Rails theory


An itch to scratch
Problem statement:
A database of multiple choice questions and
answers. Every visitor can take a quiz, which is a
random set of 10 questions. Then they see how
many they got correct.
Bells and whistles: For registered users, let them
see the history of all quizzes played. Display a
global list of top scrorers, etc.


Page ﬂow diagram
Admin interface (enter questions)
External interface (home page, play a round,
results page)


DB table
questions table
qtext:string
option1:string to
option4:string
answer:integer
Not fully normalized, but let’s go with it.


Rolling on Rails
rails quiz –database=mysql
cd quiz
ruby script/generate scaffold question
qtext:string option1:string option2:string
option3:string option4:string answer:integer


Rolling on Rails

Framework for the fatafat
generation
Framework = lots of
needed code is already in
place. start by ﬁlling in the
business logic


Rolling on Rails
app contains all application code and test
should have all the tests for this code
any static files go into public
note config, db, log and script directories
Rakefile has many useful tasks defined (rake
-T)
default webserver is WEBrick. In production,
should be replaced by something more
powerful like mongrel Web 2.0 Application Development – p. 6

Rolling on Rails

rake db:create
rake db:migrate
many DBs are sup-
ported: MySQL, DB2,
Oracle, Postgres,
SQLServer, SQLite,
etc.

Rolling on Rails
ruby script/server
http://localhost:3000/questions

create, edit, delete
questions


Rolling on Rails
What’s this scaffolding
thing...
a bare but functional
interface with zero
programming
a good starting point
for a piece by piece re-
placement to build the
real app

Rolling on Rails
built around CRUD features of a model
controller provides CRUD methods
model database schema provided by migratio
script
Database table was looked up from
conﬁg/database.yml


Rolling on Rails

MVC
Model = state of the application, often saved
into DB with all business rules
Controller = receive events from outside worl
interact with model and present suitable view
View = suitable presentation of model for use
interaction


Rolling on Rails
Exercise: Add authorization - only admin should
be able to view these pages
Look at restful_authentication plugin
Still stuck? Have you tried http://www.stackoverﬂow.com


Rolling on Rails
A DSL for creating
Database backed ap-
plication. Where actions
and forms can be mapped
directly to database


Rolling on Rails

ActiveRecord
ORM - map database tables to objects
Maps DB table to class, rows to objects,
columns to attributes with accessors
(getters/setters) deﬁned


Rolling on Rails

ActiveRecord
near zero conﬁguration - if you follow the
convention
Powerful operations:
order = Order.find(1)
orders = Order.find(:all, :conditions => ["name = ?", "Dave"
orders.each do |o|
o.price *= 0.15
o.save
end


Rolling on Rails

ActiveRecord
empty description should not be allowed
class Question < ActiveRecord::Bas
validates_presence_of :qtext
end
Did you note that after making any changes we never have to restart out application -

changes are picked up automatically


Rolling on Rails

Error handling in forms
Notice that forms highlight the ﬁelds in error
When a validation fails, ActiveRecord puts th
error message with the model object
Controller or view can access them
unless question = Question.create(params[:question])
validation_error = question.errors.on(:qtext)
end


Rolling on Rails

Error handling in forms
views display all the error messages in a box
using
<%= error_messages_for :question %


Rolling on Rails

Routing
all incoming requests are mapped to an action
in a controller
http://localhost:3000/questions/2/edit = controller/id/actio

other path info in URL, or URL parameters,
put in params hash


Rolling on Rails

RESTful controllers
easier to code and test
more scalable
simple
may be hard to understand and apply


REST
style of architecting networked applications
is not RPC
heavily based on HTTP and the Web
is not design


REST
RPC - web based mailbox
[id, body , [id,body], ..] = getAllMails()
[id, body , [id,body], ..] = getAllUnreadMails()
id = createNewMessage(body, recipient-emailid)
archiveMail(id)
deleteMail(id)
addLabel(id, label)


REST
REST Triangle
Nouns (URI)
Verbs (GET, POST, PUT and DELETE)
Content-Type (Representation)


REST
REST - web based mailbox
Identify nouns
• /mails – All mails
• /mails/unread – All unread mails
• /mails/:id – A particular mail
• /mails/:id/archived – archive ﬂag of that
particular mail
• /mails/:id/labels – all labels for that mail

REST
REST - web based mailbox
GET /mails
GET /mails/unread
POST /mails
PUT /mails/:id/archived
DELETE /mails/:id
POST /mails/:id/labels

Ref: http://rest.blueoxen.net/cgi-bin/wiki.pl?RestInPlainEnglish

Rolling on Rails

Rails Philosophy
DRY (every piece of knowledge is expressed i
just one place)
COC (sensible defaults)
Rails is Agile (quick turnarounds, testing is
intertwined)
It’s fun (don’t tell anyone ;-))


Day 3
AJAX with Rails
Enhance Quiz app
Javascript, Jquery


Rolling on Rails

AJAXify the add a question form
Move “add a question” form on the index page an
save without reload


Rolling on Rails

AJAXify the add a question form
create _question_form partial from
new.html.erb and call that partial from
index.html.erb (and new.html.erb)
initialize @question in
QuestionsController#index (as in
QuestionsController#new)


Rolling on Rails
redirect_to questions_url in
QuestionsController#create
change form_for to
remote_form_for(@questions) in
index.html.erb


Rolling on Rails
add id (questions_list) to table in
index.html.erb
from table row in for loop in index.html.erb,
extract partial _question and call that from
index
<%= render :partial => ’question’, :object => question %>

add javascript_include_tag :defaults to
questions.html.erb layout

Rolling on Rails
QuestionsController#create add js block:
format.js {
render :update do |page|
page.replace_html(’question_form’,
:partial => ’question_form’,
:locals => { :question => Question.new })
page.insert_html(:bottom, ’questions_list’,
:partial => ’question’, :object => @question)
end
}


Rolling on Rails

RJS - Ruby to Javascript
we didn’t write any Javascript code
look at the calls to prototype library that was
generated (index.html)


RJS siblings
Java to Javascript translation
• GWT
• DWR - also supports reverse AJAX


Web resources
Ruby:
http://www.ruby-lang.org
http://www.rubycentral.com/pickaxe
http://rubyforge.org
http://rubygems.org
http://ruby.alltop.com/

Rails:
http://rubyonrails.org
http://api.rubyonrails.org


Books
Programming Ruby, The Pragmatic
programmer’s Guide, 2 ed. aka Pickaxe
Ruby book by Dave Thomas et al.
The Ruby way by Hal Fulton.
Agile Web Development with Rails, 2nd
Edition by Dave Thomas, David Heine-
meier Hansson, et al.


More on AJAX
Basically, what "Ajax" means is "Javascript now works."
- Paul Graham
Various styles of Doing AJAX:
XmlHttpRequest object (Javascript libraries)
dynamic script tags (static JS generates
javascript and evals)
iframes


Javascript toolkits

Javascript libraries: prototype,
scriptaculous, Jquery, Dojo, ExtJS and
many more
unobtrusive JS (no onclick on mixing JS
inside HTML - all JS outside in a
separate ﬁle - maintenance is easier,
graceful degradation for non JS browsers
common features of toolkits (Effects,
traversal, AJAX, enhanced controls)


Jquery

cross browser
CSS style selectors for
traversal
slick effects
thriving ecosystem of plug-
ins


Jquery
<html>
<head>
<script
src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.
type="text/javascript">
</script>
<script type="text/javascript">
$(document).ready(function(){
// Your code here
});
</script>
</head>
<body>
<p class="note">I am excited to step into the cyberspace.</p>
<p class="greeting"><a href="#">Hello World!</a></p>
</body>
</html>


Jquery

CSS style selectors
$(".greeting a").click(function(event
alert("Welcome!");
});


Jquery

Add CSS class

<style type="text/css">
.grey { color: #aaa }
</style>

$(".note").addClass(’grey’);
});

Jquery

Effects
$(".note").slideToggle();
});


Jquery

Plugin - tablesorter

<script src="http://tablesorter.com/jquery.tablesorter.min.js"
type="text/javascript">
</script>


<p class="note">I am excited to step into the cyberspace.
<table border="1">
<thead><th>Name</th><th>Message</th></thead>
<tr><td>Alan Turing</td><td>Theoretical formulation</td></tr>
<tr><td>Jon Von Neumann</td><td>Stored-program architecture</t
<tr><td>ARPA</td><td>Internet</td></tr>
<tr><td>Tim Berners Lee</td><td>World Wide Web</td></tr>
</table>
</p>

Jquery

Plugin - tablesorter

$(".note table").tablesorter();

Many many great plugins
Makes Javascript accessible and fun!

Day 4
Feeds, Microformats
Mashup - develop an example app
Tag cloud, Reverse AJAX
Flash


Feeds
Important since data
is the king in Web 2.0
can be read in feed
readers like Google
reader or iGoogle,
Netvibes, PageFlakes
popularized by blogs


Feeds
used in web app operations, news and stock
ticker,
converted to email, stored in databases, or
mashed
Many different formats: RSS 0.91, RSS 2.0,
ATOM, RDF: but they all work with popular
feed readers. So, not a problem


Feed
How they work
poll to check for new content:
creating feeds: manual, automatic
homework: create a feed for questions - many
admins adding questions, keep a feed of edits
(keep a feed of users playing quizzed at your
site)


Mashups


Mashups
remember data is the king in Web 2.0: feeds o
APIs expose data, combine them to create new
apps
Yahoo pipes
Google maps mashups
http://www.programmableweb.com :
mashups directory


Terminology
SOA (instead of one executable, have several
applications which communicate over the
network),
REST (an architectural style for building
networked apps - different from SOAP or RPC
SOAP: much like RPC - expose methods to be
called


Terminology
REST: URI, ﬁxed verbs (GET, POST, PUT,
DELETE) and content-type
Twitter’s API is RESTful
Amazon’s ECS (afﬁlicate API) is SOAP


Mashup Exercise

Mashup Google maps and Twitter
Sign up for Google maps API
(http://code.google.com/apis/maps/signup.html)

get a key
Twitter - get all followers:
curl ’http://twitter.com/followers/ids/akmags.json’


Mashup Exercise

Mashup Google maps and Twitter
Get details with location of user:
curl ’http://twitter.com/users/show/54126460.json’

Get Lat Long of a location in JSON format:
curl

’http://maps.google.com/maps/geo?q=Bangalore&output=json&oe=utf8&senso

Google maps HTML example:
http://code.google.com/apis/maps/documentation/introduction.html


Microformats
Ways of encoding data in HTML/XML which
is widely understood
examples: contact details, geographic info,
calendar/event, rel=nofollow (proposed by
Google)
use class or rel attribute which is already valid
HTML


Microformats

Google indexes and
displays uf separately
Browser plugins acts on
them
Operator for Fireﬁx,
Oomph for IE
picoformats (twitter @)


Tag cloud

Visual representation of
tags
Exercise: Add tags to ques-
tions in quiz app and show
a tag cloud


Reverse AJAX
Push technology
comet
slow load
eg. AppJet Framework used for etherpad
(http://www.etherpad.com)


Flash
tool for creating interactive and animated We
sites.
uses vector graphics - can be scaled to any siz
without losing clarity/quality
does not require programming skills and is
easy to learn


Flash
Preferable to animated images and
Java applets
loads faster
allows interactivity
> 96% browsers have flash preinstalled
Video sharing, games sites use flash
(youtube.com, flash-game.net etc.)


Flash
Need a ﬂash program to create ﬂash content
(eg. Adobe Flash Lite)
Save as ’.swf’ movie, upload to web-server
Minimum HTML code to embed it on your
page
<object width="550" height="400">
<param name="movie" value="somefilename.swf">
<embed src="somefilename.swf" width="550" height="400">
</embed>
</object>


RIAA
Rich Internet application
web app with characteristics of desktop
applications
using browser plugins like Flash
Frameworks: Curl, Adobe Flash/Adobe
Flex/AIR, Java/JavaFX and Microsoft
Silverlight


Other latest trends
Keep an eye on these too
Ofﬂine Web apps
Nosql - MongoDB, CouchDB, Tokyo cabinet


Thanks


Web 2.0 Application development with Ruby on Rails

More Related Content

Similar to Web 2.0 Application development with Ruby on Rails (20)

Recently uploaded (20)

Web 2.0 Application development with Ruby on Rails