Web Development With Ruby - From Simple To Complex

5,762 views
5,644 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
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
5,762
On SlideShare
0
From Embeds
0
Number of Embeds
5
Actions
Shares
0
Downloads
44
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide
  • 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.
  • That’s how you win.

  • 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

    ×