Rails Girls: Programming, Web Applications and Ruby on Rails

All the Buzzwords for the Workshop in about 30 minutes

Transcript

1. Programming, !
   Web Applications !
   and Ruby on Rails
   Marco Schaden!
   @donschado
   Saturday 24th May 2014
   

   View Slide

2. Buzzwords!
   Web Application
   Ruby
   Rails
   Programming
   HTTP
   MVC
   Model
   View
   Controller
   Request
   Response
   Server
   Protocol
   ?
   ?
   ?
   ?
   ?
   ?
   ?
   HTML
   all the stuff in 30 minutes
   

   View Slide

3. <>
   

   View Slide

4. View Slide

5. "It’s a boy’s thing"
   

   View Slide

6. http://en.wikipedia.org/wiki/Women_in_computing
   

   View Slide

7. http://en.wikipedia.org/wiki/Women_in_computing
   

   View Slide

8. "You need a Ph.D. in mathematics"
   

   View Slide

9. Not necessarily, but…
   communication:
   express your thoughts!
   and ideas properly
   passion:
   care about what you’re doing !
   and be curious how things work
   research:
   read documentation, !
   consult others or!
   just google it!
   problem solving:
   read the error messages !
   and be hungry to solve issues
   + patience
   

   View Slide

10. View Slide

11. programming: !
    !
    is telling a computer what to do!
    !
    (no magic involved)
    

    View Slide

12. step-by-step instructions
    = program
    

    View Slide

13. 3.times0do0
    0 print0"Hello0World!"0
    end
    

    View Slide

14. Ruby
    A PROGRAMMER’S BEST FRIEND
    https://www.ruby-lang.org/
    

    View Slide

15. imagine all the programming languages
    Ruby
    

    View Slide

16. Why Ruby?
    Yukihiro Matsumoto !
    (Matz)
    Ruby is designed to be human-
    oriented. It reduces the burden of
    programming. It tries to push jobs
    back to machines.!
    !
    You can accomplish more tasks
    with less work, in smaller yet
    readable code.
    "Matz is nice so we are nice"
    

    View Slide

17. Later we will learn more about Ruby…
    

    View Slide

18. Web Application
    ?
    "A web application is a program that is displayed in a web browser. *
    Web applications are usually stored (and executed) on a web server.
    They can be accessed through the Internet 

    via a communication protocol such as HTTP. " 

    – Wikipedia
    

    View Slide

19. HTTP?
    Hyper Text Transfer Protocol
    http://weheartit.com/entry/17157559
    

    View Slide

20. HTTP
    Request Cycle
    In 4 Easy Steps
    (or how the internet works)
    

    View Slide

21. your computer!
    running a browser of your choice
    a web server !
    somewhere on the internet!
    running a web application
    

    View Slide

22. Hey$can$I$get$the$
    railsgirls$website?
    1
    http://railsgirls.com/cologne
    

    View Slide

23. Hey$can$I$get$the$
    railsgirls$website?
    http$request$
    get,$post,$put,$delete,…
    1
    

    View Slide

24. let$me$check…$.
    2
    

    View Slide

25. $ok,$here$it$is
    http$response$
    generated$data,$HTML,$static$files,$images,…
    3
    

    View Slide

26. 4
    Yay!
    

    View Slide

27. GOT IT!
    

    View Slide

28. View Slide

29. David Heinemeier Hansson!
    (DHH)
    Why Rails?
    Rails is an attempt to mold the
    beauty and productiveness of
    Ruby into a framework for
    web applications.
    Rails emphasizes principles such as:!
    • convention over configuration!
    • don't repeat yourself (DRY)!
    • model - view - controller
    architecture (MVC)
    http://contributors.rubyonrails.org/
    http://rubyonrails.org/
    *over 3000 people have contributed:
    

    View Slide

30. MVC?
    Model - View - Controller
    http://weheartit.com/entry/17157559
    

    View Slide

31. View Slide

32. Data$+$Logic
    Presentation
    Intermediary
    

    View Slide

33. WHY…?!?!
    

    View Slide

34. w/o MVC:
    http://media0.faz.net/ppmedia/aktuell/wirtschaft/777415979/1.1528426/default/wo-ist-noch-mal-die-rechnung-ein-buero-mit-sehr-kreativem-chaos.jpg
    

    View Slide

35. with MVC:
    http://blog.meine-moebelmanufaktur.de/wp-content/uploads/2014/02/bunte_ordner_buero.jpg
    

    View Slide

36. /
    Example MVC Web Application
    https://github.com/DonSchado/facebook-lite
    

    View Slide

37. /
    Example MVC Web Application
    Layout
    View
    Post
    https://github.com/DonSchado/facebook-lite
    

    View Slide

38. URL localhost:3000/
    (remember the request cycle?)
    

    View Slide

39. GET /!
    Request
    

    View Slide

40. Router
 get "/" => "welcome#index"!
    

    View Slide

41. Controller
 class WelcomeController < ApplicationController!
    def index!
    $$@posts0= Post.all !
    end!
    end!
    

    View Slide

42. Model
 class Post < ActiveRecord::Base!
    end!
    

    View Slide

43. Database * create_table "posts" do |t|!
    t.text "content"!
    t.integer "user_id"!
    t.datetime "created_at"!
    t.datetime "updated_at"!
    end!
    

    View Slide

44. Model
 class Post < ActiveRecord::Base!
    end!
    

    View Slide

45. Controller
 class WelcomeController < ApplicationController!
    def index!
    $$@posts0= Post.all !
    end!
    end!
    

    View Slide

46. View
 Das neuste aus ...$!
    !
    $
    $$0
    !
    !
    !
    !
    !
    00$
    $
    $
    $$$
    $$$
    $$$
    
    

    View Slide

47. $
    $$$
    $$$$$Facebook$Lite$
    $$$$$$
    $$$$$$
    $$$
    $$$
    $$$$$
    $$$$$$$
    $$$$$
    $$$
    
    Layout

    

    View Slide

48. Response
    (HTML)*

    !
    !
    Facebook Lite!
    !
    !
    !
    !
    !
    Das Neuste aus dem ganzen Netzwerk!
    !
    !
    !
    Liane19 Nov 20:32!
    Ich bin hier!!!!
    !
    !
    !
    Marco19 Nov 20:02!
    Hallo, ist da wer?!
    !
    !
    !
    Marco19 Nov 19:02!
    Hallo Welt!!
    !
    !
    !
    !
    
    

    View Slide

49. URL localhost:3000/
    

    View Slide

50. http://cheezburger.com/
    

    View Slide

51. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

52. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

53. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

54. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

55. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

56. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

57. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

58. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

59. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

60. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

61. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

62. Response
    (HTML)
    Browser
    Layout
    View
    Request
    Router
    Controller
    Model
    Database
    

    View Slide

63. All The Tools You Need:
    A Text Editor for writing code and editing files.
    The Terminal (known as Command Prompt)!
    Where you start the rails server and run commands.
    A Web Browser (Firefox, Safari, Chrome,…) 

    for viewing and interacting with your application.
    Ruby, the amazing programming language we love
    Rails, the framework for building web applications
    

    View Slide

64. Conclusion
    we’ve learned a lot of new stuff
    

    View Slide

65. http$response$
    generated$data,$HTML,$static$files,$images,…
    http$request$
    get,$post,$put,$delete,…
    

    View Slide

66. Have fun!!
    Enjoy your workshop!!
    Ask the coaches!
    http://tryruby.org
    Now let’s start coding!
    1
    http://guides.railsgirls.com/app
    2
    

    View Slide