Frontline - Rails3.1

http://objetiva.co/

Fron

Imagem por Hunter Killer http://bit.ly/q0xm7i

Ruby on Rails 3.1

Quem trabalha com web ?

ENQUETE

Quem CONHECE HTML, JS e CSS ?

ENQUETE

BACKEND

HTTP

Frontend

PROBLEMAS2 principais

em Des. de Software

Performance

Performance

Desenvolvedor

Performance

Desenvolvedor

Máquina

Performance Damáquina

v

v

Solução em +- 14 passos

• MENOS REQUISIÇÕES

• CSS e JS EXTERNOS

• MINIMIZE JS E CSS

• SCRIPTS DUPLICADOS

• CSS NO TOPO

• SCRIPTS NO FINAL

• CACHE OTIMIZADO

• COMPACTAÇÃO

• CDN

• E-TAGS

• AJAX CACHE

-EXPRESSÕES CSSAJAX CACHEEVITE REDIRECIONAMENTOSREDUZA PESQUISAS DNS

Solução Railsem 0 Passos

Performance dodesenvolvedor

CSS e JavascriptDinâmicos

app/assets/stylesheets/forms.css.erb

.myInput { background-image: <%= asset_path 'image.png' %>;}

#logo { background: url(<%= asset_data_uri 'logo.png' %>);}

.content-navigation { border-color: #3bbfce; color: #2b9eab;}

.border { padding: 8px; margin: 8px; border-color: #3bbfce;}

#main { padding: 0px; border: 1px solid #aec1d0; background: white; position: relative; @include border-radius(10px, 10px, 10px, 10px);}

@mixin box-shadow($options, $ie:true) { box-shadow: $options; -moz-box-shadow: $options; -webkit-box-shadow: $options;}

#dashboardBody {

.warning { margin: 10px 0 0 0; padding: 0; color: #514721; background-color: #fff6bf;

a { color: #098aa4; } a:hover { text-decoration: underline; } }

}

#bedsBody {

li.bed { position: relative; display: inline-block; @include border-radius(5px);

&.available { background-color: #e1ffdc; border: 1px solid #a0e897; color: #2e9d30; }

&.occupied { background-color: #ffc1c3; border: 1px solid #d4888a; color: #b43c41; }}

"CoffeeScript is well done and more convenient to use than

Javascript"Brendan Eich - criador do Javascript

http://bit.ly/qucelc

var square = function(x) { return x * x;}

var square = function(x) { return x * x;}

var square = function(x) { x * x;}

var square = function(x) { x * x;}

square = function(x) x * x

square = function(x) x * x

square = (x) -> x * x

var square;square = function(x) { return x * x;};

var square;square = function(x) { return x * x;};

class Speaker say: -> console.log "----"

class BrazilianSpeaker extends Speaker say: -> console.log "Olá pessoal!" super() class AmericanSpeaker extends Speaker say: -> console.log "Hello folks!" super() speaker = new BrazilianSpeakerspeaker.say()

Muito além da beleza

• Convenções claras• Sem colisões e escopo global• Sem confusões com this• Bem menos código• Código expressa a lógica• Mesmas vantagens de JS

"CoffeeScript isn’t just about prettier code. It’s about being more confident that you got it

right the first time"Trevor Burnham - CoffeeScript Book PragProg

http://bit.ly/o915Fo

conclusão

slides: http://objetiva.co/publications

twitter: danielvlopesemail: daniel@objetiva.co