Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Web Development
                             With Ruby
                                   From simple to complex




 twit...
Ruby developers have
                     greatly influenced web
                         development.

 twitter: @bphogan
...
ASP.Net MVC and
                                NuPack

 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk...
With Ruby we can
                 •Make HTML and CSS better
                 •Quickly prototype or build simple web sites
...
All made possible by
                            the highly dynamic
                              features of the

 twitte...
So, what is Ruby?
              • Highly dynamic
              • Very high level
              • 100% object oriented
    ...
History

        Smalltalk           C++       Ruby         Java           VB 6            C#
         (1983)            (...
twitter: bphogan
 email: brianhogan at napcs.com

Sunday, October 10, 2010                                               8...
Basic Ruby


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday...
5 + 5
                                    10 * 10
                                    "Hello" + "World"
                  ...
age = 42
                      first_name = "Homer"
                      start_date = Date.new 1980, 06, 05
             ...
Ruby follows the
                           Principle of Least
                               Surprise.

 twitter: @bphoga...
"Brian".length
            ["red", "green", "blue"].length
            [:first_name => "Brian", :last_name => "Hogan"].len...
Arrays


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




Sunday, October 10, 2010                              ...
Hashes (Dictionaries)


              attributes = {:age => 25,
                            :first_name => "Homer",
      ...
=>



Sunday, October 10, 2010                                                                    16

This is the hash sym...
:foo


 twitter: bphogan
 email: brianhogan at napcs.com

Sunday, October 10, 2010                                        ...
Simple control logic
                           if on_probation(start_date)
                             puts "Yes"
      ...
Methods (functions) are simple too.


                            # if start date + 6 months is > today
                  ...
Let Ruby write code for you!
     class Person
       @started_on = Date.today
       @name = ""

        def started_on=(...
def test_user_hired_today_should_be_on_probation
           person = Person.new
           person.hired_on = Date.today
  ...
Implement the method
                           class Person
                             attr_accessor :name, :start_date...
haml and sass


 twitter: bphogan
 email: brianhogan at napcs.com

Sunday, October 10, 2010                   23
HAML
                           !!!
                           #wrapper.container_12
                             #header....
HTML
                           <div class='container_12' id='wrapper'>
                              <div class='grid_12'...
SASS

                           $the_border: 1px
                           $base_color: #111

                          ...
CSS

                           #header {
                             color: #333333;
                             border...
$the_border: 1px
          $base_color: #111
                                                      #header {
          #he...
Demos


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, Oct...
StaticMatic
                           http://staticmatic.rubyforge.org/




 twitter: @bphogan
 email: brianhogan at napc...
src
                layouts                                 site
                  application.haml                       ...
Rake


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, Octo...
Automation Language
                           Deploy with a single command!




 twitter: @bphogan
 email: brianhogan at ...
Rakefiles have tasks
         desc "Copies the site to our remote server"
         task :deploy do
           puts "*** Dep...
StaticMatic and Rake
                                  demo

 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this...
Sinatra
                           http://www.sinatrarb.com/intro



 twitter: @bphogan
 email: brianhogan at napcs.com
 L...
Great for micro apps


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4...
Hello Sinatra!


                           require 'rubygems'
                           require 'sinatra'

             ...
Sunday, October 10, 2010                                                           39

That little bit of code gets us a w...
Sinatra demos


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sun...
Composable apps?
                               Sure!

 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk?...
config.ru
          require 'rubygems'
          require 'sinatra'

          # include our Application code
          requ...
Testing Web Apps


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
...
cucumber
                                  Web application testing
                           for people first and computer...
Plain Text Scenarios!
           Feature: an advanced google search with Cucumber
           As an interested developer wh...
Express requirements
                            plainly...

 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this...
then run real browsers!




 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.co...
Demo?


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, Oct...
Radiant System
                           Content Management




 twitter: @bphogan
 email: brianhogan at napcs.com
 Like ...
Web Sockets


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunda...
NodeJS? NoWai!


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Su...
EventMachine


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sund...
Demo?


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, Oct...
Finally, Rails


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Su...
Opinionated, but
                               flexible.

 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this ta...
Demo


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4773
Sunday, Octo...
“Use The Right Tool”


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/4...
Most people who
                       advocate that mean
                      “The right tool is the
                   ...
I am a “Web” developer
                    first and a Ruby
                   developer second.

 twitter: @bphogan
 email...
Ruby is the fastest,
                   best, most productive,
                    and most stable, and
                  ...
...for me, for now.


 twitter: @bphogan
 email: brianhogan at napcs.com
 Like this talk? Rate it at http://spkr8.com/t/47...
Code examples
   http://dl.dropbox.com/u/50783/tccc9_ruby_webdev.zip

                           http://github.com/napcs/c...
You have new tools.
                              Go use them.



 twitter: @bphogan
 email: brianhogan at napcs.com
 Like...
Upcoming SlideShare
Loading in …5
×

Web Development With Ruby - From Simple To Complex

6,167 views

Published on


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.

Published in: Technology
  • Be the first to comment

Web Development With Ruby - From Simple To Complex

  1. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 14. Arrays colors = ["Red", "Green", "Blue"] Sunday, October 10, 2010 14 The square brackets denote an array.
  15. 15. Hashes (Dictionaries) attributes = {:age => 25, :first_name => "Homer", :last_name => "Simpson"} Sunday, October 10, 2010 15
  16. 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. 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. 18. Simple control logic if on_probation(start_date) puts "Yes" else puts "no" end Sunday, October 10, 2010 18
  19. 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. 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. 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. 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. 23. haml and sass twitter: bphogan email: brianhogan at napcs.com Sunday, October 10, 2010 23
  24. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 39. Sunday, October 10, 2010 39 That little bit of code gets us a working web application that handles requests.
  40. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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. 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

×