Web Development With Ruby - From Simple To Complex

Web Development
With Ruby
From simple to complex

twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 1

Ruby developers have
greatly inﬂuenced web
development.

twitter: @bphogan

ASP.Net MVC and
NuPack

twitter: @bphogan

Pretty hot stuff. Inspired by Rails and RubyGems, two things we Rubyists have used to build
quality stuff for years.

With Ruby we can
•Make HTML and CSS better
•Quickly prototype or build simple web sites
•Automate complicated builds or deployments
•Build simple micro-apps
•Implement Web Sockets servers
•Improve communication between customers and
developers
•while also testing our web sites
•Build complex apps that interface with legacy system

twitter: @bphogan

All made possible by
the highly dynamic
features of the

twitter: @bphogan

So, what is Ruby?
• Highly dynamic
• Very high level
• 100% object oriented
• 100% open-source
• Really easy to learn


Highly dynamic, high level, 100% object oriented, 100% open source, and really easy to learn.

History

Smalltalk C++ Ruby Java VB 6 C#
(1983) (1989) (1993) (1995) (1996) (2000)

twitter: bphogan


Ruby was created by Yukihiro Matsumoto (Matz) in 1993. It’s built on C, and has many
implementations, including JRuby, which runs on the JVM, and IronRuby, which runs on
the .Net platform.

twitter: bphogan


“How you feel is more important than what you do. “
The entire language is designed for programmer productivity and fun.

Basic Ruby

twitter: @bphogan

5 + 5
10 * 10
"Hello" + "World"
25 / 5

twitter: @bphogan

We have numbers, strings, multiplication, addition, subtraction, and division, just like
everyone else.

age = 42
first_name = "Homer"
start_date = Date.new 1980, 06, 05
annual_salary = 100000.00

twitter: @bphogan

It also helps that the syntax is simple. There are no unnecessary semicolons or curly braces.
The interpreter knows when lines end.

Ruby follows the
Principle of Least
Surprise.

twitter: @bphogan

Principle of Least Surprise - This means The language should behave in a way that is not
confusing to experienced developers. It doesn’t mean that it works like your current favorite
language! But as you get used to Ruby, you’ll ﬁnd that you ramp up quickly.

"Brian".length
["red", "green", "blue"].length
[:first_name => "Brian", :last_name => "Hogan"].length
User.find_all_by_last_name("Hogan").length

twitter: @bphogan

Ruby achieves this through a consistant API. You won’t ﬁnd yourself guessing too much what
methods are available to you.

Arrays

colors = ["Red", "Green", "Blue"]


The square brackets denote an array.

Hashes (Dictionaries)

attributes = {:age => 25,
:first_name => "Homer",
:last_name => "Simpson"}


=>


This is the hash symbol, or the hash rocket. Whenever you see this, you’re dealing with a
hash.

:foo

twitter: bphogan


When you see these, you’re looking at Symbols. They represent names and some strings.
They conserve memory, as repeating a symbol in your code uses the same memory reference,
whereas repeating a string creates a new object on each use.

Simple control logic
if on_probation(start_date)
puts "Yes"
else
puts "no"
end


Methods (functions) are simple too.

# if start date + 6 months is > today
def on_probation?(start_date)
(start_date >> 6) > Date.today
end


The two arrows (>>) is actually a method on the Date object that adds months. So here,
we’re adding six months to the start date and comparing it to today

Notice here that the input parameter is assumed to be a date. There’s no type checking here.

Let Ruby write code for you!
class Person
@started_on = Date.today
@name = ""

def started_on=(date)
class Person
@started_on = date
end attr_accessor :name
attr_accessor :started_on
def started_on
@started_on end
end

def name=(name)
@name = name
end

def name
@name
end
end


Making getters and setters is so common that Ruby can do it for you.

def test_user_hired_today_should_be_on_probation
person = Person.new
person.hired_on = Date.today
assert person.on_probation?
end

test_user_hired_last_year_should_not_be_on_probation
person = Person.new
person.hired_on = 1.year.ago
assert !person.on_probation?
end


Here we have two tests, one using a person hired today, and another using a person last year.

Implement the method
class Person
attr_accessor :name, :start_date

def on_probation?
(start_date >> 6) > Date.today
end
end


Watch as the tests pass.

haml and sass

twitter: bphogan


HAML
!!!
#wrapper.container_12
#header.grid_12
%h1 The awesome site
%ul#navbar.grid_12
%li
%a{:href => "index.html"} Home
%li
%a{:href => "products"} Products
%li
%a{:href => "services"} Services
#middle.grid_12
%h2 Welcome

#footer.grid_12
%p Copyright 2010 AwesomeCo


HTML
<div class='container_12' id='wrapper'>
<div class='grid_12' id='header'>
<h1>The awesome site</h1>
</div>
<ul class='grid_12' id='navbar'>
<li>
<a href='index.html'>Home</a>
</li>
<li>
<a href='products'>Products</a>
</li>
<li>
<a href='services'>Services</a>
</li>
</ul>
<div class='grid_12' id='middle'>
<h2>Welcome</h2>
</div>
<div class='grid_12' id='footer'>
<p>Copyright 2010 AwesomeCo</p>
</div>
</div>


SASS

$the_border: 1px
$base_color: #111

#header
color: $base_color * 3
border-left: $the_border
border-right: $the_border * 2
color: red

a
font-weight: bold
text-decoration: none


CSS

#header {
color: #333333;
border-left: 1px;
border-right: 2px;
color: red; }

#header a {
font-weight: bold;
text-decoration: none; }


$the_border: 1px
$base_color: #111
#header {
#header color: #333333;
color: $base_color * 3 border-left: 1px;
border-left: $the_border border-right: 2px;
border-right: $the_border * 2 color: red; }
color: red #header a {
font-weight: bold;
a text-decoration: none; }
font-weight: bold
text-decoration: none

twitter: @bphogan

Demos

twitter: @bphogan

StaticMatic
http://staticmatic.rubyforge.org/

twitter: @bphogan

src
layouts site
application.haml index.html
pages images
index.html javascripts
stylesheets stylesheets
application.sass application.css

twitter: @bphogan

StaticMatic is a tiny framework for building static websites quickly using HAML and SASS.

Rake

twitter: @bphogan

Automation Language
Deploy with a single command!

twitter: @bphogan

Rakeﬁles have tasks
desc "Copies the site to our remote server"
task :deploy do
puts "*** Deploying the site via SSH to #{ssh_user}"
system("rsync -avz --delete #{upload_files}/ #{ssh_user}:#
{remote_root}")
FileUtils.rm_rf upload_files rescue nil
end

rake deploy

twitter: @bphogan

StaticMatic and Rake
demo

twitter: @bphogan

Let’s put a site online

Sinatra
http://www.sinatrarb.com/intro

twitter: @bphogan

Sinatra is a great way to build simple web apps with Ruby.

Great for micro apps

twitter: @bphogan

Hello Sinatra!

require 'rubygems'
require 'sinatra'

get "/" do
"Hello Sinatra!"
end


Sinatra is a simple web framework that basically maps incoming requests to backend code
that produces responses.


That little bit of code gets us a working web application that handles requests.

Sinatra demos

twitter: @bphogan

Composable apps?
Sure!

twitter: @bphogan

conﬁg.ru
require 'rubygems'
require 'sinatra'

# include our Application code
require File.join(File.dirname(__FILE__), 'main')
require File.join(File.dirname(__FILE__), 'blog')
Sinatra Apps
# disable sinatra's auto-application starting
disable :run

map "/" do
run Main
end
Mounting
map "/blog" do
to URLs
run Blog
end

twitter: @bphogan

Testing Web Apps

twitter: @bphogan

cucumber
Web application testing
for people ﬁrst and computers second

twitter: @bphogan

Plain Text Scenarios!
Feature: an advanced google search with Cucumber
As an interested developer who wants to automate tasks with Cucumber
I want to search Google
So that I can find more information on how it works.

Scenario: Advanced search
Given I go to "http://www.google.com"
And I click "Advanced search"
And I fill in "as_q" with "cucumber"
And I fill in the "any of these unwanted words" field with "pickles"
And I select "50 results" from the "Number of results" dropdown
And I click the Date, usage rights, numeric range, and more section
And I turn on Safe Search
When I press "Advanced Search"
Then I should see "Cucumber - Making BDD fun"
When I click "Cucumber - Making BDD fun"
And I click "Wiki"
And I click "Gherkin"
And I click "Feature Introduction"
Then I should see "Feature Introduction"

twitter: @bphogan

Express requirements
plainly...

twitter: @bphogan

then run real browsers!

twitter: @bphogan

Demo?

twitter: @bphogan

Radiant System
Content Management

twitter: @bphogan

Based on Rails, completely modular, easy to install

Web Sockets

twitter: @bphogan

NodeJS? NoWai!

twitter: @bphogan

EventMachine

twitter: @bphogan

Demo?

twitter: @bphogan

Fi

Finally, Rails

twitter: @bphogan

Opinionated, but
ﬂexible.

twitter: @bphogan

Demo

twitter: @bphogan

“Use The Right Tool”

twitter: @bphogan

We hear this a lot.

Most people who
advocate that mean
“The right tool is the
one I use”

twitter: @bphogan

I am a “Web” developer
ﬁrst and a Ruby
developer second.

twitter: @bphogan

Ruby is the fastest,
best, most productive,
and most stable, and
lucrative way to build
web stuff...
twitter: @bphogan

...for me, for now.

twitter: @bphogan

But I still use WordPress for my blogs, I still use PHP for simple web stuff, and I still use Visual
Basic to maintain a commercial app I sold years ago. I use ASP

Code examples
http://dl.dropbox.com/u/50783/tccc9_ruby_webdev.zip

http://github.com/napcs/cucumber_watir

twitter: @bphogan

You have new tools.
Go use them.

twitter: @bphogan

Web Development With Ruby - From Simple To Complex

Recommended

Recommended

More Related Content

Similar to Web Development With Ruby - From Simple To Complex

Similar to Web Development With Ruby - From Simple To Complex (20)

More from Brian Hogan

More from Brian Hogan (20)

Recently uploaded

Recently uploaded (20)

Web Development With Ruby - From Simple To Complex

Editor's Notes