Post on 18-Dec-2014
description
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
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>$$$<%=0@posts.each$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
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
Response (HTML)
Browser
Layout
View
Request
Router
Controller
Model
Database
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