Front-end
O front-end é a marcação, aparência,
acessibilidade, usabilidade e
performance da sua aplicação em
múltiplos browsers, plataformas e
dispositivos.
Slide 3
Slide 3 text
Escrever os tais HTML e CSS.
Marcação e
aparência
Front-end
Slide 4
Slide 4 text
Conteúdo disponível e de fácil
entendimento indiferente das
condições do usuário.
Acessibilidade e
usabilidade
Front-end
Slide 5
Slide 5 text
Fazer tudo isto como um ninja e
garantir qualidade na navegação e
rapidez no carregamento.
Performance
Front-end
http://browserdiet.com
Slide 6
Slide 6 text
Infinidade de browsers, plataformas
e dispositivos considerando seus
diferentes usos.
http://jcemer.com/hipermidia-as-avessas.html
Múltiplos
meios
Front-end
Slide 7
Slide 7 text
Quem são
vocês?
Slide 8
Slide 8 text
Rubistas
http://developer.mozilla.org
http://learnlayout.com
http://diveintohtml5.info
http://bonsaiden.github.io/JavaScript-Garden
Desenvolvedor Rails que caiu
naquele projeto furada e agora
precisa fazer HTML e CSS, urgh!
Slide 9
Slide 9 text
Confeiteiros
http://mislav.uniqpath.com/poignant-guide
http://guides.rubyonrails.org
http://akitaonrails.com/FrontEnd
Desenvolvedor front-end que
pegou aquele job descolado e não
sabe o que o Ruby tem de Rails.
via @vitor42
Slide 10
Slide 10 text
http://jcemer.com
Slide 11
Slide 11 text
http://codeminer42.com
Slide 12
Slide 12 text
Views e
partials
Slide 13
Slide 13 text
Através de dados e templates,
são usados para produzir um
resultado formatado.
Em nosso caso, geralmente
HTML.
Template
Engines
Slide 14
Slide 14 text
<%= post.title %>
<%= post.subtitle %>
<%= post.content %>
Erb
Template Engines
Slide 15
Slide 15 text
Erb
Template Engines
Use .erb se você não quer
aprender uma nova sintaxe ou
adicionar gems de outros
engines ao seu projeto.
Baseado no Haml e ainda com
output padrão já sem espaços
entre as tags o que facilita
algumas técnicas. Slim é até mais
performático que Erb.
Slim
Template Engines
Slide 20
Slide 20 text
Views devem conter HTML.
Não coloque CSS ou JavaScript
nas views.
Views
Slide 21
Slide 21 text
Use com moderação. Prefira
partials quando tiver lógica
associada e decorator quando
informação for relacionada a um
modelo.
Helpers
Slide 22
Slide 22 text
Livre-se de código de marcação
repetido nas suas views.
Partials
Slide 23
Slide 23 text
Partials: herança
render "sidebar"
[controller]/_sidebar.slim
application/_sidebar.slim
Use e abuse da herança de views.
Slide 24
Slide 24 text
Partials: herança
campaign/faq/_sidebar.slim
campaign/base/_sidebar.slim
application/_sidebar.slim
class Campaign::FaqController <
Campaign::BaseController
Slide 25
Slide 25 text
Partials: layouts
A herança funciona no layout também,
não só na action da view.
<%= yield %>
<%= render "footer" %>
[controller]/_footer.slim
application/_footer.slim
Slide 26
Slide 26 text
Partials: menos
um condicional
render "player/#{video.service}",
video: video
player/_youtube.slim
player/_vimeo.slim
Slide 27
Slide 27 text
class DisciplineDecorator <
Draper::Decorator
delegate_all
def css_classname
"discipline-#{object.plain_name}"
end
end
Decorators
Slide 28
Slide 28 text
Atributos do tipo data-* que permitem
associar comportamento a elementos
da view.
Unobtrusive
JavaScript ~ UJS
Slide 29
Slide 29 text
UJS
[data-confirm]: confirmação da ação
[data-method]: definição do método
[data-remote]: envio assíncrono
UJS
Evite usar UJS se sua aplicação for de
médio porte, prefira organizar o
comportamento nos assets da sua
aplicação.
Slide 34
Slide 34 text
Asset
pipeline
Slide 35
Slide 35 text
Organize os arquivos com base
nos componentes do seu projeto
e entregue um único arquivo de
JavaScript e CSS para cada grande
seção da sua aplicação.
Separação
Slide 36
Slide 36 text
Compila arquivos em ordem
conforme suas extensões.
Pipeline
file.css.scss.erb
Slide 37
Slide 37 text
Um fingerprint é incluído nos arquivos
buscando uma estratégia de cache de
front-end ideal.
Cache
Pipeline
application-908e25f486
8d8683022a5b62f54.css
Slide 38
Slide 38 text
Os templates .erb e gems de pré-
processadores de CSS possuem
acesso ao asset path e demais
informações da aplicação.
Informações
Pipeline
Slide 39
Slide 39 text
CSS
Slide 40
Slide 40 text
Não tem porque usar outro
pré-processador e muito menos
não usar SASS.
Pré-processador
de CSS
Helpers
Pré-processador de CSS
Mixins imprimem no CSS todo seu
conteúdo a cada @include.
Placeholders não replicam o código,
mas não aceitam argumentos.
http://sass-lang.com/documentation/
file.SASS_REFERENCE.html#placeholder_selectors_
Slide 45
Slide 45 text
Compass e Bourbon vêm com
uma toneladas de mixins e
outras facilidades.
Bibliotecas
Pré-processador de CSS
Slide 46
Slide 46 text
JavaScript
Slide 47
Slide 47 text
Arquivos depois de concatenados
possuem o mesmo escopo.
Organização de
JavaScript
Slide 48
Slide 48 text
Diferentes arquivos vão
compartilhar das mesmas
variáveis.
Problema 1
Organização de JavaScript
Slide 49
Slide 49 text
Immediately-
Invoked Function
Expression
Organização de JavaScript
(function () {
var data = {};
function parser() {
! // Code
}
})();
Slide 50
Slide 50 text
CoffeeScript
Organização de JavaScript
class Mediabox
constructor: (@data) ->
Slide 51
Slide 51 text
Cada arquivo vai ser compilado e
ganhar uma IIFE automaticamente.
CoffeeScript:
transpilado
Organização de JavaScript
Slide 52
Slide 52 text
CoffeeScript:
transpilado
Organização de JavaScript
(function() {
var Mediabox;
Mediabox = (function() {
function Mediabox(data) {
this.data = data;
}
return Mediabox;
})();
}).call(this);
Slide 53
Slide 53 text
Se cada arquivo tiver um escopo, não
tenho como compartilhar algo.
Problema 2
Organização de JavaScript
Slide 54
Slide 54 text
Namespace
Organização de JavaScript
App.modules.name = (function () {
var data = {};
return {
! data: data,
! parser: // ...
}
})();
Módulos podem ser carregados de
forma assíncrona. Em geral,
pacotes e até mesmo todos os
módulos são distribuídos em um
único arquivo.
Require.js
Organização de JavaScript
https://github.com/jwhitley/requirejs-rails
Slide 57
Slide 57 text
Componentes
Slide 58
Slide 58 text
Um componente nada mais é que
uma abstração que encapsula
elementos HTML, CSS e
comportamento.
Definição
Slide 59
Slide 59 text
Separação de reponsabilidades
em encapsulamentos bem
organizados e reusáveis.
Objetivo
Slide 60
Slide 60 text
JavaScript dos
componentes
Slide 61
Slide 61 text
Plugins e widgets jQuery, módulo
AMD, Backbone, Component.io,
FlightJS Component...
Bibliotecas e
Frameworks
Slide 62
Slide 62 text
Definir o componente não é tudo,
ele precisa ser iniciado.
Instanciando
Slide 63
Slide 63 text
// Setup product page
if ($('body').is('.page-product')) {
$("[data-draggable]").draggable()
$("[data-comments]").comments()
}
// Setup checkout page
if ($('body').is('.page-checkout')) {
$("[data-draggable]").draggable()
$("[data-datepicker]").datepicker()
}
Por página
Instanciando
Slide 64
Slide 64 text
Os componentes podem ser
removidos ou adicionados numa
página acarretando manutenção no
JavaScript.
Por página:
Problemas
Instanciando
Slide 65
Slide 65 text
Angular.js e Dojo usam como
referência elementos HTML para
instanciar componentes.
Soluções
Instanciando
Slide 66
Slide 66 text
Date: {{ '2012-04-01' | date:'fullDa
Hi!
Angular.js
Instanciando
Slide 67
Slide 67 text
Piecemaker
Instanciando
Colorize
https://github.com/jcemer/piecemaker
Slide 68
Slide 68 text
Piecemaker
Instanciando
var pieces = {
colorize: function (container) {
! var color = container.dataset.color
container.style.background = color
}
}
Slide 69
Slide 69 text
Piecemaker
Instanciando
var piecemaker = new Piecemaker({
namespace: pieces
})
piecemaker.setup()
Slide 70
Slide 70 text
Piecemaker
Instanciando
1. Atributo data-pieces no element;
2. Construtor instanciado com o
container;
3. Setup do piecemaker indicando
namespace ou módulos AMD.
http://jcemer.com/atribuindo-
comportamento-a-componentes.html
Slide 71
Slide 71 text
Web Components: Custom
Elements, Shadow DOM e Templates.
Futuro
https://speakerdeck.com/zenorocha/um-
futuro-chamado-web-components
Slide 72
Slide 72 text
Turbolinks
Slide 73
Slide 73 text
Objetivo
Dimunir até pela metade o tempo
de carregamento da sua página.
http://github.com/rails/turbolinks
Slide 74
Slide 74 text
Solução
A cada clique em um link, apenas o
conteúdo do é substituído.
Seu conteúdo é pego por uma
requisição XHR.
Slide 75
Slide 75 text
Assets
Coloque JavaScript e CSS no
e indique quais devem ser
monitorados.
Slide 76
Slide 76 text
Assets: reload
Caso algum dos assets mude, a
página é totalmente recarregada.
Slide 77
Slide 77 text
Histórico de
navegação
A URL atual é alterada e as páginas
visitadas são armazenadas.
Voltar à página anterior é imediato.
Slide 78
Slide 78 text
Suporte a jQuery
Além de $.ready(fn),
você deve esperar agora por
$(document).on('page:load', fn)
Slide 79
Slide 79 text
Suporte a jQuery
Páginas trazidas do cache disparam
$(document).on('page:restore', fn).
https://github.com/kossnocorp/
jquery.turbolinks
Slide 80
Slide 80 text
Outros suportes
Facebook, Twitter, Google+, Google
Analytics e AdSense...
http://reed.github.io/turbolinks-
compatibility
Slide 81
Slide 81 text
JavaScript
Os comportamentos das páginas já visitas
continuam ativos.
Slide 82
Slide 82 text
Você nunca
mudará de página
Sua aplicação ficará sempre na mesma
página. Seja cauteloso e busque por
memory leaks.
Slide 83
Slide 83 text
Você nunca
mudará de página
Lembre-se de desativar todos os event
handlers a cada transição. Em especial
aqueles que você cadastra no .
Slide 84
Slide 84 text
Wiselinks
Slide 85
Slide 85 text
Vantagens
Funciona em browsers antigos, envia
formulários e processa cabeçalhos de
resposta.
Slide 86
Slide 86 text
Pseudo
Desvantagem
Depende de jQuery e elementos precisam
de atributo indicando o uso.
https://github.com/igor-alexandrov/
wiselinks/issues/48
Slide 87
Slide 87 text
Um último
assunto
Slide 88
Slide 88 text
Gerenciamento
de dependências
Slide 89
Slide 89 text
Problema
Gem não é o empacotamento mais
adequado para código front-end.
Slide 90
Slide 90 text
Bower
Um gerenciador de dependências que
funciona apoiado no Node.js.
http://simplesideias.com.br/gerenciando-
dependencias-client-side-com-bower
Slide 91
Slide 91 text
Versionamento
Versionar as dependências no repositório
depois de baixadas não me deixa a
vontade.
Slide 92
Slide 92 text
Half Pipe
Slide 93
Slide 93 text
Solução
Substitui o asset pipeline por um workflow
baseado em Grunt.js e Bower.
https://github.com/d-i/half-pipe
Slide 94
Slide 94 text
Grunt.js
Gerenciador de tarefas front-end escrito
em JavaScript.
Slide 95
Slide 95 text
Fique atento
Gerenciamento de dependências de
front-end é uma ciência em
desenvolvimento.
Slide 96
Slide 96 text
Não tenha dúvida
As melhores ferramentas para front-end
atualmente rodam em Node.js.