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

Web application intro + a bit of ruby (revised)

Embed Size (px)

DESCRIPTION

A little introduction to web applications and to Ruby, used at the Rails Girls Berlin workshops.

Citation preview

Page 1: Web application intro + a bit of ruby (revised)

Introduction to Web Applications

Tobias Pfeiffer@PragTob

pragtob.wordpress.com

Page 2: Web application intro + a bit of ruby (revised)

Today

Page 3: Web application intro + a bit of ruby (revised)
Page 4: Web application intro + a bit of ruby (revised)

What is a web application?

Page 5: Web application intro + a bit of ruby (revised)

Not rocket science

Page 6: Web application intro + a bit of ruby (revised)

I am Rails (and So Can You!)

Page 7: Web application intro + a bit of ruby (revised)

Programming is fun!

Page 8: Web application intro + a bit of ruby (revised)

What you are goingto build today

Page 9: Web application intro + a bit of ruby (revised)

So what is a web application?

Page 10: Web application intro + a bit of ruby (revised)

Presented in aweb browser

Page 11: Web application intro + a bit of ruby (revised)

Runs on a server...

Page 12: Web application intro + a bit of ruby (revised)

...or the cloud

Page 13: Web application intro + a bit of ruby (revised)

is dynamic

Page 14: Web application intro + a bit of ruby (revised)

A high level overview

Page 15: Web application intro + a bit of ruby (revised)

High level overview

Page 16: Web application intro + a bit of ruby (revised)

High level overview

Page 17: Web application intro + a bit of ruby (revised)

High level overview

Request

Page 18: Web application intro + a bit of ruby (revised)

High level overview

Page 19: Web application intro + a bit of ruby (revised)

High level overview

Answer

Page 20: Web application intro + a bit of ruby (revised)

High level overview

Answer

Page 21: Web application intro + a bit of ruby (revised)

High level overview

Page 22: Web application intro + a bit of ruby (revised)

What parts does a web application consist of?

Page 23: Web application intro + a bit of ruby (revised)

Web Application

Page 24: Web application intro + a bit of ruby (revised)

Front End

Back End

Page 25: Web application intro + a bit of ruby (revised)

Front End

Back End

Page 26: Web application intro + a bit of ruby (revised)

CSS

HTML

JavaScript

Page 27: Web application intro + a bit of ruby (revised)

CSS

HTML

JavaScript

Page 28: Web application intro + a bit of ruby (revised)

Structure and content

Page 29: Web application intro + a bit of ruby (revised)

CSS

HTML

JavaScript

Page 30: Web application intro + a bit of ruby (revised)

Styling to transform...

Page 31: Web application intro + a bit of ruby (revised)

...this...

Page 32: Web application intro + a bit of ruby (revised)

...into this.

Page 33: Web application intro + a bit of ruby (revised)

CSS

HTML

JavaScript

Page 34: Web application intro + a bit of ruby (revised)

Back End

CSS

HTML

JavaScript

Page 35: Web application intro + a bit of ruby (revised)

Back End

CSS

HTML

JavaScript

Page 36: Web application intro + a bit of ruby (revised)

Logic

Infrastructure

Page 37: Web application intro + a bit of ruby (revised)

Logic

Infrastructure

Page 38: Web application intro + a bit of ruby (revised)

Logic

● Behaviour● Implements the business logic● Ties all the parts together● Generates content

Page 39: Web application intro + a bit of ruby (revised)

Ruby on Rails

Page 40: Web application intro + a bit of ruby (revised)

Logic

Infrastructure

Page 41: Web application intro + a bit of ruby (revised)

Web Server

Page 42: Web application intro + a bit of ruby (revised)

Logic

Infrastructure

Page 43: Web application intro + a bit of ruby (revised)

Storing all yourdata...

Page 44: Web application intro + a bit of ruby (revised)

...in giant tables

Page 45: Web application intro + a bit of ruby (revised)

Recap

Page 46: Web application intro + a bit of ruby (revised)

Logic

Storage

Infrastructure

CSS

HTML

JavaScript

Web Application Landscape

Page 47: Web application intro + a bit of ruby (revised)

Logic

Storage

Infrastructure

CSS

HTML

JavaScript

Web Application Landscape

Bootstrap

XML DOM

jQuery

Ruby on Rails

Sqlite

Apache

WEBrick

MongoD

B

Thin

Ruby PHP

Python

Django

Java

Page 48: Web application intro + a bit of ruby (revised)

But what is Ruby on Rails?

Page 49: Web application intro + a bit of ruby (revised)

A web application framework written in Ruby

Page 50: Web application intro + a bit of ruby (revised)

● A general purpose programming language

● Principle of least surprise● Invented by Yukihiro Matsumoto

Page 51: Web application intro + a bit of ruby (revised)

"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

Page 52: Web application intro + a bit of ruby (revised)

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

Page 53: Web application intro + a bit of ruby (revised)

Let's get into some Ruby

Page 54: Web application intro + a bit of ruby (revised)

But before that...

Page 55: Web application intro + a bit of ruby (revised)

Questions time

?

Page 56: Web application intro + a bit of ruby (revised)

Open a terminal/console

Page 57: Web application intro + a bit of ruby (revised)

irb

Page 58: Web application intro + a bit of ruby (revised)

tobi@speedy:~$ irb1.9.3p194 :001 >

Page 59: Web application intro + a bit of ruby (revised)

irb – interactive ruby

● talking to ruby● You tell ruby something● Ruby responds with what it understood● Coaches are going to help you!

Page 60: Web application intro + a bit of ruby (revised)

1.9.3p194 :001 > 5 => 5

Page 61: Web application intro + a bit of ruby (revised)

1.9.3p194 :002 > 5 + 3 => 8

Page 62: Web application intro + a bit of ruby (revised)

1.9.3p194 :003 > 8 * 7 => 56

Page 63: Web application intro + a bit of ruby (revised)

1.9.3p194 :004 > "Tobias Pfeiffer" => "Tobias Pfeiffer"

Page 64: Web application intro + a bit of ruby (revised)

1.9.3p194 :005 > name = "Tobi" => "Tobi"

Page 65: Web application intro + a bit of ruby (revised)

1.9.3p194 :005 > coach = "Tobi" => "Tobi"

Page 66: Web application intro + a bit of ruby (revised)

1.9.3p194 :005 > dhaksdhak = "Tobi" => "Tobi"

Page 67: Web application intro + a bit of ruby (revised)

1.9.3p194 :005 > name = "Tobi" => "Tobi"

Page 68: Web application intro + a bit of ruby (revised)

1.9.3p194 :006 > name => "Tobi"

Page 69: Web application intro + a bit of ruby (revised)

1.9.3p194 :007 > result = 8 * 7 => 56

Page 70: Web application intro + a bit of ruby (revised)

1.9.3p194 :007 > result = 8 * 7 => 56

56result

Page 71: Web application intro + a bit of ruby (revised)

1.9.3p194 :008 > result * 10 => 560

Page 72: Web application intro + a bit of ruby (revised)

1.9.3p194 :009 > name + " likes Sweden" => "Tobi likes Sweden"

Page 73: Web application intro + a bit of ruby (revised)

1.9.3p194 :010 > puts "Hello World!"Hello World! => nil

Page 74: Web application intro + a bit of ruby (revised)

1.9.3p194 :011 > fruits = ["apple", "keewee", "orange"] => ["apple", "keewee", "orange"]

Page 75: Web application intro + a bit of ruby (revised)

1.9.3p194 :013 > fruits.each do |fruit| puts fruit endapplekeeweeorange => ["apple", "keewee", "orange"]

Page 76: Web application intro + a bit of ruby (revised)

1.9.3p194 :013 > fruits.each do |bob| puts bob endapplekeeweeorange => ["apple", "keewee", "orange"]

Page 77: Web application intro + a bit of ruby (revised)

1.9.3p194 :013 > fruits.each do |anything| puts anything endapplekeeweeorange => ["apple", "keewee", "orange"]

Page 78: Web application intro + a bit of ruby (revised)

1.9.3p194 :014 > fruits[0] => "apple"

Page 79: Web application intro + a bit of ruby (revised)

1.9.3p194 :015 > symbol = :wuh => :wuh 1.9.3p194 :016 > symbol => :wuh

Page 80: Web application intro + a bit of ruby (revised)

1.9.3p194 :017 > dictionary = {:hi => "Hej", :good => "bra", :cookie => "kaka"} => {:hi=>"Hej", :good=>"bra", :cookie=>"kaka"} 1.9.3p194 :018 > dictionary[:hi] => "Hej" 1.9.3p194 :019 > dictionary[:cookie] => "kaka"

Page 81: Web application intro + a bit of ruby (revised)

1.9.3p194 :020 > def hello1.9.3p194 :021?> puts "Hello there!"1.9.3p194 :022?> end => nil

Page 82: Web application intro + a bit of ruby (revised)

1.9.3p194 :026 > helloHello there! => nil

Page 83: Web application intro + a bit of ruby (revised)

1.9.3p194 :023 > def greeter(person)1.9.3p194 :024?> puts "Hello " + person1.9.3p194 :025?> end => nil

Page 84: Web application intro + a bit of ruby (revised)

1.9.3p194 :027 > greeter("Fanny")Hello Fanny => nil

Page 85: Web application intro + a bit of ruby (revised)

1.9.3p194 :028 > greeterArgumentError: wrong number of arguments (0 for 1)

from (irb):23:in `greeter'from (irb):28from /home/tobi/.rvm/rubies/ruby-1.9.3-

p194/bin/irb:16:in `<main>'

Page 86: Web application intro + a bit of ruby (revised)

1.9.3p194 :029 > class Person1.9.3p194 :030?> attr_accessor :name, :age1.9.3p194 :031?> end => nil 1.9.3p194 :032 > tobi = Person.new => #<Person:0x0000000205f080>

Page 87: Web application intro + a bit of ruby (revised)

1.9.3p194 :033 > tobi.name => nil 1.9.3p194 :034 > tobi.name = "Tobi" => "Tobi" 1.9.3p194 :035 > tobi.age = 23 => 23 1.9.3p194 :036 > tobi.name => "Tobi" 1.9.3p194 :037 > tobi.age => 23

Page 88: Web application intro + a bit of ruby (revised)

1.9.3p194 :038 > tobi.age * 365 => 8395 1.9.3p194 :039 > puts "This was a talk by " + tobi.name + " - thank you!"This was a talk by Tobi - thank you! => nil

Page 89: Web application intro + a bit of ruby (revised)

Where to go from here?

● I gather resources here, such as:– http://tryruby.org

– 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

Page 90: Web application intro + a bit of ruby (revised)

Thank you and enjoy coding!

Tobias Pfeiffer@PragTob

pragtob.wordpress.comlisten to me talking about learning Ruby (German)

Page 91: Web application intro + a bit of ruby (revised)

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/