E agora, virei um front-end Rails!?

E agora, virei um front-end Rails!?

Já sei, você caiu num projeto Rails e não tem ideia de como começar. Views, partials, helpers, Slim, Sass, CoffeeScript e o funcionamento do asset pipeline são pesadelos que acabam com seu sono. Fica tranquilo, fazer o front-end de uma aplicação Rails não é um bicho de sete cabeças. Será que te convenço?

C5df370a883b65279af5a7ca94a5eed7?s=128

Jean Carlo Emer

October 19, 2013
Tweet

Transcript

  1. E agora, virei um front-end Rails!?

  2. 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.
  3. Escrever os tais HTML e CSS. Marcação e aparência Front-end

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

    usuário. Acessibilidade e usabilidade Front-end
  5. Fazer tudo isto como um ninja e garantir qualidade na

    navegação e rapidez no carregamento. Performance Front-end http://browserdiet.com
  6. Infinidade de browsers, plataformas e dispositivos considerando seus diferentes usos.

    http://jcemer.com/hipermidia-as-avessas.html Múltiplos meios Front-end
  7. Quem são vocês?

  8. 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!
  9. 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
  10. http://jcemer.com

  11. http://codeminer42.com

  12. Views e partials

  13. Através de dados e templates, são usados para produzir um

    resultado formatado. Em nosso caso, geralmente HTML. Template Engines
  14. <section class="container"> <h1><%= post.title %></h1> <h2><%= post.subtitle %></h2> <div class="content">

    <%= post.content %> </div> </section> Erb Template Engines
  15. Erb Template Engines Use .erb se você não quer aprender

    uma nova sintaxe ou adicionar gems de outros engines ao seu projeto.
  16. %section.container %h1= post.title %h2= post.subtitle .content = post.content Haml Template

    Engines
  17. Nunca mais esqueça de fechar uma tag. Partials tornam-se auto-contidas,

    toda tag abre e fecha no mesmo arquivo. Haml Template Engines
  18. section.container h1 = post.title h2 = post.subtitle .content = post.content

    Slim Template Engines
  19. 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
  20. Views devem conter HTML. Não coloque CSS ou JavaScript nas

    views. Views
  21. Use com moderação. Prefira partials quando tiver lógica associada e

    decorator quando informação for relacionada a um modelo. Helpers
  22. Livre-se de código de marcação repetido nas suas views. Partials

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

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

  25. 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
  26. Partials: menos um condicional render "player/#{video.service}", video: video player/_youtube.slim player/_vimeo.slim

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

    Decorators
  28. Atributos do tipo data-* que permitem associar comportamento a elementos

    da view. Unobtrusive JavaScript ~ UJS
  29. UJS [data-confirm]: confirmação da ação [data-method]: definição do método [data-remote]:

    envio assíncrono
  30. UJS: index.html <a href="/photo/42" data-confirm="Are you sure?" data-method="delete" data-remote="true" rel="nofollow">Destroy</a>

  31. UJS: destroy.js.erb $('#photo_<%= params[:id] %>') .remove()

  32. 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 %>
  33. UJS Evite usar UJS se sua aplicação for de médio

    porte, prefira organizar o comportamento nos assets da sua aplicação.
  34. Asset pipeline

  35. 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
  36. Compila arquivos em ordem conforme suas extensões. Pipeline file.css.scss.erb

  37. Um fingerprint é incluído nos arquivos buscando uma estratégia de

    cache de front-end ideal. Cache Pipeline application-908e25f486 8d8683022a5b62f54.css
  38. 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
  39. CSS

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

    usar SASS. Pré-processador de CSS
  41. 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;
  42. Helpers: Placeholders Pré-processador de CSS %arrow-top { &:before { @extend

    %vertical-arrow; top: -13px; border-bottom: 6px white solid; } }
  43. Helpers: Mixins Pré-processador de CSS @mixin arrow-top-color($color) { &:before {

    border-bottom-color: $color; } }
  44. 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_
  45. Compass e Bourbon vêm com uma toneladas de mixins e

    outras facilidades. Bibliotecas Pré-processador de CSS
  46. JavaScript

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

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

    de JavaScript
  49. Immediately- Invoked Function Expression Organização de JavaScript (function () {

    var data = {}; function parser() { ! // Code } })();
  50. CoffeeScript Organização de JavaScript class Mediabox constructor: (@data) ->

  51. Cada arquivo vai ser compilado e ganhar uma IIFE automaticamente.

    CoffeeScript: transpilado Organização de JavaScript
  52. CoffeeScript: transpilado Organização de JavaScript (function() { var Mediabox; Mediabox

    = (function() { function Mediabox(data) { this.data = data; } return Mediabox; })(); }).call(this);
  53. Se cada arquivo tiver um escopo, não tenho como compartilhar

    algo. Problema 2 Organização de JavaScript
  54. Namespace Organização de JavaScript App.modules.name = (function () { var

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

    { // ... return { Mediabox: Mediabox, // ... }; } );
  56. 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
  57. Componentes

  58. Um componente nada mais é que uma abstração que encapsula

    elementos HTML, CSS e comportamento. Definição
  59. Separação de reponsabilidades em encapsulamentos bem organizados e reusáveis. Objetivo

  60. JavaScript dos componentes

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

    Bibliotecas e Frameworks
  62. Definir o componente não é tudo, ele precisa ser iniciado.

    Instanciando
  63. // 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
  64. Os componentes podem ser removidos ou adicionados numa página acarretando

    manutenção no JavaScript. Por página: Problemas Instanciando
  65. Angular.js e Dojo usam como referência elementos HTML para instanciar

    componentes. Soluções Instanciando
  66. <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
  67. Piecemaker Instanciando <div data-pieces="colorize" data-color="#903D3D"> Colorize </div> https://github.com/jcemer/piecemaker

  68. Piecemaker Instanciando var pieces = { colorize: function (container) {

    ! var color = container.dataset.color container.style.background = color } }
  69. Piecemaker Instanciando var piecemaker = new Piecemaker({ namespace: pieces })

    piecemaker.setup()
  70. 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
  71. Web Components: Custom Elements, Shadow DOM e Templates. Futuro https://speakerdeck.com/zenorocha/um-

    futuro-chamado-web-components
  72. Turbolinks

  73. Objetivo Dimunir até pela metade o tempo de carregamento da

    sua página. http://github.com/rails/turbolinks
  74. 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.
  75. Assets Coloque JavaScript e CSS no <head> e indique quais

    devem ser monitorados.
  76. Assets: reload Caso algum dos assets mude, a página é

    totalmente recarregada.
  77. Histórico de navegação A URL atual é alterada e as

    páginas visitadas são armazenadas. Voltar à página anterior é imediato.
  78. Suporte a jQuery Além de $.ready(fn), você deve esperar agora

    por $(document).on('page:load', fn)
  79. Suporte a jQuery Páginas trazidas do cache disparam $(document).on('page:restore', fn).

    https://github.com/kossnocorp/ jquery.turbolinks
  80. Outros suportes Facebook, Twitter, Google+, Google Analytics e AdSense... http://reed.github.io/turbolinks-

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

  82. Você nunca mudará de página Sua aplicação ficará sempre na

    mesma página. Seja cauteloso e busque por memory leaks.
  83. 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>.
  84. Wiselinks

  85. Vantagens Funciona em browsers antigos, envia formulários e processa cabeçalhos

    de resposta.
  86. Pseudo Desvantagem Depende de jQuery e elementos precisam de atributo

    indicando o uso. https://github.com/igor-alexandrov/ wiselinks/issues/48
  87. Um último assunto

  88. Gerenciamento de dependências

  89. Problema Gem não é o empacotamento mais adequado para código

    front-end.
  90. Bower Um gerenciador de dependências que funciona apoiado no Node.js.

    http://simplesideias.com.br/gerenciando- dependencias-client-side-com-bower
  91. Versionamento Versionar as dependências no repositório depois de baixadas não

    me deixa a vontade.
  92. Half Pipe

  93. Solução Substitui o asset pipeline por um workflow baseado em

    Grunt.js e Bower. https://github.com/d-i/half-pipe
  94. Grunt.js Gerenciador de tarefas front-end escrito em JavaScript.

  95. Fique atento Gerenciamento de dependências de front-end é uma ciência

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

    em Node.js.
  97. Obrigado @jcemer