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 Ruby Rails Programming HTTP MVC Model View
Controller Request Response Server Protocol ? ? ? ? ? ? ? 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.times0do0 0 print0"Hello0World!"0 end

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 conﬁguration! • 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>

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 ﬁles. 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

Conclusion we’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.org Now
let’s start coding! 1 http://guides.railsgirls.com/app 2

Rails Girls: Programming, Web Applications and Ruby on Rails

Rails Girls: Programming, Web Applications and Ruby on Rails

More Decks by DonSchado

Other Decks in Programming

Featured

Transcript