E agora, virei um front-end Rails!?

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.

Escrever os tais HTML e CSS. Marcação e aparência Front-end

Conteúdo disponível e de fácil entendimento indiferente das condições do
usuário. Acessibilidade e usabilidade Front-end

Fazer tudo isto como um ninja e garantir qualidade na
navegação e rapidez no carregamento. Performance Front-end http://browserdiet.com

Inﬁnidade de browsers, plataformas e dispositivos considerando seus diferentes usos.
http://jcemer.com/hipermidia-as-avessas.html Múltiplos meios Front-end

Quem são vocês?

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!

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

http://jcemer.com

http://codeminer42.com

Views e partials

Através de dados e templates, são usados para produzir um
resultado formatado. Em nosso caso, geralmente HTML. Template Engines

<section class="container"> <h1><%= post.title %></h1> <h2><%= post.subtitle %></h2> <div class="content">
<%= post.content %> </div> </section> Erb Template Engines

Erb Template Engines Use .erb se você não quer aprender
uma nova sintaxe ou adicionar gems de outros engines ao seu projeto.

%section.container %h1= post.title %h2= post.subtitle .content = post.content Haml Template
Engines

Nunca mais esqueça de fechar uma tag. Partials tornam-se auto-contidas,
toda tag abre e fecha no mesmo arquivo. Haml Template Engines

section.container h1 = post.title h2 = post.subtitle .content = post.content
Slim Template Engines

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

Views devem conter HTML. Não coloque CSS ou JavaScript nas
views. Views

Use com moderação. Preﬁra partials quando tiver lógica associada e
decorator quando informação for relacionada a um modelo. Helpers

Livre-se de código de marcação repetido nas suas views. Partials

Partials: herança render "sidebar" [controller]/_sidebar.slim application/_sidebar.slim Use e abuse da
herança de views.

Partials: herança campaign/faq/_sidebar.slim campaign/base/_sidebar.slim application/_sidebar.slim class Campaign::FaqController < Campaign::BaseController

Partials: layouts A herança funciona no layout também, não 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

class DisciplineDecorator < Draper::Decorator delegate_all def css_classname "discipline-#{object.plain_name}" end end
Decorators

Atributos do tipo data-* que permitem associar comportamento a elementos
da view. Unobtrusive JavaScript ~ UJS

UJS [data-confirm]: confirmação da ação [data-method]: definição do método [data-remote]:
envio assíncrono

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 aplicação for de médio
porte, preﬁra organizar o comportamento nos assets da sua aplicação.

Asset pipeline

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

Compila arquivos em ordem conforme suas extensões. Pipeline ﬁle.css.scss.erb

Um ﬁngerprint é incluído nos arquivos buscando uma estratégia de
cache de front-end ideal. Cache Pipeline application-908e25f486 8d8683022a5b62f54.css

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

Não tem porque usar outro pré-processador e muito menos não
usar SASS. Pré-processador de CSS

Settings Pré-processador de CSS $main-font: "Ruda", sans-serif; $dialog-font: "Chau Philomene
One", sans-s $sinalization-font: "Raleway", sans-serif; $button-font: $sinalization-font; $title-font: $sinalization-font; $navigation-font: $sinalization-font;

Helpers: Placeholders Pré-processador de CSS %arrow-top { &:before { @extend
%vertical-arrow; top: -13px; border-bottom: 6px white solid; } }

Helpers: Mixins Pré-processador de CSS @mixin arrow-top-color($color) { &:before {
border-bottom-color: $color; } }

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/ ﬁle.SASS_REFERENCE.html#placeholder_selectors_

Compass e Bourbon vêm com uma toneladas de mixins e
outras facilidades. Bibliotecas Pré-processador de CSS

JavaScript

Arquivos depois de concatenados possuem o mesmo escopo. Organização de
JavaScript

Diferentes arquivos vão compartilhar das mesmas variáveis. Problema 1 Organização
de JavaScript

Immediately- Invoked Function Expression Organização de JavaScript (function () {
var data = {}; function parser() { ! // Code } })();

CoffeeScript Organização de JavaScript class Mediabox constructor: (@data) ->

Cada arquivo vai ser compilado e ganhar uma IIFE automaticamente.
CoffeeScript: transpilado Organização de JavaScript

CoffeeScript: transpilado Organização de JavaScript (function() { var Mediabox; Mediabox
= (function() { function Mediabox(data) { this.data = data; } return Mediabox; })(); }).call(this);

Se cada arquivo tiver um escopo, não tenho como compartilhar
algo. Problema 2 Organização de JavaScript

Namespace Organização de JavaScript App.modules.name = (function () { var
data = {}; return { ! data: data, ! parser: // ... } })();

Require.js Organização de JavaScript define('mediabox', ['jquery', 'util/counter'], function ($, Counter)
{ // ... return { Mediabox: Mediabox, // ... }; } );

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

Componentes

Um componente nada mais é que uma abstração que encapsula
elementos HTML, CSS e comportamento. Deﬁnição

Separação de reponsabilidades em encapsulamentos bem organizados e reusáveis. Objetivo

JavaScript dos componentes

Plugins e widgets jQuery, módulo AMD, Backbone, Component.io, FlightJS Component...
Bibliotecas e Frameworks

Deﬁnir o componente não é tudo, ele precisa ser iniciado.
Instanciando

// 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

Os componentes podem ser removidos ou adicionados numa página acarretando
manutenção no JavaScript. Por página: Problemas Instanciando

Angular.js e Dojo usam como referência elementos HTML para instanciar
componentes. Soluções Instanciando

<div ng-app="component"> <tabs> <pane title="Date"> Date: {{ '2012-04-01' | date:'fullDa
</pane> <pane title="Hello"> Hi! </pane> </tabs> </div> Angular.js Instanciando

Piecemaker Instanciando <div data-pieces="colorize" data-color="#903D3D"> Colorize </div> https://github.com/jcemer/piecemaker

Piecemaker Instanciando var pieces = { colorize: function (container) {
! var color = container.dataset.color container.style.background = color } }

Piecemaker Instanciando var piecemaker = new Piecemaker({ namespace: pieces })
piecemaker.setup()

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

Web Components: Custom Elements, Shadow DOM e Templates. Futuro https://speakerdeck.com/zenorocha/um-
futuro-chamado-web-components

Turbolinks

Objetivo Dimunir até pela metade o tempo de carregamento da
sua página. http://github.com/rails/turbolinks

Solução A cada clique em um link, apenas o conteúdo
do <body> é substituído. Seu conteúdo é pego por uma requisição XHR.

Assets Coloque JavaScript e CSS no <head> e indique quais
devem ser monitorados.

Assets: reload Caso algum dos assets mude, a página é
totalmente recarregada.

Histórico de navegação A URL atual é alterada e as
páginas visitadas são armazenadas. Voltar à página anterior é imediato.

Suporte a jQuery Além de $.ready(fn), você deve esperar agora
por $(document).on('page:load', fn)

Suporte a jQuery Páginas 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/turbolinks-
compatibility

JavaScript Os comportamentos das páginas já visitas continuam ativos.

Você nunca mudará de página Sua aplicação ﬁcará sempre na
mesma página. Seja cauteloso e busque por memory leaks.

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 <body>.

Wiselinks

Vantagens Funciona em browsers antigos, envia formulários e processa cabeçalhos
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 dependências

Problema Gem não é o empacotamento mais adequado para código
front-end.

Bower Um gerenciador de dependências que funciona apoiado no Node.js.
http://simplesideias.com.br/gerenciando- dependencias-client-side-com-bower

Versionamento Versionar as dependências no repositório depois de baixadas não
me deixa a vontade.

Half Pipe

Solução Substitui o asset pipeline por um workﬂow 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 dependências de front-end é uma ciência
em desenvolvimento.

Não tenha dúvida As melhores ferramentas para front-end atualmente rodam
em Node.js.

Obrigado @jcemer

E agora, virei um front-end Rails!?

E agora, virei um front-end Rails!?

More Decks by Jean Carlo Emer

Other Decks in Technology

Featured

Transcript