Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Web Application Intro for RailsGirls Berlin May 2013

Web Application Intro for RailsGirls Berlin May 2013

The well known web application introduction, this time without the Ruby introduction as the Ruby Monsters already did this! This time it also has a Bentobox.

Tobias Pfeiffer

May 04, 2013
Tweet

More Decks by Tobias Pfeiffer

Other Decks in Programming

Transcript

  1. Introduction to Web
    Applications
    Tobias Pfeiffer
    @PragTob
    pragtob.wordpress.com

    View Slide

  2. Today

    View Slide

  3. View Slide

  4. What is a web application?

    View Slide

  5. Not rocket science

    View Slide

  6. I am Rails
    (and So Can You!)

    View Slide

  7. Programming is fun!

    View Slide

  8. What you are going
    to build today

    View Slide

  9. So what is a web application?

    View Slide

  10. Presented in a
    web browser

    View Slide

  11. Runs on a server...

    View Slide

  12. ...or the cloud

    View Slide

  13. is dynamic

    View Slide

  14. A high level overview

    View Slide

  15. High level overview

    View Slide

  16. High level overview

    View Slide

  17. High level overview
    Request

    View Slide

  18. High level overview

    View Slide

  19. High level overview
    Answer

    View Slide

  20. High level overview
    Answer

    View Slide

  21. High level overview

    View Slide

  22. What parts does a web
    application consist of?

    View Slide

  23. Web Application

    View Slide

  24. Front End
    Back End

    View Slide

  25. Front End
    Back End

    View Slide

  26. CSS
    HTML
    JavaScript

    View Slide

  27. CSS
    HTML
    JavaScript

    View Slide

  28. Structure and content

    View Slide

  29. CSS
    HTML
    JavaScript

    View Slide

  30. Styling to transform...

    View Slide

  31. ...this...

    View Slide

  32. ...into this.

    View Slide

  33. View Slide

  34. CSS
    HTML
    JavaScript

    View Slide

  35. Back End
    CSS
    HTML
    JavaScript

    View Slide

  36. Back End
    CSS
    HTML
    JavaScript

    View Slide

  37. Logic
    Infrastructure

    View Slide

  38. Logic
    Infrastructure

    View Slide

  39. Logic

    Behaviour

    Implements the business logic

    Ties all the parts together

    Generates content

    View Slide

  40. Ruby on Rails

    View Slide

  41. But what is Ruby on Rails?

    View Slide

  42. A web application
    framework written in Ruby

    View Slide


  43. A general purpose programming
    language

    Principle of least surprise

    Invented by Yukihiro Matsumoto

    View Slide

  44. "I hope to see Ruby help
    every programmer in the
    world to be productive, and to
    enjoy programming, and to be
    happy. That is the primary
    purpose of Ruby language."
    Yukihiro Matsumoto

    View Slide

  45. Ruby on Rails

    Framework written in Ruby

    set of functionality to help write web
    applications
    – Connecting to the database (ActiveRecord)
    – Generating HTML (ERB)
    – Pays attention to security
    – … and so much more!

    Model View Controller

    You write in Ruby

    View Slide

  46. Logic
    Infrastructure

    View Slide

  47. Web Server

    View Slide

  48. Logic
    Infrastructure

    View Slide

  49. Storing all your
    data...

    View Slide

  50. ...in giant tables

    View Slide

  51. Recap

    View Slide

  52. Logic
    Storage
    Infrastructure
    CSS
    HTML
    JavaScript
    Web Application Landscape

    View Slide

  53. Logic
    Storage
    Infrastructure
    CSS
    HTML
    JavaScript
    Web Application Landscape
    Bootstrap
    DOM
    Ruby on Rails
    Sqlite
    WEBrick
    Ruby

    View Slide

  54. Bento Box Exercise

    Sort technologies and associated words
    into the landscape

    5 minutes time

    View Slide

  55. Logic
    Storage
    Infrastructure
    CSS
    HTML
    JavaScript
    Web Application Landscape
    Bootstrap
    DOM
    Ruby on Rails
    Sqlite
    WEBrick
    Ruby

    View Slide

  56. Bento Box Exercise

    jQuery

    Django

    Unicorn

    PHP

    Python

    XML

    Java

    MongoDB

    View Slide

  57. Logic
    Storage
    Infrastructure
    CSS
    HTML
    JavaScript
    Web Application Landscape
    Bootstrap
    XML
    DOM
    jQuery
    Ruby on Rails
    Sqlite
    Unicorn
    WEBrick
    MongoDB
    Ruby
    PHP Python
    Django
    Java

    View Slide

  58. Question time
    ?

    View Slide

  59. Where to go from here?

    I gather resources here, such as:
    – http://pragtob.github.io/rails-beginner-cheatsheet/
    – http://ruby.railstutorial.org/
    – http://rubymonk.com/
    – http://www.codeschool.com/courses/rails-for-zombies
    – http://rubykoans.com/
    – http://railscasts.com/

    Rails Girls Berlin project groups

    View Slide

  60. Thank you and enjoy
    coding!
    Tobias Pfeiffer
    @PragTob
    pragtob.wordpress.com
    listen to me talking about learning Ruby (German)

    View Slide

  61. Photo credit

    http://www.flickr.com/photos/captainkimo/5918836159/

    http://www.flickr.com/photos/weppos/7486411688/

    http://www.flickr.com/photos/railsgirlsberlin/7882839698/in/photostream

    http://www.flickr.com/photos/nirak/644336486/

    View Slide