Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Frontline - Rails3.1

5,749 views

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

×