Rails Frontline

Apresentação feita no DevDay 2011 BH - MG sobre Rails 3.1 e suas novidades sobre frontend development.

Transcript

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. PROBLEMAS 2 principais 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 • E-TAGS • AJAX CACHE - EXPRESSÕES CSS AJAX CACHE EVITE REDIRECIONAMENTOS 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