O documento discute técnicas para melhorar o desempenho de aplicações web, dividindo-as em soluções para frontend e backend. No frontend, sugere otimizar arquivos CSS e JavaScript, usar CDNs e evitar redirecionamentos desnecessários. No backend, o Ruby on Rails permite melhorar o desempenho do desenvolvedor ao gerar CSS e JavaScript dinâmicos.

1. http://objetiva.co/

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

4. Ruby on Rails 3.1

5. Quem trabalha com web ?
ENQUETE

6. Quem CONHECE HTML, JS e CSS ?
ENQUETE

7. BACKEND
HTTP
Frontend

8. 2 principais
PROBLEMAS
em Des. de Software

10. Performance

11. Performance
Desenvolvedor

12. Performance
Desenvolvedor
Máquina

13. Performance Da
máquina

14. v
v

16. Solução em
+- 14 passos

17. • 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

18. Solução Rails
em 0 Passos

19. Performance do
desenvolvedor

30. CSS e Javascript
Dinâmicos

31. app/assets/stylesheets/forms.css.erb
.myInput {
background-image: <%= asset_path 'image.png' %>;
}
#logo {
background: url(<%= asset_data_uri 'logo.png' %>);
}

33. .content-navigation {
border-color: #3bbfce;
color: #2b9eab;
}
.border {
padding: 8px;
margin: 8px;
border-color: #3bbfce;
}

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

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

36. #dashboardBody {
.warning {
margin: 10px 0 0 0;
padding: 0;
color: #514721;
background-color: #fff6bf;
a { color: #098aa4; }
a:hover { text-decoration: underline; }
}
}

37. #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;
}
}

40. "CoffeeScript is well done and
more convenient to use than
Javascript"
Brendan Eich - criador do Javascript
http://bit.ly/qucelc

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

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

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

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

45. square = function(x) x * x

46. square = function(x) x * x

47. square = (x) -> x * x

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

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

50. 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 BrazilianSpeaker
speaker.say()

51. Muito além da beleza

52. • 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

53. "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

54. conclusão

55. slides: http://objetiva.co/publications

56. twitter: danielvlopes
email: daniel@objetiva.co