View
5.439
Download
0
Category
Preview:
Citation preview
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
twitter: danielvlopesemail: daniel@objetiva.co
Recommended