Campus Party 2010

A apresentação comecará em alguns minutos ...

Wednesday, January 27, 2010

A apresentação comecará em alguns minutos ...


AkitaOnRails.com


~ 1 h> 100 slides


www.slideshare.net/akitaonrails

[email protected]

www.akitaonrails.com/!les/entendendo-a-web-movies.zip


http://www.slideshare.net/akitaonrails






Entendendo a WebLições sobre Desenvolvimento Web com Ruby

Fabio Akita


Pensamento Tradicional


Web Server

MySQL

Browser


Web Server

MySQL

Browser


Web Server

MySQL

Browser


/site/default.asp


include header

/site/default.asp


include header

while ...

/site/default.asp


include header

while ...

Response.write

/site/default.asp


include header

include footer

while ...

Response.write

/site/default.asp


Ruby?



Ruby on Rails 2.3

Ruby 1.8

“Novo” Ruby 1.9Wednesday, January 27, 2010

Ruby on Rails 2.3

Ruby 1.8


Ruby on Rails 2.3

Ruby 1.8


x mais lento que C++


Python 2

Ruby 1.9

Perl

JRuby

Python 3

PHP

Ruby 1.8.6

0 50 100 150 200

x mais lento que C++










6


Menos Requisições




DEVELOPMENT


PRODUCTION


Mini!que CSS e Javascript


Juicerhttp://github.com/cjohansen/juicer/


http://github.com/cjohansen/juicer/



• git clone git://github.com/cjohansen/juicer.git



• cd juicer ; rake build




• gem install pkg/juicer-0.9.9.gem









• ./script/plugin install git://github.com/ktheory/juicer-rails.git


• juicer install yuicompressor

• juicer install jslint


<%= juiced_tag '/stylesheets/application.css' %> <%= yield(:head) %>

</head><body>

... <%= juiced_tag '/javascripts/application.js' %>

</body>

/app/views/layouts/application.html.erb


<%= juiced_tag '/stylesheets/application.css' %> <%= yield(:head) %>

</head><body>

... <%= juiced_tag '/javascripts/application.js' %>

</body>



@import url("reset.css");@import url("base.css");@import url("fonts.css");

...

/* @depends jquery-1.4.min.js @depends jquery.edit_in_place.js @depends jqueryamail.js*/

...

/public/stylesheets/application.css

/public/javascripts/application.js


@import url("reset.css");@import url("base.css");@import url("fonts.css");

...

/* @depends jquery-1.4.min.js @depends jquery.edit_in_place.js @depends jqueryamail.js*/

...

/public/stylesheets/application.css

/public/javascripts/application.js



• juicer merge public/stylesheets/application.css

• public/stylesheets/application.min.css


• juicer merge public/stylesheets/application.css

• public/stylesheets/application.min.css

• juicer merge -i public/javascripts/application.js

• public/javascripts/application.min.js


DEVELOPMENT


PRODUCTION


Asset HostsNavegadores abrem poucas conexões

simultâneas por domínio



def gallery gallery_path = File.join(Rails.root, "public/images/gallery/")

@images = Dir.glob(gallery_path + "*").map{ |f| f.gsub(gallery_path, "") }

end

/app/controllers/hello_controller.rb




end


/app/views/hello/gallery.html.erb

<% title "Gallery" %>

<% @images.each do |image| -%> <%= image_tag "gallery/#{image}" %>

<% end -%>




end


/app/views/hello/gallery.html.erb

<% title "Gallery" %>

<% @images.each do |image| -%> <%= image_tag "gallery/#{image}" %>

<% end -%>


DEVELOPMENT


DEVELOPMENT


/con!g/environments/production.rb

config.action_controller.asset_host = Proc.new do |source, request| protocol = if request.ssl?

request.headers["USER_AGENT"] =~ /(Safari)/ ? "http" : "https" else

"http" end

"#{protocol}://asset#{rand(6) + 1}.akitaonrails.local:3000"end


/con!g/environments/production.rb

config.action_controller.asset_host = Proc.new do |source, request| protocol = if request.ssl?

request.headers["USER_AGENT"] =~ /(Safari)/ ? "http" : "https" else

"http" end

"#{protocol}://asset#{rand(6) + 1}.akitaonrails.local:3000"end


### Host Database## localhost is used to configure the loopback interface# when the system is booting. Do not change this entry.##127.0.0.1 localhost255.255.255.255 broadcasthost::1 localhost fe80::1%lo0 localhost127.0.0.1 asset1.akitaonrails.local asset2.akitaonrails.local asset3.akitaonrails.local asset4.akitaonrails.local asset5.akitaonrails.local asset6.akitaonrails.local www.akitaonrails.local

/etc/hosts


PRODUCTION


PRODUCTION


Javascript embaixo!


<head> <title><%= h(yield(:title) || "Untitled") %></title> <%= stylesheet_link_tag 'application' %> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js" type="text/javascript"></script> <%= yield(:head) %></head><body>...



<head> <title><%= h(yield(:title) || "Untitled") %></title> <%= stylesheet_link_tag 'application' %> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js" type="text/javascript"></script> <%= yield(:head) %></head><body>...



... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js" type="text/javascript"></script> <script type="text/javascript"> // meu javascript customizado ... </script> </body></html>



... <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script> <script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js" type="text/javascript"></script> <script type="text/javascript"> // meu javascript customizado ... </script> </body></html>



Gzip


• a2enmod de!ate

• editar /etc/apache2/mods-available/de!ate.conf


<IfModule mod_deflate.c> AddOutputFilterByType DEFLATE text/plain AddOutputFilterByType DEFLATE text/html AddOutputFilterByType DEFLATE text/xml AddOutputFilterByType DEFLATE text/css AddOutputFilterByType DEFLATE image/svg+xml AddOutputFilterByType DEFLATE image/x-icon AddOutputFilterByType DEFLATE application/xml AddOutputFilterByType DEFLATE application/xhtml+xml AddOutputFilterByType DEFLATE application/rss+xml AddOutputFilterByType DEFLATE application/javascript AddOutputFilterByType DEFLATE application/x-javascript

AddOutputFilterByType DEFLATE application/x-httpd-php AddOutputFilterByType DEFLATE application/x-httpd-fastphp AddOutputFilterByType DEFLATE application/x-httpd-eruby

DeflateCompressionLevel 9

# Netscape 4.X has some problems BrowserMatch ^Mozilla/4 gzip-only-text/html

# Netscape 4.06-4.08 have some more problems BrowserMatch ^Mozilla/4\.0[678] no-gzip

# MSIE masquerades as Netscape, but it is fine BrowserMatch \bMSIE !no-gzip !gzip-only-text/html</IfModule>

/etc/apache2/mods-available/de"ate.conf


Cabeçalhos de Expiração


• a2enmod expires

• editar /etc/apache2/mods-available/expires.conf


<IfModule mod_expires.c> ExpiresByType image/x-icon "access plus 1 year" ExpiresByType image/png "access plus 1 year" ExpiresByType image/jpg "access plus 1 year" ExpiresByType image/gif "access plus 1 year" ExpiresByType image/jpeg "access plus 1 year" ExpiresByType application/pdf "access plus 1 year" ExpiresByType audio/x-wav "access plus 1 year" ExpiresByType audio/mpeg "access plus 1 year" ExpiresByType video/mpeg "access plus 1 year" ExpiresByType video/mp4 "access plus 1 year" ExpiresByType video/quicktime "access plus 1 year" ExpiresByType video/x-ms-wmv "access plus 1 year" ExpiresByType application/x-shockwave-flash "access 1 month" ExpiresByType text/css "access plus 1 year" ExpiresByType text/javascript "access plus 1 year"</IfModule>

/etc/apache2/mods-available/expires.conf


Cache Busters


<%= stylesheet_link_tag 'application' %>

<%= javascript_include_tag 'application' %>

<%= image_tag "logo.png" %>



<link href="/stylesheets/application.css?1264345891" media="screen" rel="stylesheet" type="text/css" />

<script src="/javascripts/application.js?1264345058"

type="text/javascript"></script>

<img alt="Logo" src="/images/logo.png?1268943058" />



<link href="/stylesheets/application.css?1264345891" media="screen" rel="stylesheet" type="text/css" />

<script src="/javascripts/application.js?1264345058"

type="text/javascript"></script>

<img alt="Logo" src="/images/logo.png?1268943058" />



Use CDNs


<script src="/javascripts/jquery-1.4.min.js" type="text/javascript"></script><script src="/javascripts/jquery-ui-1.7.2.min.js" type="text/javascript"></script><script src="/javascripts/swfobject-2.2.js" type="text/javascript"></script><script src="/javascripts/CFInstall-1.0.2.min.js" type="text/javascript"></script>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js" type="text/javascript"></script>



<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" type="text/javascript"></script><script src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1.0.2/CFInstall.min.js" type="text/javascript"></script>



Search


select * from ... where ... like “%...%”



or ... like “%...%”or ... like “%...%”or ... like “%...%”or ... like “%...%”






• Open Source Enterprise Search Platform

• Baseado no famoso Lucene

• Full Text Search, com relevância

• Indexa documentos (Word, PDF, etc)

• Interface REST

• Roda em containers de Servlet (Tomcat)










RackA API mais simples possível que

representa uma aplicação web genérica


ServerHTTP


ServerHTTPRequest


ServerHTTPRequest


ServerHTTPRequest


ServerHTTPRequest Response


lambda { |env| [200, {"Content-type" => "text/plain"}, "Hello World"] }



Requisição



Status

Requisição



Status Cabeçalhos

Requisição



Status Cabeçalhos Corpo

Requisição


RackRequest(env)

Response(Array)


RackRequest(env)

Response(Array)

.call(env)


RackRequest

Response

Rack

Rack


RackRequest

Response

Rack

Rack


RackRequest

Response

Rack

Rack


RackRequest

Response

Rack

Rack


RackRequest

Response

Rack

Rack


$ rake middleware

use ActionDispatch::Staticuse Rack::Lockuse Rack::Runtimeuse Rails::Rack::Loggeruse ActionDispatch::ShowExceptionsuse ActionDispatch::Callbacksuse ActionDispatch::Cookiesuse ActionDispatch::Session::CookieStoreuse ActionDispatch::Flashuse ActionDispatch::Cascadeuse ActionDispatch::ParamsParseruse Rack::MethodOverrideuse ActionDispatch::Headuse ActiveRecord::ConnectionAdapters::ConnectionManagementuse ActiveRecord::QueryCacherun Class


gem install rack


# run with 'rackup -p 9292 config.ru'require 'rubygems'

require 'rack'

app = Proc.new { |env| [200, {"Content-Type" => "text/html"}, "Hello Rack!"] }

run app

con!g.ru


rackup con!g.ru



Sinatrahttp://www.sinatrarb.com/





Otimizações Backend



Browser pede páginaSe existir no cache, retorna

Procura RotaChama ControllerExecuta AçãoComunica com Banco de Dados

Se existir no cache, pulaSe processar assíncrono, pula

Renderiza ViewRetorna resultado ao Browser















































Apache2+ mod_proxy_balancer

Squid

Varnish


Memcached

MySQL Proxy

Assíncrono (ex. Resque, RabbitMQ)


LoadBalancer


LoadBalancer

App Server

Cache


LoadBalancer

App Server App Server

CacheCache


LoadBalancer


Cache

App Server

CacheCache


LoadBalancer


Cache

App Server

CacheCache


LoadBalancer


Cache

App Server

Cache

MySQLMaster

Cache


LoadBalancer


Cache

App Server

Cache

MySQLMaster

MySQLSlave

MySQLSlave

Cache


LoadBalancer


Cache

App Server

Cache

MySQL Proxy

MySQLMaster

MySQLSlave

MySQLSlave

Cache


LoadBalancer


Cache

App Server

Cache

MySQL Proxy

MySQLMaster

MySQLSlave

MySQLSlave

Cache


LoadBalancer


Cache

App Server

Cache

MySQL Proxy

MySQLMaster

MySQLSlave

MySQLSlave

Cache

Job Server


Tendências


C10K Problem



HTML 5

Web Sockets

Reactor/Deferrable Pattern


HTML 5

Web Sockets



HTML 5

Web Sockets





Browser

App

Banco

Browser

App

Browser

App


Browser

App

Banco

Browser

App

Browser

App


Browser

App

Banco

Browser

App

Browser

App


Browser

App

Banco

Browser

App

Browser

App


Browser

App

Banco

Browser

App

Browser

App

Browser


Browser

App

Banco

Browser

App

Browser

App

Browser

?


Browser

Banco

Browser Browser


Browser

Banco

Browser

conexões/eventos

Browser


Browser

Banco

Browser

conexões/eventos

Browser

processamento/eventos


Browser

Banco

Browser

conexões/eventos

Browser



Browser

Banco

Browser

conexões/eventos

Browser



Browser

Banco

Browser

conexões/eventos

Browser



Browser

Banco

Browser

conexões/eventos

Browser


Browser


Browser

Banco

Browser

conexões/eventos

Browser


Browser


Browser

Banco

Browser

conexões/eventos

Browser


BrowserBrowser


Browser

Banco

Browser

conexões/eventos

Browser


BrowserBrowser


Browser

Banco

Browser

conexões/eventos

Browser


BrowserBrowser




Aprendendo Mais


RAILS LABS



RAILSCASTS.com




Entenda os browsers

Entenda HTTP

Arquiteturas

Mundo Assíncrono

Mundo não Relacional


Entenda os browsers

Entenda HTTP

Arquiteturas

Mundo Assíncrono



Entenda os browsers

Entenda HTTP

Arquiteturas

Mundo Assíncrono



Entenda os browsers

Entenda HTTP

Arquiteturas

Mundo Assíncrono



Entenda os browsers

Entenda HTTP

Arquiteturas

Mundo Assíncrono




Thx!www.slideshare.net/akitaonrails

[email protected]

www.akitaonrails.com/!les/entendendo-a-web-movies.zip








Technology

Campus Party 2010