Beyond the massive hype of Ruby on Rails, there's an amazing world of frameworks, DSLs, and libraries that make the Ruby language a compelling choice when working on the web. In this talk, you'll get a chance to see how to use Ruby to quickly build a static web site, create complex stylesheets with ease, build a simple web service, crete a simple Websocket server, and test your existing applications. Finally, you'll see a few of the ways Rails really can make developing complex applications easier, from advanced database querying to rendering views in multiple formats.
Arizona Broadband Policy Past, Present, and Future Presentation 3/25/24
Web Development With Ruby - From Simple To Complex
1. 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
2. Ruby developers have
greatly influenced web
development.
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 2
3. ASP.Net MVC and
NuPack
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 3
Pretty hot stuff. Inspired by Rails and RubyGems, two things we Rubyists have used to build
quality stuff for years.
4. 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
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 4
5. All made possible by
the highly dynamic
features of the
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 5
6. So, what is Ruby?
• Highly dynamic
• Very high level
• 100% object oriented
• 100% open-source
• Really easy to learn
Sunday, October 10, 2010 6
Highly dynamic, high level, 100% object oriented, 100% open source, and really easy to learn.
7. History
Smalltalk C++ Ruby Java VB 6 C#
(1983) (1989) (1993) (1995) (1996) (2000)
twitter: bphogan
email: brianhogan at napcs.com
Sunday, October 10, 2010 7
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.
8. twitter: bphogan
email: brianhogan at napcs.com
Sunday, October 10, 2010 8
“How you feel is more important than what you do. “
The entire language is designed for programmer productivity and fun.
9. Basic Ruby
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 9
10. 5 + 5
10 * 10
"Hello" + "World"
25 / 5
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 10
We have numbers, strings, multiplication, addition, subtraction, and division, just like
everyone else.
11. age = 42
first_name = "Homer"
start_date = Date.new 1980, 06, 05
annual_salary = 100000.00
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 11
It also helps that the syntax is simple. There are no unnecessary semicolons or curly braces.
The interpreter knows when lines end.
12. Ruby follows the
Principle of Least
Surprise.
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 12
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 find that you ramp up quickly.
13. "Brian".length
["red", "green", "blue"].length
[:first_name => "Brian", :last_name => "Hogan"].length
User.find_all_by_last_name("Hogan").length
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 13
Ruby achieves this through a consistant API. You won’t find yourself guessing too much what
methods are available to you.
14. Arrays
colors = ["Red", "Green", "Blue"]
Sunday, October 10, 2010 14
The square brackets denote an array.
16. =>
Sunday, October 10, 2010 16
This is the hash symbol, or the hash rocket. Whenever you see this, you’re dealing with a
hash.
17. :foo
twitter: bphogan
email: brianhogan at napcs.com
Sunday, October 10, 2010 17
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.
18. Simple control logic
if on_probation(start_date)
puts "Yes"
else
puts "no"
end
Sunday, October 10, 2010 18
19. Methods (functions) are simple too.
# if start date + 6 months is > today
def on_probation?(start_date)
(start_date >> 6) > Date.today
end
Sunday, October 10, 2010 19
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.
20. 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
Sunday, October 10, 2010 20
Making getters and setters is so common that Ruby can do it for you.
21. 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
Sunday, October 10, 2010 21
Here we have two tests, one using a person hired today, and another using a person last year.
22. Implement the method
class Person
attr_accessor :name, :start_date
def on_probation?
(start_date >> 6) > Date.today
end
end
Sunday, October 10, 2010 22
Watch as the tests pass.
23. haml and sass
twitter: bphogan
email: brianhogan at napcs.com
Sunday, October 10, 2010 23
24. 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
Sunday, October 10, 2010 24
28. $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
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 28
29. Demos
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 29
30. StaticMatic
http://staticmatic.rubyforge.org/
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 30
31. src
layouts site
application.haml index.html
pages images
index.html javascripts
stylesheets stylesheets
application.sass application.css
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 31
StaticMatic is a tiny framework for building static websites quickly using HAML and SASS.
32. Rake
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 32
33. Automation Language
Deploy with a single command!
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 33
34. Rakefiles 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
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 34
35. StaticMatic and Rake
demo
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 35
Let’s put a site online
36. Sinatra
http://www.sinatrarb.com/intro
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 36
Sinatra is a great way to build simple web apps with Ruby.
37. Great for micro apps
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 37
38. Hello Sinatra!
require 'rubygems'
require 'sinatra'
get "/" do
"Hello Sinatra!"
end
Sunday, October 10, 2010 38
Sinatra is a simple web framework that basically maps incoming requests to backend code
that produces responses.
39. Sunday, October 10, 2010 39
That little bit of code gets us a working web application that handles requests.
40. Sinatra demos
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 40
41. Composable apps?
Sure!
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 41
42. config.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
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 42
43. Testing Web Apps
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 43
44. cucumber
Web application testing
for people first and computers second
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 44
45. 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
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 45
46. Express requirements
plainly...
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 46
47. then run real browsers!
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 47
48. Demo?
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 48
49. Radiant System
Content Management
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 49
Based on Rails, completely modular, easy to install
50. Web Sockets
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 50
51. NodeJS? NoWai!
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 51
52. EventMachine
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 52
53. Demo?
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 53
Fi
54. Finally, Rails
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 54
55. Opinionated, but
flexible.
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 55
56. Demo
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 56
57. “Use The Right Tool”
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 57
We hear this a lot.
58. Most people who
advocate that mean
“The right tool is the
one I use”
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 58
59. I am a “Web” developer
first and a Ruby
developer second.
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 59
60. Ruby is the fastest,
best, most productive,
and most stable, and
lucrative way to build
web stuff...
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 60
61. ...for me, for now.
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 61
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
62. Code examples
http://dl.dropbox.com/u/50783/tccc9_ruby_webdev.zip
http://github.com/napcs/cucumber_watir
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 62
63. You have new tools.
Go use them.
twitter: @bphogan
email: brianhogan at napcs.com
Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010 63
Editor's Notes
We’re going to tlk about story-driven testing with Cucumber.
Testing web apps can be frustrating because there are so many places where things can go wrong. Most developers test web sites by running users through the application, but the manual clicking can take time.
Developers would rather be coding new features, and users would rather have a product that works well and not have their time wasted doing the developer’s job for them.
We don’t do things that are hard and not fun. It’s just human nature. We just kind of hide and pretend they’re not problems.
Unfortunately, this leads to shipping bad software.
...then the support calls come, and the angry emails, and the displeased shareholders.
Obviously there has to be some kind of workable solution, but what is it?
We can make the work easy by automating things. We spend so much time as developers automating processes for our clients that we never stop to think about how we might do that for ourselves and our processes.
We can reduce some of our work if we can get the users involved in a real way.
Finally, in order for this to work, management has to enforce testing practices. Applications have to be shipped with good test coverage, and time estimates must include the time it takes to write tests.
Everyone knows testing isn’t a waste of time. We may argue on how to do it, but everyone does some level of testing as they develop.
Unfortunately, every single developer can come up with a list of excuses why they don’t test enough. Usually they blame management or marketing for pushing deadlines.
Management has to make deadlines or stuff doesn’t get done, and they have outside forces pressuring them to deliver results.
Programmers know that if they rush, they’re going to do crappy work and while deadlines may be met in the short term, what is the cost of the technical debt incurred? Bad code needs to be addressed at some point. A professioal craftsman strives for quality.
So we have to be able to test quickly and easily
and we have to allow time to make it happen
and we can achieve some of this with Cucumber, a testing framework designed with the user experience in mind.
This scenario is written using Gherkin, Cucumber’s language for describing user interactions. It’s easy to read and easy to understand. You can sit down with your end users and write these scnearios together and then later use them to test your real application.
When thinking about a feature, you and your user must think about what value the feature has.
Ask yourselves “why do we need this feature? How will having this feature benefit a user?” The user might be a system administrator, a site owner, a basic user, or an anonymous guest, but you should only think about features that directly impact a user.
A feature can best be described by filling in these blanks: “As a somebody, I want to do something, so that I can do something else.
“
“As a nervous student who may not graduate, I want to be able to check my grades in real time so that I know I will get a diploma” is definitely focused on the user.
You describe a scenario using “given, when, then”.
The scenario describes the feature in more details, explaining how a user will move through the application to achieve the feature’s goal.
“Given” steps explain the prerequisites for the test. They let you specify any setup conditions that must have occurred outside of the process.
Given I am logged in as “homer” And I am a current student And I am on the My Info page and I recived a grade of “C-” in “CS 462”
“When” steps describe what you do during the scenario
When I click “Check my grades And I select “Current Term” And I press “View”
“Then” steps describe the outcome you expect.
Then I should see “Grades for Homer Simpson” And I should see a table with “CS 462” in row 1, column 1 And I should see a table with “C-” in row 1 column 4
Step definitions map these sentences to actual code.
We use Ruby and regular expressions to process each line in the story.
Even though we write these definitions in Ruby code, you can run Cucumber against anything that shows up in your browser, including Flash!
One popular way to run Cucumber stories is with WEBRAT. It’s a library mainly used in Rails applications to run a Ruby-based browser.
When you install webrat, you get a bunch of ready-made matchers for common tasks like finding items on a page, filling in forms, clicking links, and pressing buttons
WATIR, or “Web Application Testing In Ruby” automates Internet Explorer or Firefox and works well with Cucumber.
Steps are mapped by using regular expression capture values. The captured values can then be used in the step.
You can use multiple parameters too.
A small demo automating Pastie.
So, stories automate a browser
there are many more advanced features of Cucumber though.
One major advantage of this is that your features stay with your code. They stay fresh, and they change as your code changes. A new developer can look at these features, run them, and know exactly what the application does.
Your non-technical stakeholders, management, and other parties can easily communicate with the developers about features.
If you can get features that are well thought out, well planned, and well communicated in front of your developers so they can implement them, you’ll be a hero.