« HE:labs
HE:labs

Dicas de front-end para um novato no Rails

Postado por Mauro George em 05/12/2014

Então você é acostumado a produzir HTML e entra para um time que usa Rails e uma engine de templates #comofaz? Fica comigo que vou te dar as dicas para sobreviver a este mundo.

Slim

O slim é uma engine de templates, como você já está acostumado a escrever HTML não terá dificuldades aqui. Basicamente apenas temos que apenas "abrir" a tag e identar o nosso conteúdo dentro dela.

1 <div class="content">
2   <h1>Fila de Análise</h1>
3 </div>

Para gerarmos um HTML como o exibido acima, no slim fazemos assim:

1 .content
2   h1 Fila de Análise

Para maiores informações sobre o slim de uma olhada em sua documentação.

SASS

O SASS é um pré-processador de CSS bastante poderoso e já vem nas aplicações Rails mais novas. Ele extende o CSS no entanto não muda a sua sintaxe apenas adicionando novos poderes. Acredito que não terá dificuldades aqui. Vamos a um exemplo em que definimos uma fonte e uma cor em uma variavel e um pouco de aninhmanento de seletores.

 1 $font-stack: Helvetica, sans-serif;
 2 $primary-color: #333;
 3 
 4 nav {
 5   ul {
 6     margin: 0;
 7     padding: 0;
 8     list-style: none;
 9   }
10 
11   li { display: inline-block; }
12 
13   a {
14     font: 14px $font-stack;
15     color: $primary-color;
16     display: block;
17     padding: 6px 12px;
18     text-decoration: none;
19   }
20 }

Este código SASS é compilado para o seguinte código CSS, em que os aninhmamentos foram traduzidos para ser entendido pelo CSS e as variáveis expandidas para exibir o seu valor.

 1 nav ul {
 2   margin: 0;
 3   padding: 0;
 4   list-style: none;
 5 }
 6 
 7 nav li {
 8   display: inline-block;
 9 }
10 
11 nav a {
12   font: 14px Helvetica, sans-serif;
13   color: #333;
14   display: block;
15   padding: 6px 12px;
16   text-decoration: none;
17 }

Para mais informação sobre o SASS visiste a sua documentação e descubra mais coisas legais como partials, mixins, extend/inheritance entre outras coisas. Sobre organização do código SASS de uma olhada no post Rails front-end com Bourbon e sua familia.

De onde tá vindo este CSS?

É uma boa prática definirmos nossos CSS em diversos arquivos .scss para uma melhor organização, mas sobre isto no post. No entanto ao entrar em um projeto novo utilizamos o nosso browser para inspecionar um elemento e lá vemos que o código exibido é o CSS e não o SASS. Como saber onde foi definido os estilos do meu #flash_notice?

Simplesmente abra o arquivo css no seu navegador, e busque pelo elemento que quer ver os estilos definidos.

1 /* line 14, /project/app/assets/stylesheets/base/extends/_flashes.scss */
2 #flash_alert, #flash_error, #flash_notice, #flash_success, .error,
3 .info,
4 .success {
5   font-weight: bold;
6   padding: 0.75em;
7 }

Perceba que é exibido um comentário dizendo em qual arquivo foi definido tal estilo no SCSS, agora já sabe onde ir para alterar os estilos do #flash_notice.

Não se preocupe que em produção o Rails é experto o suficiente para remover os comentários e minificar o seu código CSS.

CSS e JavaScript de terceiros

É comum em nossas aplicações termos que incluir bibliotecas de terceiros seja de CSS ou JavaScript. Já temos o jQuery por padrão no rails. Vamos então adicionar o normalize.

Como dica sempre que queremos incluir uma biblioteca de terceiro é uma boa procurarmos se não existe uma gem para isto. Então podemos buscar por "normalize rails" no Google ou direto no Ruby Toolbox.

Não se esqueça de dar uma analisada na gem, como qual a versão da biblioteca que você quer inserir ele da suporte, quando foi o último commit e o que mais achar relevante.

Para instalar leia o README da gem que está usando, mas normalmente será:

  1. inserir a gem no Gemfile
  2. instalar a gem com $ bundle
  3. importar o CSS ou JavaScript nos arquivos de assets.

Temos diversas gems da comunidade com bibliotecas famosas como Twitter bootstrap, Foundation, jQuery UI entre outras.

Não existe a gem da biblioteca X

Para quando não temos um gem que empacota uma biblioteca CSS ou JavaScript podemos inseri-lá diretamente no nosso projeto. Para isto, adicionamos nossos arquivos de terceiro em vendor/assets/javascripts/ os JavaScripts de terceiros e vendor/assets/stylesheets/ os CSS de terceiros.

E importarmos eles normalmente em nosso application.js

1 //= require jquery
2 //= require jquery_ujs
3 //= require turbolinks
4 //= require jquery.zoom
5 //= require_tree .

E no caso de CSS importamos normalmente no application.css.scss

1 @import 'normalize';
2 @import 'bourbon';
3 @import 'base/base';
4 @import 'neat';
5 @import 'refills/*';
6 @import 'layouts/*';

Não se preocupe em baixar os arquivos minificados, pode baixar a versão sem minificar que quando o Rails enviar para produção tudo será minificado normalmente.

Mais sobre o tema na documentação.

Geração de links

Agora que está acostumado com o slim, talvez você queira criar um link para a sua aplicação com algo como:

1 a href='/' Home

Ele funciona e nos da o HTML experado a seguir.

1 <a href="/">Home</a>

No entanto o ideal é utilizarmos do helper link_to que o rails nos fornece.

1 = link_to 'Home', '/'

Mas não é uma boa prática criarmos os links na "mão", pois temos helpers do rails para isso. Para descobrimos nossas rotas utilizamos do seguinte comando.

1 $ rake routes

Que nos gera todas as nossas rotas.

1 -----------------------------------------------------------------------------------------
2         Prefix Verb  URI Pattern                                       Controller#Action
3           root GET   /                                                 customers#new
4      customers GET   /customers(.:format)                              customers#index
5                POST  /customers(.:format)                              customers#create
6  edit_customer GET   /customers/:id/edit(.:format)                     customers#edit
7       customer PATCH /customers/:id(.:format)                          customers#update
8                PUT   /customers/:id(.:format)                          customers#update

Ou se preferir ainda pode acessar uma url qualquer que não exista como http://localhost:3000/wrong que será exibido no seu browser a mesma informação.

Olhando na lista vemos que o helper para gerar a rota para / é o root então vamos alterar nosso link.

1 = link_to 'Home', root_path

Perceba que adicionamos o sufixo _path isto é necessário para o helper funcionar, neste caso ele gerará apenas /. Em um email por exemplo não podemos mandar um link para / apenas temos que ter o dominio todo no link, temos que ter a url. Para este caso adicionamos o sufixo _url.

1 = link_to 'Home', root_url

Humm... legal. Mas eu to nesta página aqui e não sei qual o helper dela, sei a url olhando no browser, como que eu faço um link para ela?

Neste caso abra o seu log, e procure por algo como isto:

1 Started GET "/" for 127.0.0.1 at 2014-11-28 14:33:43 -0200
2     ActiveRecord::SchemaMigration Load (0.7ms)  SELECT "schema_migrations".* FROM "schema_migrations"
3     Processing by CustomersController#new as HTML

Observe que no começo temos GET "/" ou seja o endereço acessado, e no final Processing by CustomersController#new as HTML podemos interpretar isto como customers#new e assim o achamos na nossa lista com as rotas que este é o root.

É comum termos que adicionar atributos a nossos links como por exemplo uma classe, para isto simplesmente fazemos assim.

1 = link_to 'Home', root_url, class: 'logo'

Podemos adiconar id, data-attributes etc, para mais informações fique com a documentação do link_to.

Outro caso que é comum nos depararmos é quando precisamos definir um link em que precisa englobar outros elementos. Para este caso utilizamos de um bloco.

1 = link_to root_path, class: 'logo' do
2   | Rock
3   span &
4   | Roll

Imagem

Todas as nossas imagens ficam em app/assets/images/. Para gerar uma tag de imagem como esta.

1 <img alt="Logo" src="/assets/logo.png" />

Utilizamos do helper image_tag do rails.

1 = image_tag 'logo.png'

Perceba que passamos apenas o nome da imagem, sem a necessidade de passar um caminho completo.

Podemos adicionar classes e outros atributos também como fizemos com o link.

1 = image_tag 'logo.png', class: 'logo'

Para mais detalhes sobre o image_tag fique com a documentação.

No SCSS

É comum termos que referenciar nossas imagens no SCSS. Como por exemplo para definir um background.

1 .logo {
2   background: image-url('logo.png');
3   width: 200px;
4   height: 80px;
5 }

Perceba que utilizando o image-url não precisamos definir o caminho completo da imagem. Para mais detalhes a documentação.

Formulários

Não adianta criarmos um formulário usando apenas o slim se ele não tiver os valores definidos corretos para trabalhar com o rails. Então a forma correta de criarmos um formulário é utilizando do form_for.

1 = form_for @customer do |f|
2   = f.label :name
3   = f.text_field :name
4   = f.label :phone
5   = f.text_field :phone
6   = f.label :cellphone
7   = f.text_field :cellphone
8   = f.submit

Utilizamos do f.label para definir o label e do f.text_field para definirmos um input de texto e finalizamos com o botão de submit. Mais informações na documentação.

Simple Form

Em projetos que é utilizado do Simple Form, não precisamos definir label e input separados definimos ambos ao mesmo tempo utilizando apenas f.input e passamos o nome do atributo.

1 = simple_form_for @customer do |f|
2   = f.error_notification
3   = f.input :name
4   = f.input :phone
5   = f.input :cellphone
6   = f.button :submit

Com o Simple Form é legal definirmos também o f.error_notification em que é exibida uma mensagem padrão para a verificação dos erros. Mais informações na documentação.

Tá! Mas como que eu sei o nome que o desenvolvedor criou no banco de dados.

Para isto abra o arquivo db/schema.rb e procure pela tabela correspondente, no caso de @customer a tabela customers lá terá listado todos os campos que tal tabela possui e você poderá utilizar no seu formulário.

Internacionalização

Nosso formulário foi criado anteriormente, no entanto todos os campos estão em inglês, do modo que foram criados no banco de dados, vamos ver agora como traduzir para melhorar a experiência dos nossos usuários.

Formulários

Para criarmos a tradução dos nossos campos abrimos o arquivo config/locales/app.pt-BR.yml(utilizamos o app.pt-BR.yml e deixamos o pt-BR.yml sem alteração para ser fácil de se atualizar) e adicionamos o modelo, no nosso caso customer e seus atributos.

1 pt-BR:
2   models_and_attributes: &models_and_attributes
3     attributes:
4       customer:
5         name: Nome
6         phone: Telefone
7         cellphone: Celular

Para traduzirmos os inputs de submit ainda no config/locales/app.pt-BR.yml criamos uma sessão de helpers e adicionamos lá a nossa tradução.

1 pt-BR:
2   helpers:
3     submit:
4       customer:
5         create: 'Criar cliente'
6         update: 'Atualizar cliente'

Mais informações sobre internacionalização na documentação. O Simple Form possui diversas opções de Internacionalização como labels, hints e placeholders veja mais na documentação.

Data e tempo

Na nossa aplicação está sendo exibida a data de criação do cliente.

1 = customer.created_at

No entanto o valor é exibido como 2014-11-27 17:11:10 -0200, e no nosso layout gostariamos de exibir apenas o dia/mês/ano.

Se obervarmos no nosso config/locales/pt-BR.yml temos a definição dos formatos de time.

1 time:
2     formats:
3       default: ! '%a, %d de %B de %Y, %H:%M:%S %z'
4       long: ! '%d de %B de %Y, %H:%M'
5       short: ! '%d de %B, %H:%M'
6       simple: ! '%d/%m/%Y'

E olhando ao formato simple, ele parece atender a nossa necessidade. Para aplicar o formato simplesmente utilizamos do helper l e definir o formato que iremos usar.

1 = l(customer.created_at, format: :simple)

Assim resolvemos o nosso problema e exibimos a data formatada como dia/mês/ano.

Em outra área do nosso app temos que exibir apenas o ano. E olhando para o nosso arquivo de tradução, nenhum formato exibe apenas o ano. Então vamos criar este novo formato. Para isto no arquivo config/locales/app.pt-BR.yml criamos a sessão time e adicionamos o novo formato.

1 pt-BR:
2   time:
3     formats:
4       only_year: ! '%Y'

Lembrando que nunca inserimos nada no config/locales/pt-BR.yml, utilizamos sempre o app.pt-BR.yml.

Para exibir uma data no nosso novo formato simplesmente trocamos o valor de format no helper l.

1 = l(customer.created_at, format: :only_year)

O campo created_at por padrão é um datetime se estivermos lidando com um campo date trocamos a chave time para date no nosso arquivo de tradução.

Mais informações na documentação.

Partials

Dando uma olhada no layout da nossa aplicação vemos que ele está bastante grande, seria legal se podessemos separar ele em arquivos menores.

1 #wrapper
2   header
3     // Conteúdo do header
4   = yield

Para começar vamos extrar o header para uma partial. Para isso criamos nossa partial em app/views/application/_header.html.slim

1 header
2   // Conteudo do header

Agora que movemos nosso header para um partial vamos renderizar esta partial no layout novamente. Para isso simplesmente chamamos render e o nome de nossa partial.

1 #wrapper
2   = render 'header'
3   = yield

O diretório app/views/application/ é ideal para partial que possam ser utilizadas em diversas views, como um widget de comentário.

Espero que com estas dicas ter lhe ajudado a entrar um pouco no mundo do front-end em aplicações Rails.

Compartilhe

Sabia que nosso blog agora está no Medium? Confira Aqui!