Você está na página 1de 97

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.

Front-end

Marcação e aparência

Escrever os tais HTML e CSS.

Front-end

Acessibilidade e usabilidade

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

Front-end

Performance

Fazer tudo isto como um ninja e garantir qualidade na navegação e rapidez no carregamento.

http://browserdiet.com

Front-end

Múltiplos

meios

Innidade de browsers, plataformas e dispositivos considerando seus diferentes usos.

http://jcemer.com/hipermidia-as-avessas.html

Rubistas

Desenvolvedor Rails que caiu naquele projeto furada e agora precisa fazer HTML e CSS, urgh!

http://developer.mozilla.org http://learnlayout.com

Confeiteiros

Desenvolvedor front-end que pegou aquele job descolado e não sabe o que o Ruby tem de Rails.

via @vitor42

http://mislav.uniqpath.com/poignant-guide

http://guides.rubyonrails.org

http://akitaonrails.com/FrontEnd

http://jcemer.com
http://jcemer.com
http://jcemer.com

http://jcemer.com

http://codeminer42.com

http://codeminer42.com

Template

Engines

Através de dados e templates, são 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ê não 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 esqueça 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 padrão já sem espaços entre as tags o que facilita algumas técnicas. Slim é até mais performático que Erb.

Views

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

Helpers

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

Partials

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

Partials: herança

Use e abuse da herança de views. render "sidebar"

[controller]/_sidebar.slim

application/_sidebar.slim

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

Partials: herança

class Campaign::FaqController < Campaign::BaseController

campaign/faq/_sidebar.slim

< Campaign :: BaseController campaign/faq/_sidebar.slim campaign/base/_sidebar.slim application/_sidebar.slim

campaign/base/_sidebar.slim

application/_sidebar.slim

< Campaign :: BaseController campaign/faq/_sidebar.slim campaign/base/_sidebar.slim application/_sidebar.slim

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

%> <%= 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]: conrmação da ação [data-method]: de niçã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

UJS: create.js.erb <%- if @contact . errors . any? %> $('#contact-modal').html(' <%=

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

Separação

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.

Pipeline

Compila arquivos em ordem conforme suas extensões.

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

le.css.scss.erb

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

Pipeline

Cache

Um ngerprint é incluído nos arquivos buscando uma estratégia de cache de front-end ideal.

application-908e25f486

8d8683022a5b62f54.css

Pipeline

Informações

Os templates .erb e gems de pré- processadores de CSS possuem acesso ao asset path e demais informações da aplicação.

CSS

Pré-processador de CSS

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

Pré-processador de CSS

Settings

$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;

Pré-processador de CSS

Helpers:

Placeholders

%arrow-top { &:before { @extend %vertical-arrow; top: -13px; border-bottom: 6px white solid;

}

}

Pré-processador de CSS

Helpers: Mixins

@mixin arrow-top-color($color) { &:before { border-bottom-color: $color;

}

}

Pré-processador de CSS

Helpers

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_

Pré-processador de CSS

Bibliotecas

Compass e Bourbon vêm com uma toneladas de mixins e outras facilidades.

Organização de JavaScript

Arquivos depois de concatenados possuem o mesmo escopo.

Organização de JavaScript

Problema 1

Diferentes arquivos vão compartilhar das mesmas variáveis.

Organização de JavaScript

Immediately-

Invoked Function Expression

(function () { var data = {};

function parser() { ! // Code

}

})();

Organização de JavaScript

CoffeeScript

class Mediabox constructor: (@data) ->

Organização de JavaScript

CoffeeScript:

transpilado

Cada arquivo vai ser compilado e ganhar uma IIFE automaticamente.

Organização de JavaScript

CoffeeScript:

transpilado

(function() { var Mediabox; Mediabox = (function() { function Mediabox(data) { this.data = data;

}

return Mediabox; })(); }).call(this);

Organização de JavaScript

Problema 2

Se cada arquivo tiver um escopo, não tenho como compartilhar algo.

Organização de JavaScript

Namespace

App.modules.name = (function () { var data = {};

return {

! data: data, ! parser: //

}

})();

Organização de JavaScript

Require.js

define('mediabox', ['jquery', 'util/counter'], function ($, Counter) { // return { Mediabox: Mediabox, //

);

}

};

Organização de JavaScript

Require.js

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.

https://github.com/jwhitley/requirejs-rails

Definição

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

Objetivo

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

Bibliotecas e Frameworks

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

Instanciando

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

Instanciando

Por página

// 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 página:

Problemas

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

Instanciando

Soluções

Angular.js e Dojo usam como referência 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 módulos AMD.

http://jcemer.com/atribuindo-

comportamento-a-componentes.html

Futuro

Web Components: Custom Elements, Shadow DOM e Templates.

https://speakerdeck.com/zenorocha/um-

futuro-chamado-web-components

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

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

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.

Solução

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.

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