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

2.
Today

3.
What is a web application?

4.
Not rocket science

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

6.
Programming is fun!

7.
What you are going
to build today

8.
So what is a web application?

9.
Presented in a
web browser

10.
Runs on a server...

11.
...or the cloud

12.
is dynamic

13.
A high level overview

14.
High level overview

15.
High level overview

16.
High level overview
Request

17.
High level overview

18.
High level overview
Answer

19.
High level overview
Answer

20.
High level overview

21.
What parts does a web
application consist of?

22.
Web Application

23.
Front End
Back End

24.
Front End
Back End

25.
CSS
HTML
JavaScript

26.
CSS
HTML
JavaScript

27.
Structure and content

28.
CSS
HTML
JavaScript

29.
Styling to transform...

30.
...this...

31.
...into this.

32.
CSS
HTML
JavaScript

33.
Back End
CSS
HTML
JavaScript

34.
Back End
CSS
HTML
JavaScript

35.
Logic
Infrastructure

36.
Logic
Infrastructure

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

38.
Ruby on Rails

39.
But what is Ruby on Rails?

40.
A web application
framework written in Ruby

41.
● A general purpose programming
language
● Principle of least surprise
● Invented by Yukihiro Matsumoto

42.
"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

43.
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

44.
Logic
Infrastructure

45.
Web Server

46.
Logic
Infrastructure

47.
Storing all your
data...

48.
...in giant tables

49.
Recap

50.
Logic
Storage
Infrastructure
CSS
HTML
JavaScript
Web Application Landscape

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

52.
Bento Box Exercise
● Sort technologies and associated words
into the landscape
● 5 minutes time

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

54.
Bento Box Exercise
● jQuery
● Django
● Unicorn
● PHP
● Python
● XML
● Java
● MongoDB

55.
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

56.
Question time
?

57.
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

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

59.
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/