SlideShare a Scribd company logo
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 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
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.
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
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
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.
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.
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.
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
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.
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.
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.
"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.
Arrays


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




Sunday, October 10, 2010                                 14

The square brackets denote an array.
Hashes (Dictionaries)


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




Sunday, October 10, 2010                               15
=>



Sunday, October 10, 2010                                                                    16

This is the hash symbol, or the hash rocket. Whenever you see this, you’re dealing with a
hash.
: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.
Simple control logic
                           if on_probation(start_date)
                             puts "Yes"
                           else
                             puts "no"
                           end




Sunday, October 10, 2010                                 18
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.
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.
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.
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.
haml and sass


 twitter: bphogan
 email: brianhogan at napcs.com

Sunday, October 10, 2010                   23
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
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>




Sunday, October 10, 2010                                             25
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




Sunday, October 10, 2010                                     26
CSS

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

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




Sunday, October 10, 2010                                  27
$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
Demos


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010                              29
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
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.
Rake


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010                              32
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
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
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
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.
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
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.
Sunday, October 10, 2010                                                           39

That little bit of code gets us a working web application that handles requests.
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
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
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
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
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
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
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
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
Demo?


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010                              48
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
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
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
EventMachine


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010                              52
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
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
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
Demo


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, October 10, 2010                              56
“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.
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
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
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
...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
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
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

More Related Content

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

PPTX
Ruby -the wheel Technology
ppparthpatel123
 
PDF
Ruby an overall approach
Felipe Schmitt
 
PPT
Rapid Application Development using Ruby on Rails
Simobo
 
PPTX
Day 1 - Intro to Ruby
Barry Jones
 
PDF
Ruby training day1
Bindesh Vijayan
 
PDF
IJTC%202009%20JRuby
tutorialsruby
 
PDF
IJTC%202009%20JRuby
tutorialsruby
 
ZIP
Meta Programming in Ruby - Code Camp 2010
ssoroka
 
PPT
Workin ontherailsroad
Jim Jones
 
PPT
WorkinOnTheRailsRoad
webuploader
 
PPTX
Ruby for .NET developers
Max Titov
 
PDF
Workin On The Rails Road
RubyOnRails_dude
 
PPTX
Code for Startup MVP (Ruby on Rails) Session 2
Henry S
 
PDF
Programming language Ruby and the Rails framework
Radek Mika
 
KEY
Intro to Ruby - Twin Cities Code Camp 7
Brian Hogan
 
PDF
Learning Ruby
David Francisco
 
PDF
Ruby — An introduction
Gonçalo Silva
 
KEY
Introduction to Ruby
Mark Menard
 
PPTX
Why Ruby?
IT Weekend
 
KEY
Introducing Ruby
James Thompson
 
Ruby -the wheel Technology
ppparthpatel123
 
Ruby an overall approach
Felipe Schmitt
 
Rapid Application Development using Ruby on Rails
Simobo
 
Day 1 - Intro to Ruby
Barry Jones
 
Ruby training day1
Bindesh Vijayan
 
IJTC%202009%20JRuby
tutorialsruby
 
IJTC%202009%20JRuby
tutorialsruby
 
Meta Programming in Ruby - Code Camp 2010
ssoroka
 
Workin ontherailsroad
Jim Jones
 
WorkinOnTheRailsRoad
webuploader
 
Ruby for .NET developers
Max Titov
 
Workin On The Rails Road
RubyOnRails_dude
 
Code for Startup MVP (Ruby on Rails) Session 2
Henry S
 
Programming language Ruby and the Rails framework
Radek Mika
 
Intro to Ruby - Twin Cities Code Camp 7
Brian Hogan
 
Learning Ruby
David Francisco
 
Ruby — An introduction
Gonçalo Silva
 
Introduction to Ruby
Mark Menard
 
Why Ruby?
IT Weekend
 
Introducing Ruby
James Thompson
 

More from Brian Hogan (20)

PDF
Creating and Deploying Static Sites with Hugo
Brian Hogan
 
PDF
Automating the Cloud with Terraform, and Ansible
Brian Hogan
 
PDF
Create Development and Production Environments with Vagrant
Brian Hogan
 
PDF
Docker
Brian Hogan
 
PDF
Getting Started Contributing To Open Source
Brian Hogan
 
PDF
Rethink Frontend Development With Elm
Brian Hogan
 
KEY
Testing Client-side Code with Jasmine and CoffeeScript
Brian Hogan
 
KEY
FUD-Free Accessibility for Web Developers - Also, Cake.
Brian Hogan
 
KEY
Responsive Web Design
Brian Hogan
 
KEY
Web Development with CoffeeScript and Sass
Brian Hogan
 
KEY
Building A Gem From Scratch
Brian Hogan
 
KEY
Intro To Advanced Ruby
Brian Hogan
 
KEY
Turning Passion Into Words
Brian Hogan
 
PDF
HTML5 and CSS3 Today
Brian Hogan
 
KEY
Stop Reinventing The Wheel - The Ruby Standard Library
Brian Hogan
 
KEY
Make GUI Apps with Shoes
Brian Hogan
 
KEY
The Why Of Ruby
Brian Hogan
 
KEY
Story-driven Testing
Brian Hogan
 
KEY
Learning To Walk In Shoes
Brian Hogan
 
KEY
Rails and Legacy Databases - RailsConf 2009
Brian Hogan
 
Creating and Deploying Static Sites with Hugo
Brian Hogan
 
Automating the Cloud with Terraform, and Ansible
Brian Hogan
 
Create Development and Production Environments with Vagrant
Brian Hogan
 
Docker
Brian Hogan
 
Getting Started Contributing To Open Source
Brian Hogan
 
Rethink Frontend Development With Elm
Brian Hogan
 
Testing Client-side Code with Jasmine and CoffeeScript
Brian Hogan
 
FUD-Free Accessibility for Web Developers - Also, Cake.
Brian Hogan
 
Responsive Web Design
Brian Hogan
 
Web Development with CoffeeScript and Sass
Brian Hogan
 
Building A Gem From Scratch
Brian Hogan
 
Intro To Advanced Ruby
Brian Hogan
 
Turning Passion Into Words
Brian Hogan
 
HTML5 and CSS3 Today
Brian Hogan
 
Stop Reinventing The Wheel - The Ruby Standard Library
Brian Hogan
 
Make GUI Apps with Shoes
Brian Hogan
 
The Why Of Ruby
Brian Hogan
 
Story-driven Testing
Brian Hogan
 
Learning To Walk In Shoes
Brian Hogan
 
Rails and Legacy Databases - RailsConf 2009
Brian Hogan
 
Ad

Recently uploaded (20)

PDF
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
PDF
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
PDF
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
PPTX
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
PDF
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
PPTX
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
PDF
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
PDF
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
PDF
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
PPTX
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
PDF
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
PDF
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
PDF
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
PDF
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
DOCX
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
PPTX
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
PDF
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
PPTX
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
PDF
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
PDF
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
Reverse Engineering of Security Products: Developing an Advanced Microsoft De...
nwbxhhcyjv
 
Agentic AI lifecycle for Enterprise Hyper-Automation
Debmalya Biswas
 
“Voice Interfaces on a Budget: Building Real-time Speech Recognition on Low-c...
Edge AI and Vision Alliance
 
Seamless Tech Experiences Showcasing Cross-Platform App Design.pptx
presentifyai
 
Transcript: Book industry state of the nation 2025 - Tech Forum 2025
BookNet Canada
 
AI Penetration Testing Essentials: A Cybersecurity Guide for 2025
defencerabbit Team
 
What’s my job again? Slides from Mark Simos talk at 2025 Tampa BSides
Mark Simos
 
Newgen 2022-Forrester Newgen TEI_13 05 2022-The-Total-Economic-Impact-Newgen-...
darshakparmar
 
Bitcoin for Millennials podcast with Bram, Power Laws of Bitcoin
Stephen Perrenod
 
Designing_the_Future_AI_Driven_Product_Experiences_Across_Devices.pptx
presentifyai
 
Peak of Data & AI Encore AI-Enhanced Workflows for the Real World
Safe Software
 
NLJUG Speaker academy 2025 - first session
Bert Jan Schrijver
 
Future-Proof or Fall Behind? 10 Tech Trends You Can’t Afford to Ignore in 2025
DIGITALCONFEX
 
“NPU IP Hardware Shaped Through Software and Use-case Analysis,” a Presentati...
Edge AI and Vision Alliance
 
Cryptography Quiz: test your knowledge of this important security concept.
Rajni Bhardwaj Grover
 
The Project Compass - GDG on Campus MSIT
dscmsitkol
 
Go Concurrency Real-World Patterns, Pitfalls, and Playground Battles.pdf
Emily Achieng
 
New ThousandEyes Product Innovations: Cisco Live June 2025
ThousandEyes
 
[Newgen] NewgenONE Marvin Brochure 1.pdf
darshakparmar
 
UiPath DevConnect 2025: Agentic Automation Community User Group Meeting
DianaGray10
 
Ad

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.
  • 15. Hashes (Dictionaries) attributes = {:age => 25, :first_name => "Homer", :last_name => "Simpson"} Sunday, October 10, 2010 15
  • 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
  • 25. 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> Sunday, October 10, 2010 25
  • 26. 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 Sunday, October 10, 2010 26
  • 27. CSS #header { color: #333333; border-left: 1px; border-right: 2px; color: red; } #header a { font-weight: bold; text-decoration: none; } Sunday, October 10, 2010 27
  • 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

  • #2: We&amp;#x2019;re going to tlk about story-driven testing with Cucumber.
  • #3: 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.
  • #4: 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&amp;#x2019;s job for them.
  • #5: We don&amp;#x2019;t do things that are hard and not fun. It&amp;#x2019;s just human nature. We just kind of hide and pretend they&amp;#x2019;re not problems.
  • #6: Unfortunately, this leads to shipping bad software.
  • #7: ...then the support calls come, and the angry emails, and the displeased shareholders.
  • #8: Obviously there has to be some kind of workable solution, but what is it?
  • #9: 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.
  • #10: We can reduce some of our work if we can get the users involved in a real way.
  • #11: 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.
  • #12: Everyone knows testing isn&amp;#x2019;t a waste of time. We may argue on how to do it, but everyone does some level of testing as they develop.
  • #13: Unfortunately, every single developer can come up with a list of excuses why they don&amp;#x2019;t test enough. Usually they blame management or marketing for pushing deadlines.
  • #14: Management has to make deadlines or stuff doesn&amp;#x2019;t get done, and they have outside forces pressuring them to deliver results.
  • #15: Programmers know that if they rush, they&amp;#x2019;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.
  • #16: So we have to be able to test quickly and easily
  • #17: and we have to allow time to make it happen
  • #18: and we can achieve some of this with Cucumber, a testing framework designed with the user experience in mind.
  • #19: This scenario is written using Gherkin, Cucumber&amp;#x2019;s language for describing user interactions. It&amp;#x2019;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.
  • #20: When thinking about a feature, you and your user must think about what value the feature has.
  • #21: Ask yourselves &amp;#x201C;why do we need this feature? How will having this feature benefit a user?&amp;#x201D; 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.
  • #22: A feature can best be described by filling in these blanks: &amp;#x201C;As a somebody, I want to do something, so that I can do something else. &amp;#x201C;
  • #23: &amp;#x201C;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&amp;#x201D; is definitely focused on the user.
  • #24: You describe a scenario using &amp;#x201C;given, when, then&amp;#x201D;.
  • #25: The scenario describes the feature in more details, explaining how a user will move through the application to achieve the feature&amp;#x2019;s goal.
  • #26: &amp;#x201C;Given&amp;#x201D; steps explain the prerequisites for the test. They let you specify any setup conditions that must have occurred outside of the process.
  • #27: Given I am logged in as &amp;#x201C;homer&amp;#x201D; And I am a current student And I am on the My Info page and I recived a grade of &amp;#x201C;C-&amp;#x201D; in &amp;#x201C;CS 462&amp;#x201D;
  • #28: &amp;#x201C;When&amp;#x201D; steps describe what you do during the scenario
  • #29: When I click &amp;#x201C;Check my grades And I select &amp;#x201C;Current Term&amp;#x201D; And I press &amp;#x201C;View&amp;#x201D;
  • #30: &amp;#x201C;Then&amp;#x201D; steps describe the outcome you expect.
  • #31: Then I should see &amp;#x201C;Grades for Homer Simpson&amp;#x201D; And I should see a table with &amp;#x201C;CS 462&amp;#x201D; in row 1, column 1 And I should see a table with &amp;#x201C;C-&amp;#x201D; in row 1 column 4
  • #32: Step definitions map these sentences to actual code.
  • #33: We use Ruby and regular expressions to process each line in the story.
  • #34: Even though we write these definitions in Ruby code, you can run Cucumber against anything that shows up in your browser, including Flash!
  • #35: One popular way to run Cucumber stories is with WEBRAT. It&amp;#x2019;s a library mainly used in Rails applications to run a Ruby-based browser.
  • #37: 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
  • #38: WATIR, or &amp;#x201C;Web Application Testing In Ruby&amp;#x201D; automates Internet Explorer or Firefox and works well with Cucumber.
  • #40: Steps are mapped by using regular expression capture values. The captured values can then be used in the step.
  • #41: You can use multiple parameters too.
  • #42: A small demo automating Pastie.
  • #43: So, stories automate a browser
  • #44: there are many more advanced features of Cucumber though.
  • #45: 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.
  • #46: Your non-technical stakeholders, management, and other parties can easily communicate with the developers about features.
  • #47: 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&amp;#x2019;ll be a hero.
  • #48: That&amp;#x2019;s how you win.