Web Application Frameworks
(WAF)
Ako Kaman
@scheperson
What is a WAF?
• A general purpose software framework
• Used to build:
• Dynamic websites
• Web applications
• Web API
• Mostly based on MVC pattern
• Push based (more popular)
• Pull based
Why should I bother using a WAF?
• Community support
• Don’t reinvent the wheel
• Better application structure
• Decrease development time
• Free tools and components (more on this later)
• Hundreds of developers are smarter than your team! (RoR => 3477)
What is included in a typical WAF?
• Asset management (some WAFs)
• Generating sprites
• Pre-compiling assets for production
• Compiling SASS, Less and Coffescript on the fly (development)
• Helpers
• Security
• Local authentication
• Using OAuth
• Controllers
• Test tools
What is included in a typical WAF? (cont.)
• Scaffolding
• Command line tools
• I18n and L10n support
• Templating engine (View layer)
• Routing and URL mapping (no Default.aspx)!
• Database access and abstraction (Model layer)
• Migrations
• Caching data
• Databased agnostic
• Object oriented database access (ORM)
How does MVC work?
Router
Controller Model
Browser
View
Request
Dispatch
Fetch dataPush data
Render Response
Some WAFs out there
• PHP
• Yii
• Laravel
• FuelPHP
• CakePHP
• Zend Framework
• CodeIgniter (dead) => ExpressionEngine
• Symfony => Yahoo Bookmarks, Delicious, DailyMotion
• Python
• Flask
• Pylons
• Django => Pinterest, Disqus, Instagram, Mozilla, Rdio
Some WAFs out there (cont.)
• Java/Scala
• Lift => FourSquare
• Play => LinkedIn, Klout, The Guardian
• Java
• Grails
• Spring
• ASP.NET (C#, VB) :(
• ASP.NET MVC
• Ruby :)
• Sinatra => Apple, BBC, Heroku
• Ruby on Rails =>Twitter, GitHub, Basecamp, Groupon, SoundCloud
How does MVC work?
Router
Controller Model
Browser
View
Request
Dispatch
Fetch dataPush data
Render Response
Making an HTTP request
Router
Controller Model
Browser
View
Request
Dispatch
Fetch dataPush data
Render Response
Making an HTTP request (cont.)
http://example.com/books/1
GET /books/1 HTTP/1.1
Host: example.com
Routing and URL mapping
Router
Controller Model
Browser
View
Request
Dispatch
Fetch dataPush data
Render Response
Routing and URL mapping (cont.)
get “admin/news”
match "admin/news", to: "admin#posts", as: "manage_news", via: :get
Prefix Verb URI Pattern Controller#Action
admin_news GET /admin/news admin#news
Prefix Verb URI Pattern Controller#Action
manage_news GET /admin/news admin#posts
Routing and URL mapping (cont.)
resources “books”
Note the :id parameter
Prefix Verb URI Pattern Controller#Action
books GET /books books#index
POST /books books#create
new_book GET /books/new books#new
edit_book GET /books/:id/edit books#edit
book GET /books/:id books#show
PATCH /books/:id books#update
PUT /books/:id books#update
DELETE /books/:id books#destroy
Migrations, Models and Controllers
Router
Controller Model
Browser
View
Request
Dispatch
Fetch dataPush data
Render Response
Migrations, Models and Controllers (cont.)
class CreateBooks < ActiveRecord::Migration
def change
create_table :books do |t|
t.string :title
t.string :isbn
t.integer :pages
end
end
end
$ rails g migration CreateBooks title isbn pages:integer
What is a migration?
Migrations, Models and Controllers (cont.)
class BooksController < ApplicationController
...
def show
@book = Book.find(params[:id]) # /books/:id
end
...
end
class Book < ActiveRecord::Base
end
Views
Router
Controller Model
Browser
View
Request
Dispatch
Fetch dataPush data
Render Response
Views (cont.)
<p>
<strong>Title:</strong>
<%= @book.title %>
</p>
<p>
<strong>ISBN:</strong>
<%= @book.isbn %>
</p>
<p>
<strong>Pages:</strong>
<%= @book.pages %>
</p>
<%= link_to 'Edit', edit_book_path(@book) %> |
<%= link_to 'Back', books_path %>
Views (cont.)
<p>
<strong>Title:</strong>
<%= @book.title %>
</p>
<p>
<strong>ISBN:</strong>
<%= @book.isbn %>
</p>
<p>
<strong>Pages:</strong>
<%= @book.pages %>
</p>
<%= link_to 'Edit', edit_book_path(@book) %> |
<%= link_to 'Back', books_path %>
Prefix Verb URI Pattern Controller#Action
books GET /books books#index
edit_book GET /books/:id/edit books#edit
The end result
Questions?

Web Application Frameworks (WAF)

  • 1.
  • 2.
    What is aWAF? • A general purpose software framework • Used to build: • Dynamic websites • Web applications • Web API • Mostly based on MVC pattern • Push based (more popular) • Pull based
  • 3.
    Why should Ibother using a WAF? • Community support • Don’t reinvent the wheel • Better application structure • Decrease development time • Free tools and components (more on this later) • Hundreds of developers are smarter than your team! (RoR => 3477)
  • 4.
    What is includedin a typical WAF? • Asset management (some WAFs) • Generating sprites • Pre-compiling assets for production • Compiling SASS, Less and Coffescript on the fly (development) • Helpers • Security • Local authentication • Using OAuth • Controllers • Test tools
  • 5.
    What is includedin a typical WAF? (cont.) • Scaffolding • Command line tools • I18n and L10n support • Templating engine (View layer) • Routing and URL mapping (no Default.aspx)! • Database access and abstraction (Model layer) • Migrations • Caching data • Databased agnostic • Object oriented database access (ORM)
  • 6.
    How does MVCwork? Router Controller Model Browser View Request Dispatch Fetch dataPush data Render Response
  • 7.
    Some WAFs outthere • PHP • Yii • Laravel • FuelPHP • CakePHP • Zend Framework • CodeIgniter (dead) => ExpressionEngine • Symfony => Yahoo Bookmarks, Delicious, DailyMotion • Python • Flask • Pylons • Django => Pinterest, Disqus, Instagram, Mozilla, Rdio
  • 8.
    Some WAFs outthere (cont.) • Java/Scala • Lift => FourSquare • Play => LinkedIn, Klout, The Guardian • Java • Grails • Spring • ASP.NET (C#, VB) :( • ASP.NET MVC • Ruby :) • Sinatra => Apple, BBC, Heroku • Ruby on Rails =>Twitter, GitHub, Basecamp, Groupon, SoundCloud
  • 10.
    How does MVCwork? Router Controller Model Browser View Request Dispatch Fetch dataPush data Render Response
  • 11.
    Making an HTTPrequest Router Controller Model Browser View Request Dispatch Fetch dataPush data Render Response
  • 12.
    Making an HTTPrequest (cont.) http://example.com/books/1 GET /books/1 HTTP/1.1 Host: example.com
  • 13.
    Routing and URLmapping Router Controller Model Browser View Request Dispatch Fetch dataPush data Render Response
  • 14.
    Routing and URLmapping (cont.) get “admin/news” match "admin/news", to: "admin#posts", as: "manage_news", via: :get Prefix Verb URI Pattern Controller#Action admin_news GET /admin/news admin#news Prefix Verb URI Pattern Controller#Action manage_news GET /admin/news admin#posts
  • 15.
    Routing and URLmapping (cont.) resources “books” Note the :id parameter Prefix Verb URI Pattern Controller#Action books GET /books books#index POST /books books#create new_book GET /books/new books#new edit_book GET /books/:id/edit books#edit book GET /books/:id books#show PATCH /books/:id books#update PUT /books/:id books#update DELETE /books/:id books#destroy
  • 16.
    Migrations, Models andControllers Router Controller Model Browser View Request Dispatch Fetch dataPush data Render Response
  • 17.
    Migrations, Models andControllers (cont.) class CreateBooks < ActiveRecord::Migration def change create_table :books do |t| t.string :title t.string :isbn t.integer :pages end end end $ rails g migration CreateBooks title isbn pages:integer What is a migration?
  • 18.
    Migrations, Models andControllers (cont.) class BooksController < ApplicationController ... def show @book = Book.find(params[:id]) # /books/:id end ... end class Book < ActiveRecord::Base end
  • 19.
  • 20.
    Views (cont.) <p> <strong>Title:</strong> <%= @book.title%> </p> <p> <strong>ISBN:</strong> <%= @book.isbn %> </p> <p> <strong>Pages:</strong> <%= @book.pages %> </p> <%= link_to 'Edit', edit_book_path(@book) %> | <%= link_to 'Back', books_path %>
  • 21.
    Views (cont.) <p> <strong>Title:</strong> <%= @book.title%> </p> <p> <strong>ISBN:</strong> <%= @book.isbn %> </p> <p> <strong>Pages:</strong> <%= @book.pages %> </p> <%= link_to 'Edit', edit_book_path(@book) %> | <%= link_to 'Back', books_path %> Prefix Verb URI Pattern Controller#Action books GET /books books#index edit_book GET /books/:id/edit books#edit
  • 22.
  • 23.

Editor's Notes

  • #2 -Ask what is the difference between a web application and a normal web site?- The difference between Push/Pull