Web Application Intro for RailsGirls Berlin May 2013

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

description

The well known web application introduction, this time without the Ruby introduction as the Ruby Monsters already did this! This time it also has a Bentobox.

Transcript of Web Application Intro for RailsGirls Berlin May 2013

Page 1: Web Application Intro for RailsGirls Berlin May 2013

Introduction to Web Applications

Tobias Pfeiffer@PragTob

pragtob.wordpress.com

Page 2: Web Application Intro for RailsGirls Berlin May 2013

Today

Page 3: Web Application Intro for RailsGirls Berlin May 2013
Page 4: Web Application Intro for RailsGirls Berlin May 2013

What is a web application?

Page 5: Web Application Intro for RailsGirls Berlin May 2013

Not rocket science

Page 6: Web Application Intro for RailsGirls Berlin May 2013

I am Rails (and So Can You!)

Page 7: Web Application Intro for RailsGirls Berlin May 2013

Programming is fun!

Page 8: Web Application Intro for RailsGirls Berlin May 2013

What you are goingto build today

Page 9: Web Application Intro for RailsGirls Berlin May 2013

So what is a web application?

Page 10: Web Application Intro for RailsGirls Berlin May 2013

Presented in aweb browser

Page 11: Web Application Intro for RailsGirls Berlin May 2013

Runs on a server...

Page 12: Web Application Intro for RailsGirls Berlin May 2013

...or the cloud

Page 13: Web Application Intro for RailsGirls Berlin May 2013

is dynamic

Page 14: Web Application Intro for RailsGirls Berlin May 2013

A high level overview

Page 15: Web Application Intro for RailsGirls Berlin May 2013

High level overview

Page 16: Web Application Intro for RailsGirls Berlin May 2013

High level overview

Page 17: Web Application Intro for RailsGirls Berlin May 2013

High level overview

Request

Page 18: Web Application Intro for RailsGirls Berlin May 2013

High level overview

Page 19: Web Application Intro for RailsGirls Berlin May 2013

High level overview

Answer

Page 20: Web Application Intro for RailsGirls Berlin May 2013

High level overview

Answer

Page 21: Web Application Intro for RailsGirls Berlin May 2013

High level overview

Page 22: Web Application Intro for RailsGirls Berlin May 2013

What parts does a web application consist of?

Page 23: Web Application Intro for RailsGirls Berlin May 2013

Web Application

Page 24: Web Application Intro for RailsGirls Berlin May 2013

Front End

Back End

Page 25: Web Application Intro for RailsGirls Berlin May 2013

Front End

Back End

Page 26: Web Application Intro for RailsGirls Berlin May 2013

CSS

HTML

JavaScript

Page 27: Web Application Intro for RailsGirls Berlin May 2013

CSS

HTML

JavaScript

Page 28: Web Application Intro for RailsGirls Berlin May 2013

Structure and content

Page 29: Web Application Intro for RailsGirls Berlin May 2013

CSS

HTML

JavaScript

Page 30: Web Application Intro for RailsGirls Berlin May 2013

Styling to transform...

Page 31: Web Application Intro for RailsGirls Berlin May 2013

...this...

Page 32: Web Application Intro for RailsGirls Berlin May 2013

...into this.

Page 34: Web Application Intro for RailsGirls Berlin May 2013

CSS

HTML

JavaScript

Page 35: Web Application Intro for RailsGirls Berlin May 2013

Back End

CSS

HTML

JavaScript

Page 36: Web Application Intro for RailsGirls Berlin May 2013

Back End

CSS

HTML

JavaScript

Page 37: Web Application Intro for RailsGirls Berlin May 2013

Logic

Infrastructure

Page 38: Web Application Intro for RailsGirls Berlin May 2013

Logic

Infrastructure

Page 39: Web Application Intro for RailsGirls Berlin May 2013

Logic

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

Page 40: Web Application Intro for RailsGirls Berlin May 2013

Ruby on Rails

Page 41: Web Application Intro for RailsGirls Berlin May 2013

But what is Ruby on Rails?

Page 42: Web Application Intro for RailsGirls Berlin May 2013

A web application framework written in Ruby

Page 43: Web Application Intro for RailsGirls Berlin May 2013

● A general purpose programming language

● Principle of least surprise● Invented by Yukihiro Matsumoto

Page 44: Web Application Intro for RailsGirls Berlin May 2013

"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 45: Web Application Intro for RailsGirls Berlin May 2013

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 46: Web Application Intro for RailsGirls Berlin May 2013

Logic

Infrastructure

Page 47: Web Application Intro for RailsGirls Berlin May 2013

Web Server

Page 48: Web Application Intro for RailsGirls Berlin May 2013

Logic

Infrastructure

Page 49: Web Application Intro for RailsGirls Berlin May 2013

Storing all yourdata...

Page 50: Web Application Intro for RailsGirls Berlin May 2013

...in giant tables

Page 51: Web Application Intro for RailsGirls Berlin May 2013

Recap

Page 52: Web Application Intro for RailsGirls Berlin May 2013

Logic

Storage

Infrastructure

CSS

HTML

JavaScript

Web Application Landscape

Page 53: Web Application Intro for RailsGirls Berlin May 2013

Logic

Storage

Infrastructure

CSS

HTML

JavaScript

Web Application Landscape

Bootstrap

DOM

Ruby on Rails

Sqlite

WEBrick

Ruby

Page 54: Web Application Intro for RailsGirls Berlin May 2013

Bento Box Exercise

● Sort technologies and associated words into the landscape

● 5 minutes time

Page 55: Web Application Intro for RailsGirls Berlin May 2013

Logic

Storage

Infrastructure

CSS

HTML

JavaScript

Web Application Landscape

Bootstrap

DOM

Ruby on Rails

Sqlite

WEBrick

Ruby

Page 56: Web Application Intro for RailsGirls Berlin May 2013

Bento Box Exercise

● jQuery● Django● Unicorn● PHP

● Python● XML● Java● MongoDB

Page 57: Web Application Intro for RailsGirls Berlin May 2013

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

Page 58: Web Application Intro for RailsGirls Berlin May 2013

Question time

?

Page 59: Web Application Intro for RailsGirls Berlin May 2013

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

Page 60: Web Application Intro for RailsGirls Berlin May 2013

Thank you and enjoy coding!

Tobias Pfeiffer@PragTob

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

Page 61: Web Application Intro for RailsGirls Berlin May 2013

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/