Próximos passos com frontend e Rails 3.1

PRÓXIMO PASSO em frontend com RAILS 3.1

Server HTTP Client

PROBLEMAS DOIS

DESENVOLVEDOR MÁQUINA

MÁQUINA PERFORMANCE

• Menos requisições • CSS e JS externos • Minimize
js e css • Scripts duplicados • CSS no topo • Scripts no ﬁnal • Cache otimizado • Compactação • CDN • e-tags • ajax cache - EXPRESSÕES CSS AJAX CACHE EVITE REDIRECIONAMENTOS REDUZA PESQUISAS DNS

• Menos requisições • CSS e JS externos • Minimize
js e css • Scripts duplicados • CSS no topo • Scripts no ﬁnal • Cache otimizado • Compactação • CDN • e-tags • ajax cache RAILS 3.1

ASS ET-PIPELINE

ASSET PIPELINE SUFICIENTE p/ 1º versão

DESENVOLVIMENTO PERFORMANCE

UI DESIGN

DESIGN = CRIAÇÃO

CRIAÇÃO = DESENVOLVIMENTO

VOCÊ É ???

UM DESENVOLVEDOR

• Arquiteto de informação • Visual designer • Prototipador •
Frontend developer

ÓTIMO, mas...

Cada pessoa em uma startup possui uma única proﬁssão, e
é fazer o que for necessário para o sucesso da empresa. “ ” Eric Ries - http://j.mp/x8oGLE

FÁBRICA SETORIZAÇÃO

EQUIPE Habilidades complementares

SOFTWARE DESIGNERS PRECISAM PROGRAMAR PARA COLOCAR SUAS IDÉIAS EM PRÁTICA
http://j.mp/Ax6kkB

PROTIPAGEM RÁPIDA

Rubyconf::Application.routes.draw do scope '/mockups', :constraints => lambda { not Rails.env.production?
} do match '/:action', :controller => 'mockups', :actions => /[^\/]+/ end end

class MockupsController < ApplicationController def locations end end

CSS - HTML - JS

CSS - HTML - JS RAILS 3.1

SOLUÇÃO

SCSS & CSS PRÓXIMO PASSO

module ApplicationHelper def body_css_id controller_name.camelize :lower end ...

<!DOCTYPE html> <html lang="pt-BR"> <head> <meta charset="utf-8"> <title>Objetiva.co</title> <%= stylesheet_link_tag
"application" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body id="<%= body_css_id %>"> ...

#lockers { #slots { margin: 0 auto; padding: 20px; }
.slot { position: relative; width: 70px; height: 40px; @include border-radius(5px); } .slot.available { background-color: #e1ffdc; color: #2e9d30; } .slot.occupied { background-color: #ffc1c3; color: #b43c41; } .slot.number { font-size: 20px; margin: 6px 0 3px 0; } .actions { position: absolute; right: 0; top: 0; width: 30px; height: 40px; background: #343e46; } }

.btn { font-weight: bold; cursor: pointer; display: inline-block; background-color: #e6e6e6;
background-repeat: no-repeat; background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#ffffff), color-stop(25%, #ffffff), to(#e6e6e6)); background-image: -webkit-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: -moz-linear-gradient(top, #ffffff, #ffffff 25%, #e6e6e6); background-image: -ms-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: -o-linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); background-image: linear-gradient(#ffffff, #ffffff 25%, #e6e6e6); filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#e6e6e6', GradientType=0); padding: 5px 14px 6px; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); color: #333 !important; font-size: 12px; line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; -webkit-border-radius: 4px; -moz-border-radius: 4px; border-radius: 4px; -webkit-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -moz-box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05); -webkit-transition: 0.1s linear all; -moz-transition: 0.1s linear all; -ms-transition: 0.1s linear all; -o-transition: 0.1s linear all; transition: 0.1s linear all; } .btn:hover { background-position: 0 -15px; color: #333 !important; text-decoration: none; } .btn:focus { outline: 1px dotted #666; }

.btn { cursor: pointer; display: inline-block; padding: 5px 14px 6px;
text-shadow: 0 1px 1px rgba(255, 255, 255, 0.75); color: #333; font-size: 13px; line-height: normal; border: 1px solid #ccc; border-bottom-color: #bbb; @include gradient-vertical(#ffffff, #e6e6e6); @include border-radius(4px); @include box-shadow( inset 0 1px 0 rgba(255, 255, 255, 0.2), 0 1px 2px rgba(0, 0, 0, 0.05) ); &:hover { background-position: 0 -15px; } &:focus { outline: 1px dotted #666; } }

• evite conﬂitos • organização de cima p/ baixo •
separe em vários arquivos • maximize para evolução • comece bem especíﬁco & ... • extraia reutilizáveis depois • nomes de classes e ids semânticos • não vá muito longe com nesting • evite !important sempre que possível • bom senso > regrinhas Meus guidelines com CSS e SCSS

HTML & ERB & HAML PRÓXIMO PASSO

ERB OU HAML ??

CONVENÇÕES !!

SEMÂNTICA P/ MANUTENÇÃO <div id="dealer-activities" class="ten columns"> <div id="profile" class="four
columns"> <p><%= image_tag "sarah.png", :id => "dealer-avatar" %></p> <p><strong>Sarah Parker</strong> [email protected]</p> <p><%= link_to "Editar perfil", "#", :class=> "btn" %></p> </div> <div id="activities" class="six columns"> <h2>Atividades Recentes</h2> <ul> <li class="activity"> <h3>Localiza Seminovos</h3> <p>Fez uma proposta de um Uno no valor de R$22000,00</p> </li> </ul> </div> </div>

NEST ... NASTY?! <div class="box"> <div class="inner-box"> <div id="activity-link-container" class="eleven
columns"> <span> <small> <%= link_to "Aceitar contra proposta", "#" %> </small> </span> <span> <small> <%= link_to "Fazer contra proposta", "#" %> </small> </span> </div> </div> </div>

#activity-container { a { font-size: 11px; margin-right: 5px; } }
<div class="box"> <div class="inner-box"> <div id="activity-container" class="eleven columns"> <%= link_to "Aceitar contra proposta", "#" %> <%= link_to "Fazer contra proposta", "#" %> </div> </div> </div>

<%= box do %> <div id="activity-container" class="eleven columns"> <%= link_to
"Aceitar contra proposta", "#" %> <%= link_to "Fazer contra proposta", "#" %> </div> <% end %> ---- def box(&block) content_tag :div, :class => "box" do content_tag :div, :class=> "inner-box", &block end end

VIEW ?? AUTOMATIZA !!

%h2 - if resource.persisted? = t 'title.edit', :resource_name => resource_class.model_name.human
- else = t 'title.new.male', :resource_name => resource_class.model_name.human = semantic_form_for resource, :remote => true do |f| = f.inputs do = f.input :number, :input_html => { :autofocus => true, :size => 25, :maxlength => 20, :disabled => !resource.upda = f.input :created_at, :as => :string, :input_html => { :disabled => true, :size => 10, ... = f.input :start_date, :as => :string, :input_html => { :size => 10, :disabled => !resource.updatable? } = f.input :end_date, :as => :string, :input_html => { :size => 10, :disabled => !resource.updatable? } = f.input :number_process, :input_html => { :size => 20, :maxlength => 20, :disabled => !resource.updatable? }

%h2 Detalhes da unidade %span.unit_name= health_unit.name = link_to_destroy "DESATIVAR", "#",
:confirm => "Realmente deseja remover XXX ?", :class => "left button" = form_for health_unit, :validate => true do |f| = error_messages_for health_unit %fieldset .inline_field = f.label :xxx_field, "Quantos leitos permitidos?" = f.number_field :xxx_field, placeholder: 0 .inline_field = f.label :yyy_field, "Quantos leitos extras?" = f.number_field :yyy_field, placeholder: 0

<h2> Customize o visual do seu site <%= link_to "Edição
Avancada", admin_advanced_theme_editor_path %> </h2> <%= form_for @theme do |f| %> <%= f.fields_for @theme.customizations do |c| %> <fieldset id="customizations"> <%= render "background" %> <%= render "colors" %> <%= render "fonts" %> </fieldset> <% end %> <p> <%= submit_button %> <%= link_to "Restaurar padrões", [:admin, :theme_customizations], :method => "delete", :confirm => "Tem certeza que deseja voltar as configu...", :class => "button right", :disable_with => "AGUARDE ..." %> </p> <% end %>

• Indentação correta • Tanto faz ERB ou HAML •
Helpers para auxiliar markup • Aninhamento sem exageros • Extrair partials p/ manutenção • Espaçamento entre os nós • Semantica, mas p/ legibilidade • bom senso > regrinhas Meus guidelines com HTML

JS & COFFE & ... PRÓXIMO PASSO

JS OU COFFEE ?? http://j.mp/coffee-nao-e-uma-linguagem- que-vale-aprender

PASSOS FUTUROS

Backend? HTTP frontend?

MUITO OBRIGADO

objetiva.co/publications

TWITTER DANIELVLOPES EMAIL [email protected]

Próximos passos com frontend e Rails 3.1

Próximos passos com frontend e Rails 3.1

More Decks by danielvlopes

Other Decks in Technology

Featured

Transcript