SlideShare uma empresa Scribd logo
1 de 56
Baixar para ler offline
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



 HTTP



Frontend
2 principais


PROBLEMAS
em Des. de Software
Performance
Performance



Desenvolvedor
Performance



Desenvolvedor




                              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
•   CACHE OTIMIZADO
•   COMPACTAÇÃO
•   CDN                -
                       EXPRESSÕES CSS
                       AJAX CACHE
•   E-TAGS             EVITE
                       REDIRECIONAMENTOS
•   AJAX CACHE         REDUZA PESQUISAS DNS
Solução Rails
em 0 Passos
Performance do
desenvolvedor
CSS e Javascript
   Dinâ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 BrazilianSpeaker
speaker.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
slides: http://objetiva.co/publications
twitter: danielvlopes
email: daniel@objetiva.co

Mais conteúdo relacionado

Mais procurados

escalando aplicações django
escalando aplicações djangoescalando aplicações django
escalando aplicações django
Andrews Medina
 

Mais procurados (20)

Browsers como vivem o que fazem
Browsers como vivem o que fazemBrowsers como vivem o que fazem
Browsers como vivem o que fazem
 
Rails nas Nuvens
Rails nas NuvensRails nas Nuvens
Rails nas Nuvens
 
jQuery
jQueryjQuery
jQuery
 
MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.MongoDB: Prós, Contras e Showcases.
MongoDB: Prós, Contras e Showcases.
 
NoSQL Livre
NoSQL LivreNoSQL Livre
NoSQL Livre
 
PhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha CamaradaPhantomJS - O Fantasminha Camarada
PhantomJS - O Fantasminha Camarada
 
Node.js no Pagar.me
Node.js no Pagar.meNode.js no Pagar.me
Node.js no Pagar.me
 
Clusterização de Aplicações PHP
Clusterização de Aplicações PHPClusterização de Aplicações PHP
Clusterização de Aplicações PHP
 
Realtime com node.js e socket.io
Realtime com node.js e socket.ioRealtime com node.js e socket.io
Realtime com node.js e socket.io
 
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JSDesenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
Desenvolvendo com Node.JS - Mongoose + MongoDB + Vue.JS
 
Frontend (Rails For Kids)
Frontend (Rails For Kids)Frontend (Rails For Kids)
Frontend (Rails For Kids)
 
performance em jQuery apps
performance em jQuery appsperformance em jQuery apps
performance em jQuery apps
 
1º Meetup Zabbix Meetup do Recife: Francys Nivea - LLD ODBC
1º Meetup Zabbix Meetup do Recife: Francys Nivea - LLD ODBC1º Meetup Zabbix Meetup do Recife: Francys Nivea - LLD ODBC
1º Meetup Zabbix Meetup do Recife: Francys Nivea - LLD ODBC
 
Rest workshop
Rest workshopRest workshop
Rest workshop
 
Less
LessLess
Less
 
Workflow WordPress + JavaScript - WordCamp Rio
Workflow WordPress + JavaScript  - WordCamp RioWorkflow WordPress + JavaScript  - WordCamp Rio
Workflow WordPress + JavaScript - WordCamp Rio
 
Drupal Performance
Drupal PerformanceDrupal Performance
Drupal Performance
 
escalando aplicações django
escalando aplicações djangoescalando aplicações django
escalando aplicações django
 
Redis um banco chave valor
Redis um banco chave valorRedis um banco chave valor
Redis um banco chave valor
 
Redis na Prática
Redis na PráticaRedis na Prática
Redis na Prática
 

Semelhante a Frontline - Rails3.1

Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
Guilherme
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
elliando dias
 

Semelhante a Frontline - Rails3.1 (20)

Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3Cobol Web com Net Express 5.1 - Parte 3
Cobol Web com Net Express 5.1 - Parte 3
 
Introdução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvasIntrodução aos aplicativos tipo canvas
Introdução aos aplicativos tipo canvas
 
JS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front endJS Experience 2017 - Otimizando o front end
JS Experience 2017 - Otimizando o front end
 
Desenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHPDesenvolvimento Web Avançado usando PHP
Desenvolvimento Web Avançado usando PHP
 
Javascript Cross-browser
Javascript Cross-browserJavascript Cross-browser
Javascript Cross-browser
 
MVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões WebMVP Virtual Conference 2013: Suporte a padrões Web
MVP Virtual Conference 2013: Suporte a padrões Web
 
Design Responsivo com Sass
Design Responsivo com SassDesign Responsivo com Sass
Design Responsivo com Sass
 
Web 3.0
Web 3.0Web 3.0
Web 3.0
 
MongoDB + PHP
MongoDB + PHPMongoDB + PHP
MongoDB + PHP
 
Arquitetura CSS
Arquitetura CSSArquitetura CSS
Arquitetura CSS
 
Um guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + LessUm guia bem básico de Bootstrap + Less
Um guia bem básico de Bootstrap + Less
 
Ruby On Rails Regis
Ruby On Rails RegisRuby On Rails Regis
Ruby On Rails Regis
 
Introdução Ruby 1.8.7 + Rails 3
Introdução Ruby 1.8.7 + Rails 3Introdução Ruby 1.8.7 + Rails 3
Introdução Ruby 1.8.7 + Rails 3
 
Oficial
OficialOficial
Oficial
 
04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf04_Introducao_JavaScript.pdf
04_Introducao_JavaScript.pdf
 
Precisamos falar sobre MERN stack
Precisamos falar sobre MERN stackPrecisamos falar sobre MERN stack
Precisamos falar sobre MERN stack
 
HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)HTML&CSS 4 - Intermediate CSS (1/2)
HTML&CSS 4 - Intermediate CSS (1/2)
 
Java+DDD+BDD+TDD=Sucesso Total
Java+DDD+BDD+TDD=Sucesso TotalJava+DDD+BDD+TDD=Sucesso Total
Java+DDD+BDD+TDD=Sucesso Total
 
CSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidadesCSS 2022 um mundo novo de possibilidades
CSS 2022 um mundo novo de possibilidades
 
Speed up! Critical css to the rescue
Speed up! Critical css to the rescueSpeed up! Critical css to the rescue
Speed up! Critical css to the rescue
 

Mais de Daniel Lopes

BDD e TDD (Café Ágil)
BDD e TDD (Café Ágil)BDD e TDD (Café Ágil)
BDD e TDD (Café Ágil)
Daniel Lopes
 
Steak (Oxente Rails)
Steak (Oxente Rails)Steak (Oxente Rails)
Steak (Oxente Rails)
Daniel Lopes
 

Mais de Daniel Lopes (10)

Seguranca em APP Rails
Seguranca em APP RailsSeguranca em APP Rails
Seguranca em APP Rails
 
BDD e TDD (Café Ágil)
BDD e TDD (Café Ágil)BDD e TDD (Café Ágil)
BDD e TDD (Café Ágil)
 
Steak (Ruby on Rio)
Steak (Ruby on Rio)Steak (Ruby on Rio)
Steak (Ruby on Rio)
 
Adobe Air e HTML (FlexForKids)
Adobe Air e HTML (FlexForKids)Adobe Air e HTML (FlexForKids)
Adobe Air e HTML (FlexForKids)
 
Ecossistema Ruby e Rails (Serpro BH)
Ecossistema Ruby e Rails (Serpro BH)Ecossistema Ruby e Rails (Serpro BH)
Ecossistema Ruby e Rails (Serpro BH)
 
Steak (Oxente Rails)
Steak (Oxente Rails)Steak (Oxente Rails)
Steak (Oxente Rails)
 
Mercado (Pós UNA)
Mercado (Pós UNA)Mercado (Pós UNA)
Mercado (Pós UNA)
 
Frontend (RailsMG)
Frontend (RailsMG)Frontend (RailsMG)
Frontend (RailsMG)
 
Introdução ao Rails (Linguagil)
Introdução ao Rails (Linguagil)Introdução ao Rails (Linguagil)
Introdução ao Rails (Linguagil)
 
Ruby on Rails - uma mentalidade (Café com Tom)
Ruby on Rails - uma mentalidade (Café com Tom)Ruby on Rails - uma mentalidade (Café com Tom)
Ruby on Rails - uma mentalidade (Café com Tom)
 

Último

Último (8)

COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINASCOI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
COI CENTRO DE OPERAÇÕES INDUSTRIAIS NAS USINAS
 
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo PagliusiPalestras sobre Cibersegurança em Eventos - Paulo Pagliusi
Palestras sobre Cibersegurança em Eventos - Paulo Pagliusi
 
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdfAula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
Aula 01 - Introducao a Processamento de Frutos e Hortalicas.pdf
 
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docxATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
ATIVIDADE 1 - CUSTOS DE PRODUÇÃO - 52_2024.docx
 
Entrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo PagliusiEntrevistas, artigos, livros & citações de Paulo Pagliusi
Entrevistas, artigos, livros & citações de Paulo Pagliusi
 
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docxATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
ATIVIDADE 1 - CÁLCULO DIFERENCIAL E INTEGRAL II - 52_2024.docx
 
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docxATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
ATIVIDADE 1 - GESTÃO DE PESSOAS E DESENVOLVIMENTO DE EQUIPES - 52_2024.docx
 
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIAEAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
EAD Curso - CIÊNCIA DE DADOS NA INDÚSTTRIA
 

Frontline - Rails3.1