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. 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.
  2. 4.
  3. 5.

    Fazer tudo isto como um ninja e garantir qualidade na

    navegação e rapidez no carregamento. Performance Front-end http://browserdiet.com
  4. 6.

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

    http://jcemer.com/hipermidia-as-avessas.html Múltiplos meios Front-end
  5. 13.

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

    resultado formatado. Em nosso caso, geralmente HTML. Template Engines
  6. 15.

    Erb Template Engines Use .erb se você não quer aprender

    uma nova sintaxe ou adicionar gems de outros engines ao seu projeto.
  7. 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
  8. 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
  9. 21.

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

    decorator quando informação for relacionada a um modelo. Helpers
  10. 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
  11. 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 %>
  12. 33.

    UJS Evite usar UJS se sua aplicação for de médio

    porte, prefira organizar o comportamento nos assets da sua aplicação.
  13. 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
  14. 37.

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

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

    CSS

  17. 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;
  18. 42.

    Helpers: Placeholders Pré-processador de CSS %arrow-top { &:before { @extend

    %vertical-arrow; top: -13px; border-bottom: 6px white solid; } }
  19. 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_
  20. 45.

    Compass e Bourbon vêm com uma toneladas de mixins e

    outras facilidades. Bibliotecas Pré-processador de CSS
  21. 49.
  22. 51.

    Cada arquivo vai ser compilado e ganhar uma IIFE automaticamente.

    CoffeeScript: transpilado Organização de JavaScript
  23. 52.

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

    = (function() { function Mediabox(data) { this.data = data; } return Mediabox; })(); }).call(this);
  24. 53.

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

    algo. Problema 2 Organização de JavaScript
  25. 54.

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

    data = {}; return { ! data: data, ! parser: // ... } })();
  26. 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
  27. 58.

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

    elementos HTML, CSS e comportamento. Definição
  28. 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
  29. 64.

    Os componentes podem ser removidos ou adicionados numa página acarretando

    manutenção no JavaScript. Por página: Problemas Instanciando
  30. 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
  31. 68.

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

    ! var color = container.dataset.color container.style.background = color } }
  32. 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
  33. 73.

    Objetivo Dimunir até pela metade o tempo de carregamento da

    sua página. http://github.com/rails/turbolinks
  34. 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.
  35. 77.

    Histórico de navegação A URL atual é alterada e as

    páginas visitadas são armazenadas. Voltar à página anterior é imediato.
  36. 78.
  37. 82.

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

    mesma página. Seja cauteloso e busque por memory leaks.
  38. 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>.
  39. 84.
  40. 86.

    Pseudo Desvantagem Depende de jQuery e elementos precisam de atributo

    indicando o uso. https://github.com/igor-alexandrov/ wiselinks/issues/48
  41. 90.

    Bower Um gerenciador de dependências que funciona apoiado no Node.js.

    http://simplesideias.com.br/gerenciando- dependencias-client-side-com-bower
  42. 92.
  43. 93.

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

    Grunt.js e Bower. https://github.com/d-i/half-pipe