Welcome to Web App Development Accelerator

Day 1:
How to learn at Code Fellows
Web apps, and common Rails patterns
Automated testing

Transcript

2. Brook Riggio
   @brookr Runs a Seattle based Web App Consultancy, and teaches Web Development in a variety of contexts
3. About Us Brook ✤ Fondly remembers Christmas of '88 ✤ Basic -> Java -> ASP -> SQL -> PHP -> Rails -> Ruby ✤ Freelance consulting since 2004 ✤ Independent instructor -> UW & Code Fellows ✤ Excited about your latent super powers
4. Ryan Sobol
   @ryansobol Web app developer for many years, teaches Web Development in a variety of contexts
5. About Us Ryan ✤ Teaching adults on/off since 1996 ✤ VB, Java -> PHP -> Ruby on Rails -> NodeJS ✤ Teaching for UW and Code Fellows ✤ Freelance and full-time web dev jobs
6. My awesome TAs
   are here to support you! Program grads who know your pain!
7. Your Job Title is Now… Web Developer
8. This course is extremely: ! • Non-traditional • Practical • Entrepreneurial • Lean • Agile
9. This is more like work than traditional classes Things will be ambiguous ! We are here to help, coach, guide, connect dots, and lastly, instruct.
11. Stephen P. Anderson
12. Adult Learning Theory http://teaching.colostate.edu/guides/servicelearning/principles_whatis_kolb.cfm In Class Questions Lab Lab Lecture and Reading
14. Peer Learning is awesome.
15. Sleep Exercise Connect
17. ==
18. what?
20. technical Good Question
21. Save Time Get right to the issue by describing it well
22. Happy Programmers Fewer WTFs / minute
23. life-long skill communication
24. Diagnostic Skills (Im)prove them
25. Specific one question at a time
26. A Good Question • Saves time • Keeps everyone happy • (Im)proves your communication skills • (Im)proves your diagnostic skills • Is about one specific issue
27. A Good Question has 4 parts 1.Context: Project Name, or if new, what the app does 2.Expected Outcome 3.Unexpected behavior 4.Error message, line#, and Diagnosis Steps taken
28. A Good Question •On my Portfolio site / Comments •I was trying to add a comment •I’m getting an undefined method for Nil and I can’t add a comment •I looked at comments_controller.rb and I can’t figure out what is nil on line 39
29. What's a Gist? • Don't spam the #channel on IRC • Post large blocks of text to https://gist.github.com • Post multiple related files and a stack trace • Name your files with the proper extension: .rb .yaml .txt • So that syntax highlighting works
30. technical Keep Asking Good Questions
31. Class Overview You will be graded
33. https://gitter.im/codefellows/code-rails
35. BDD Rails, Deploy MVC, CRUD, AUTH Mail, Files, Routes Week 4 - Project Week Part One
36. Advanced Rails JavaScript & Rails Angular on Rails Week 8 - Final Project Part Two
37. Icebreaker.rb
38. Ruby on Rails Used by companies big & small ! Rapid Prototyping ! Startups ! Large-scale deployments ! Enterprise external/internal
39. For me the purpose of life is partly to have joy. ! Programmers often feel joy when they can concentrate on the creative side of programming, ! So Ruby is designed to make programmers happy ! ·ͭ΋ͱΏ͖ͻΖ
40. optimized for dev happiness DHH
41. What makes Rails work so well? • Convention over Configuration • Promotes best practices • MVC (Model-View-Controller) • REST (REpresentational State Transfer) • ORM (Object Relational Mapping)
42. MVC Model talks to the database View makes data look good Controller handles user requests !
43. Rails provides the skeleton You layer on the muscle, nerves, and skin
44. Ruby Gems: easy-to-use powerups for your code You connect the blocks together to make great things
45. LET'S GET TO IT! image: blog.inigral.com Install it right!
46. Install Process Overview Mac Command Line Tools:
 xcode-select —install • Install:
 - Homebrew
 - node.js
 - rbenv gem install rails ! Ubuntu • Install:
 - build-essential, etc.
 - Nodejs
 - rbenv gem install rails ! Report:
 ruby -v
 rails -v
47. The Story of our App • BDD • Design • MVC • AuthAuth • OAuth • Email • Background Jobs
48. The Agile Manifesto We are uncovering better ways of developing
 software by doing it and helping others do it.
 Through this work we have come to value: Individuals and interactions over processes and tools
 Working software over comprehensive documentation
 Customer collaboration over contract negotiation
 Responding to change over following a plan That is, while there is value in the items on
 the right, we value the items on the left more. http://agilemanifesto.org/
49. Agile Project Management Applications
50. How do you test web apps now? • click • click • click • click • type • click • click • click • type • click • click • type
51. You have a test plan. But it sucks! ✓ You just haven’t written it ✓ Write it down ✓ Better yet, automate it
52. Red, Green, Refactor FAIL PASS REFACTO R
53. Types of Testing • Unit • Functional • Integration • Acceptance • Regression
 FAIL PASS REFACTOR
54. FAIL PASS REFACTO R Types of Testing - Ruby on Rails • Unit == Model • Functional == Controller • Integration (system wide, including Views) • Acceptance (behavior of the system • Regression (any of the above,
 when you find a bug)

55. Testing Religious War! • Test Driven Development ( TDD ) • Using tests to drive the design • Behavior Driven Development ( BDD ) • Emphasizes outside-in development from business goals • Uses examples (user stories) • Creates a shared language between developer and client (management)
56. PhantomJS / Webkit • Simulates how a real user would interact with your app. • Headless • Using browser: Selenium
57. Acceptance Testing basics # Navigating ! visit('/projects') visit(post_comments_path(post)) #rails route helper ! # Clicking links and buttons ! click_link('id-of-link') click_link('Link Text') click_button('Save') click_on('Link Text') # Click either a link or a button click_on('Button Value') source: https://gist.github.com/zhengjia/428105
58. Acceptance testing basics - forms source: https://gist.github.com/zhengjia/428105 # Interacting with forms ! fill_in('First Name', :with => 'John') fill_in('Password', :with => 'Seekrit') fill_in('Description', :with => 'Really Long Text…') choose('A Radio Button') check('A Checkbox') uncheck('A Checkbox') attach_file('Image', '/path/to/image.jpg') select('Option', :from => 'Select Box')
59. Capybara - the session object • page.text • no html • page.body • html • save_and_open_page • opens the page's html in your browser (needs the launchy gem) http://rubydoc.info/github/jnicklas/capybara/master/Capybara/Session
60. Gemfile source "https://rubygems.org" ! gem "rake" gem "capybara-webkit" $ bundle install $ bundle
61. Rake and the Rakefile require "rake/testtask" ! Rake::TestTask.new do |t| t.libs << "spec" t.pattern = "spec/**/*_spec.rb" end
62. spec/spec_helper.rb require "minitest/autorun" require "minitest/spec" ! class FeatureSpec < MiniTest::Spec require "capybara/webkit" include Capybara::DSL Capybara.default_driver = :webkit register_spec_type(/page$/, self) end
63. spec/features/search_spec.rb require "spec_helper" ! describe "My search page" do it "has results" do visit "http://google.com" fill_in "q", with: "Code Fellows" click_on "Google Search" page.text.must_include "codefellows.org" page.text.must_include "twitter.com/CodeFellowsOrg" end end
64. spec/features/welcome_page_spec.rb require "spec_helper" ! describe "A local web page" do it "has a welcome headline" do visit "http://localhost:4000/public/" page.text.must_include "Welcome aboard" end end
65. spec/features/rails_new_spec.rb require "spec_helper" ! describe "My Rails App welcome page" do it "shows the welcome message" do visit "http://localhost:3000" page.text.must_include "Welcome aboard" end end
66. Demo of Chapter 1