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 HTTPFrontend
2 principaisPROBLEMASem Des. de Software
Performance
PerformanceDesenvolvedor
PerformanceDesenvolvedor                              Máquina
Performance Da   má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• ...
Solução Railsem 0 Passos
Performance dodesenvolvedor
CSS e Javascript   Dinâmicos
app/assets/stylesheets/forms.css.erb.myInput {  background-image: <%= asset_path image.png %>;}#logo {  background: url(<%...
.content-navigation {  border-color: #3bbfce;  color: #2b9eab;}.border {  padding: 8px;  margin: 8px;  border-color: #3bbf...
#main {  padding: 0px;  border: 1px solid #aec1d0;  background: white;  position: relative;  @include border-radius(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: #fff6...
#bedsBody {    li.bed {      position: relative;      display: inline-block;      @include border-radius(5px);      &.avai...
"CoffeeScript is well done and more convenient to use than        Javascript"     Brendan Eich - criador do Javascript    ...
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!"...
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...
"CoffeeScript isn’t just aboutprettier code. It’s about beingmore confident that you got it      right the first time"  Trev...
conclusão
slides: http://objetiva.co/publications
twitter: danielvlopesemail: daniel@objetiva.co
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Frontline - Rails3.1
Upcoming SlideShare
Loading in...5
×

Frontline - Rails3.1

5,466

Published on

Published in: Technology

Frontline - Rails3.1

  1. 1. http://objetiva.co/
  2. 2. Fron Imagem por Hunter Killer http://bit.ly/q0xm7i
  3. 3. Ruby on Rails 3.1
  4. 4. Quem trabalha com web ? ENQUETE
  5. 5. Quem CONHECE HTML, JS e CSS ? ENQUETE
  6. 6. BACKEND HTTPFrontend
  7. 7. 2 principaisPROBLEMASem Des. de Software
  8. 8. Performance
  9. 9. PerformanceDesenvolvedor
  10. 10. PerformanceDesenvolvedor Máquina
  11. 11. Performance Da máquina
  12. 12. v v
  13. 13. Solução em+- 14 passos
  14. 14. • MENOS REQUISIÇÕES• CSS e JS EXTERNOS• MINIMIZE JS E CSS• SCRIPTS DUPLICADOS• CSS NO TOPO• SCRIPTS NO FINAL• CACHE OTIMIZADO• COMPACTAÇÃO• CDN - EXPRESSÕES CSS AJAX CACHE• E-TAGS EVITE REDIRECIONAMENTOS• AJAX CACHE REDUZA PESQUISAS DNS
  15. 15. Solução Railsem 0 Passos
  16. 16. Performance dodesenvolvedor
  17. 17. CSS e Javascript Dinâmicos
  18. 18. app/assets/stylesheets/forms.css.erb.myInput { background-image: <%= asset_path image.png %>;}#logo { background: url(<%= asset_data_uri logo.png %>);}
  19. 19. .content-navigation { border-color: #3bbfce; color: #2b9eab;}.border { padding: 8px; margin: 8px; border-color: #3bbfce;}
  20. 20. #main { padding: 0px; border: 1px solid #aec1d0; background: white; position: relative; @include border-radius(10px, 10px, 10px, 10px);}
  21. 21. @mixin box-shadow($options, $ie:true) { box-shadow: $options; -moz-box-shadow: $options; -webkit-box-shadow: $options;}
  22. 22. #dashboardBody { .warning { margin: 10px 0 0 0; padding: 0; color: #514721; background-color: #fff6bf; a { color: #098aa4; } a:hover { text-decoration: underline; } }}
  23. 23. #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; }}
  24. 24. "CoffeeScript is well done and more convenient to use than Javascript" Brendan Eich - criador do Javascript http://bit.ly/qucelc
  25. 25. var square = function(x) { return x * x;}
  26. 26. var square = function(x) { return x * x;}
  27. 27. var square = function(x) { x * x;}
  28. 28. var square = function(x) { x * x;}
  29. 29. square = function(x) x * x
  30. 30. square = function(x) x * x
  31. 31. square = (x) -> x * x
  32. 32. var square;square = function(x) { return x * x;};
  33. 33. var square;square = function(x) { return x * x;};
  34. 34. 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()
  35. 35. Muito além da beleza
  36. 36. • 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
  37. 37. "CoffeeScript isn’t just aboutprettier code. It’s about beingmore confident that you got it right the first time" Trevor Burnham - CoffeeScript Book PragProg http://bit.ly/o915Fo
  38. 38. conclusão
  39. 39. slides: http://objetiva.co/publications
  40. 40. twitter: danielvlopesemail: daniel@objetiva.co
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×