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 full-size slide

  2. What is a web application?

    View full-size slide

  3. Not rocket science

    View full-size slide

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

    View full-size slide

  5. Programming is fun!

    View full-size slide

  6. What you are going
    to build today

    View full-size slide

  7. So what is a web application?

    View full-size slide

  8. Presented in a
    web browser

    View full-size slide

  9. Runs on a server...

    View full-size slide

  10. ...or the cloud

    View full-size slide

  11. A high level overview

    View full-size slide

  12. High level overview

    View full-size slide

  13. High level overview

    View full-size slide

  14. High level overview
    Request

    View full-size slide

  15. High level overview

    View full-size slide

  16. High level overview
    Answer

    View full-size slide

  17. High level overview
    Answer

    View full-size slide

  18. High level overview

    View full-size slide

  19. What parts does a web
    application consist of?

    View full-size slide

  20. Web Application

    View full-size slide

  21. Front End
    Back End

    View full-size slide

  22. Front End
    Back End

    View full-size slide

  23. CSS
    HTML
    JavaScript

    View full-size slide

  24. CSS
    HTML
    JavaScript

    View full-size slide

  25. Structure and content

    View full-size slide

  26. CSS
    HTML
    JavaScript

    View full-size slide

  27. Styling to transform...

    View full-size slide

  28. ...into this.

    View full-size slide

  29. CSS
    HTML
    JavaScript

    View full-size slide

  30. Back End
    CSS
    HTML
    JavaScript

    View full-size slide

  31. Back End
    CSS
    HTML
    JavaScript

    View full-size slide

  32. Logic
    Infrastructure

    View full-size slide

  33. Logic
    Infrastructure

    View full-size slide

  34. Logic

    Behaviour

    Implements the business logic

    Ties all the parts together

    Generates content

    View full-size slide

  35. Ruby on Rails

    View full-size slide

  36. But what is Ruby on Rails?

    View full-size slide

  37. A web application
    framework written in Ruby

    View full-size slide


  38. A general purpose programming
    language

    Principle of least surprise

    Invented by Yukihiro Matsumoto

    View full-size slide

  39. "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 full-size slide

  40. 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 full-size slide

  41. Logic
    Infrastructure

    View full-size slide

  42. Logic
    Infrastructure

    View full-size slide

  43. Storing all your
    data...

    View full-size slide

  44. ...in giant tables

    View full-size slide

  45. Logic
    Storage
    Infrastructure
    CSS
    HTML
    JavaScript
    Web Application Landscape

    View full-size slide

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

    View full-size slide

  47. Bento Box Exercise

    Sort technologies and associated words
    into the landscape

    5 minutes time

    View full-size slide

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

    View full-size slide

  49. Bento Box Exercise

    jQuery

    Django

    Unicorn

    PHP

    Python

    XML

    Java

    MongoDB

    View full-size slide

  50. 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 full-size slide

  51. Question time
    ?

    View full-size slide

  52. 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 full-size slide

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

    View full-size slide

  54. 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 full-size slide