Rails Girls: Programming, Web Applications and Ruby on Rails

Programming, !Web Applications !and Ruby on Rails

Marco Schaden!@donschado

Saturday 24th May 2014

Buzzwords!

Web Application

RubyRails

Programming

HTTP

MVCModel

ViewContro

ller

Request

Response

ServerProtocol

?

?

?

?

?

?

?

HTML

all the stuff in 30 minutes

<<Programming>>

"It’s a boy’s thing"

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

"You need a Ph.D. in mathematics"

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

programming: !!

is telling a computer what to do!!

(no magic involved)

step-by-step instructions

= program

3.times0do00 print0"Hello0World!"0end

Ruby A PROGRAMMER’S BEST FRIEND

https://www.ruby-lang.org/

imagine all the programming languages

Ruby

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"

Later we will learn more about Ruby…

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

HTTP?

Hyper Text Transfer Protocol

http://weheartit.com/entry/17157559

HTTP Request Cycle In 4 Easy Steps

(or how the internet works)

your computer!running a browser of your choice

a web server !somewhere on the internet!running a web application

Hey$can$I$get$the$railsgirls$website?

1

http://railsgirls.com/cologne

Hey$can$I$get$the$railsgirls$website?

http$request$get,$post,$put,$delete,…

1

let$me$check…$.

2

$ok,$here$it$is

http$response$generated$data,$HTML,$static$files,$images,…

3

4

Yay!

GOT IT!

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:

MVC?

Model - View - Controller

http://weheartit.com/entry/17157559

Data$+$Logic

Presentation

Intermediary

WHY…?!?!

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

with MVC:

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

/

Example MVC Web Application

https://github.com/DonSchado/facebook-lite

/

Example MVC Web Application

Layout

View

Post

https://github.com/DonSchado/facebook-lite

URL localhost:3000/

(remember the request cycle?)

GET /!Request

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

Controller class WelcomeController < ApplicationController! def index!

$$@posts0= Post.all ! end!end!

Model class Post < ActiveRecord::Base!end!

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

Model class Post < ActiveRecord::Base!end!

Controller class WelcomeController < ApplicationController! def index!

$$@posts0= Post.all ! end!end!

View <h1>Das neuste aus ...$</h1>!!<ul>$$$<%[email protected]$do$|post|$%>0!!!!!00<%0end0%>$</ul>$

<li>$

$$<%=$image_tag(post.user.avatar)$%>$$$<%=$post.user.name$%>$$$<%=$post.content$%>$</li>

<html$lang="en">$

$$<head>$

$$$$$<title>Facebook$Lite</title>$

$$$$$<%=$stylesheet_link_tag$$$$"application",$media:$"all"$%>$$$$$$<%=$javascript_include_tag$"application"$%>$$$</head>$

$$<body>$

$$$$<div$class="container">$

$$$$$$<%=$yield$%>$$$$$</div>$

$$</body>$

</html>

Layout

Response (HTML)*

<html lang="en">! <head>! <title>Facebook Lite</title>! <link href="/assets/application.css" media="all" rel="stylesheet">! <script src="/assets/application.js"></script>! </head>! <body>! <div>! <h1>Das Neuste aus dem ganzen Netzwerk</h1>! <ul>! <li>! <img src="https://somewhere.github.com/1062e0f.png">! <h4>Liane<small>19 Nov 20:32</small></h4>! <p>Ich bin hier!!!</p>! </li>! <li>! <img src="https://somwhere.github.com/fa47a113f69.png">! <h4>Marco<small>19 Nov 20:02</small></h4>! <p>Hallo, ist da wer?</p>! </li>! <li>! <img src="https://somwhere.github.com/fa47a113f69.png">! <h4>Marco<small>19 Nov 19:02</small></h4>! <p>Hallo Welt!</p>! </li>! </ul>! </div>! </body>!</html>

https://somewhere.github.com/1062e0f.png

https://somwhere.github.com/fa47a113f69.png

https://somwhere.github.com/fa47a113f69.png

URL localhost:3000/

http://cheezburger.com/

Response (HTML)

Browser

Layout

View

Request

Router

Controller

Model

Database

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

Conclusionwe’ve learned a lot of new stuff

http$response$generated$data,$HTML,$static$files,$images,…

http$request$get,$post,$put,$delete,…

Have fun!!

Enjoy your workshop!!

Ask the coaches!

http://tryruby.orgNow let’s start coding!

1

http://guides.railsgirls.com/app2

Rails Girls: Programming, Web Applications and Ruby on Rails

Technology

Transcript of Rails Girls: Programming, Web Applications and Ruby on Rails