E Agora, Virei Um Front-End Rails!?

E agora, virei um front-end Rails!?
Front-end
O front-end a marcao, aparncia, acessibilidade, usabilidade e performance da sua aplicao em mltiplos browsers, plataformas e dispositivos.
Front-end
Marcao e aparncia
Escrever os tais HTML e CSS.
Front-end
Acessibilidade e usabilidade
Contedo disponvel e de fcil entendimento indiferente das condies do usurio.
Front-end
Performance
Fazer tudo isto como um ninja e garantir qualidade na navegao e rapidez no carregamento. http://browserdiet.com
Front-end
Mltiplos meios
Innidade de browsers, plataformas e dispositivos considerando seus diferentes usos. http://jcemer.com/hipermidia-as-avessas.html
Quem so vocs?
Rubistas
Desenvolvedor Rails que caiu naquele projeto furada e agora precisa fazer HTML e CSS, urgh! http://developer.mozilla.org http://learnlayout.com http://diveintohtml5.info http://bonsaiden.github.io/JavaScript-Garden
Confeiteiros
via @vitor42
Desenvolvedor front-end que pegou aquele job descolado e no sabe o que o Ruby tem de Rails. http://mislav.uniqpath.com/poignant-guide http://guides.rubyonrails.org http://akitaonrails.com/FrontEnd
http://jcemer.com
http://codeminer42.com
Views e partials
Template Engines
Atravs de dados e templates, so usados para produzir um resultado formatado. Em nosso caso, geralmente HTML.
Template Engines
Erb
<section class="container"> <h1><%= post.title %></h1> <h2><%= post.subtitle %></h2> <div class="content"> <%= post.content %> </div> </section>
Template Engines
Erb
Use .erb se voc no quer aprender uma nova sintaxe ou adicionar gems de outros engines ao seu projeto.
Template Engines
Haml
%section.container %h1= post.title %h2= post.subtitle .content = post.content
Template Engines
Haml
Nunca mais esquea de fechar uma tag. Partials tornam-se auto-contidas, toda tag abre e fecha no mesmo arquivo.
Template Engines
Slim
section.container h1 = post.title h2 = post.subtitle .content = post.content
Template Engines
Slim
Baseado no Haml e ainda com output padro j sem espaos entre as tags o que facilita algumas tcnicas. Slim at mais performtico que Erb.
Views
Views devem conter HTML. No coloque CSS ou JavaScript nas views.
Helpers
Use com moderao. Prera partials quando tiver lgica associada e decorator quando informao for relacionada a um modelo.
Partials
Livre-se de cdigo de marcao repetido nas suas views.
Partials: herana
Use e abuse da herana de views. render "sidebar"
[controller]/_sidebar.slim application/_sidebar.slim
Partials: herana
class Campaign::FaqController < Campaign::BaseController
campaign/faq/_sidebar.slim campaign/base/_sidebar.slim application/_sidebar.slim
Partials: layouts
A herana funciona no layout tambm, no s na action da view. <body> <%= yield %> <%= render "footer" %> </body>
[controller]/_footer.slim application/_footer.slim
Partials: menos um condicional

render "player/#{video.service}", video: video
player/_youtube.slim player/_vimeo.slim
Decorators
class DisciplineDecorator < Draper::Decorator delegate_all def css_classname "discipline-#{object.plain_name}" end end
Unobtrusive JavaScript ~ UJS

Atributos do tipo data-* que permitem associar comportamento a elementos da view.
UJS
[data-conrm]: conrmao da ao [data-method]: denio do mtodo [data-remote]: envio assncrono
UJS: index.html
<a href="/photo/42" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Destroy</a>
UJS: destroy.js.erb
$('#photo_<%= params[:id] %>') .remove()
UJS: create.js.erb
<%- if @contact.errors.any? %> $('#contact-modal').html('<%= escape_jav <%- else %> $('#contact-modal').html('<%= escape_jav $('#contact-modal').append('<p class="al </p>'); setTimeout("$('.close').click();", 2000) <%- end %>
UJS
Evite usar UJS se sua aplicao for de mdio porte, prera organizar o comportamento nos assets da sua aplicao.
Asset pipeline
Separao
Organize os arquivos com base nos componentes do seu projeto e entregue um nico arquivo de JavaScript e CSS para cada grande seo da sua aplicao.
Pipeline
Compila arquivos em ordem conforme suas extenses.
le.css.scss.erb
Pipeline
Cache
Um ngerprint includo nos arquivos buscando uma estratgia de cache de front-end ideal.
application-908e25f486 8d8683022a5b62f54.css
Pipeline
Informaes
Os templates .erb e gems de prprocessadores de CSS possuem acesso ao asset path e demais informaes da aplicao.
CSS
Pr-processador de CSS
No tem porque usar outro pr-processador e muito menos no usar SASS.
Settings
$button-font: $sinalization-font; $title-font: $sinalization-font; $navigation-font: $sinalization-font;
$main-font: "Ruda", sans-serif; $dialog-font: "Chau Philomene One", sans-s $sinalization-font: "Raleway", sans-serif;
Helpers: Placeholders
%arrow-top { &:before { @extend %vertical-arrow; top: -13px; border-bottom: 6px white solid; } }
Helpers: Mixins
@mixin arrow-top-color($color) { &:before { border-bottom-color: $color; } }
Helpers
Mixins imprimem no CSS todo seu contedo a cada @include. Placeholders no replicam o cdigo, mas no aceitam argumentos.
http://sass-lang.com/documentation/ le.SASS_REFERENCE.html#placeholder_selectors_
Bibliotecas
Compass e Bourbon vm com uma toneladas de mixins e outras facilidades.
JavaScript
Organizao de JavaScript
Arquivos depois de concatenados possuem o mesmo escopo.
Problema 1
Diferentes arquivos vo compartilhar das mesmas variveis.
ImmediatelyInvoked Function Expression

(function () { var data = {}; function parser() { ! // Code } })();
CoffeeScript
class Mediabox constructor: (@data) ->
CoffeeScript: transpilado
Cada arquivo vai ser compilado e ganhar uma IIFE automaticamente.
CoffeeScript: transpilado
(function() { var Mediabox; Mediabox = (function() { function Mediabox(data) { this.data = data; } return Mediabox; })(); }).call(this);
Problema 2
Se cada arquivo tiver um escopo, no tenho como compartilhar algo.
Namespace
App.modules.name = (function () { var data = {}; return { ! data: data, ! parser: // ... } })();
Require.js
define('mediabox', ['jquery', 'util/counter'], function ($, Counter) { // ... return { Mediabox: Mediabox, // ... }; } );
Require.js
Mdulos podem ser carregados de forma assncrona. Em geral, pacotes e at mesmo todos os mdulos so distribudos em um nico arquivo. https://github.com/jwhitley/requirejs-rails
Componentes
Denio
Um componente nada mais que uma abstrao que encapsula elementos HTML, CSS e comportamento.
Objetivo
Separao de reponsabilidades em encapsulamentos bem organizados e reusveis.
JavaScript dos componentes
Bibliotecas e Frameworks
Plugins e widgets jQuery, mdulo AMD, Backbone, Component.io, FlightJS Component...
Instanciando
Denir o componente no tudo, ele precisa ser iniciado.
Instanciando
Por pgina
// 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() }
Instanciando
Por pgina: Problemas

Os componentes podem ser removidos ou adicionados numa pgina acarretando manuteno no JavaScript.
Instanciando
Solues
Angular.js e Dojo usam como referncia elementos HTML para instanciar componentes.
Instanciando
Angular.js
<div ng-app="component"> <tabs> <pane title="Date"> Date: {{ '2012-04-01' | date:'fullDa </pane> <pane title="Hello"> Hi! </pane> </tabs> </div>
Instanciando
Piecemaker
<div data-pieces="colorize" data-color="#903D3D"> Colorize </div> https://github.com/jcemer/piecemaker
Instanciando
Piecemaker
var pieces = { colorize: function (container) { ! var color = container.dataset.color container.style.background = color } }
Instanciando
Piecemaker
var piecemaker = new Piecemaker({ namespace: pieces }) piecemaker.setup()
Instanciando
Piecemaker
1. Atributo data-pieces no element; 2. Construtor instanciado com o container; 3. Setup do piecemaker indicando namespace ou mdulos AMD. http://jcemer.com/atribuindocomportamento-a-componentes.html
Futuro
Web Components: Custom Elements, Shadow DOM e Templates. https://speakerdeck.com/zenorocha/umfuturo-chamado-web-components
Turbolinks
Objetivo
Dimunir at pela metade o tempo de carregamento da sua pgina. http://github.com/rails/turbolinks
Soluo
A cada clique em um link, apenas o contedo do <body> substitudo. Seu contedo pego por uma requisio XHR.
Assets
Coloque JavaScript e CSS no <head> e indique quais devem ser monitorados.
Assets: reload
Caso algum dos assets mude, a pgina totalmente recarregada.
Histrico de navegao
A URL atual alterada e as pginas visitadas so armazenadas. Voltar pgina anterior imediato.
Suporte a jQuery
Alm de $.ready(fn), voc deve esperar agora por $(document).on('page:load', fn)
Suporte a jQuery
Pginas trazidas do cache disparam $(document).on('page:restore', fn). https://github.com/kossnocorp/ jquery.turbolinks
Outros suportes
Facebook, Twitter, Google+, Google Analytics e AdSense... http://reed.github.io/turbolinkscompatibility
JavaScript
Os comportamentos das pginas j visitas continuam ativos.
Voc nunca mudar de pgina

Sua aplicao car sempre na mesma pgina. Seja cauteloso e busque por memory leaks.
Voc nunca mudar de pgina

Lembre-se de desativar todos os event handlers a cada transio. Em especial aqueles que voc cadastra no <body>.
Wiselinks
Vantagens
Funciona em browsers antigos, envia formulrios e processa cabealhos de resposta.
Pseudo Desvantagem
Depende de jQuery e elementos precisam de atributo indicando o uso. https://github.com/igor-alexandrov/ wiselinks/issues/48
Um ltimo assunto
Gerenciamento de dependncias
Problema
Gem no o empacotamento mais adequado para cdigo front-end.
Bower
Um gerenciador de dependncias que funciona apoiado no Node.js. http://simplesideias.com.br/gerenciandodependencias-client-side-com-bower
Versionamento
Versionar as dependncias no repositrio depois de baixadas no me deixa a vontade.
Half Pipe
Soluo
Substitui o asset pipeline por um workow baseado em Grunt.js e Bower. https://github.com/d-i/half-pipe
Grunt.js
Gerenciador de tarefas front-end escrito em JavaScript.
Fique atento
Gerenciamento de dependncias de front-end uma cincia em desenvolvimento.
No tenha dvida
As melhores ferramentas para front-end atualmente rodam em Node.js.
Obrigado
@jcemer

E Agora, Virei Um Front-End Rails!?

Enviado por

Dados do documento

Título original

Direitos autorais

Formatos disponíveis

Compartilhar este documento

Compartilhar ou incorporar documento

Opções de compartilhamento

Você considera este documento útil?

Este conteúdo é inapropriado?

Direitos autorais:

Formatos disponíveis

E Agora, Virei Um Front-End Rails!?

Enviado por

Direitos autorais:

Formatos disponíveis

E agora, virei um front-end Rails!?

campaign/faq/_sidebar.slim campaign/base/_sidebar.slim application/_sidebar.slim

Partials: menos um condicional

Unobtrusive JavaScript ~ UJS

ImmediatelyInvoked Function Expression

JavaScript dos componentes

Por pgina: Problemas

Voc nunca mudar de pgina

Voc nunca mudar de pgina

Você também pode gostar