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?

Transcript

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

   View Slide

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.
   

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

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

   View Slide

7. Quem são
   vocês?
   

   View Slide

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!
   

   View Slide

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
   

   View Slide

10. http://jcemer.com
    

    View Slide

11. http://codeminer42.com
    

    View Slide

12. Views e
    partials
    

    View Slide

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

    View Slide

14. 
    <%= post.title %>
    <%= post.subtitle %>
    
    <%= post.content %>
    
    
    Erb
    Template Engines
    

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

25. Partials: layouts
    A herança funciona no layout também,
    não só na action da view.
    
    <%= yield %>
    <%= render "footer" %>
    
    [controller]/_footer.slim
    application/_footer.slim
    

    View Slide

26. Partials: menos
    um condicional
    render "player/#{video.service}",
    video: video
    player/_youtube.slim
    player/_vimeo.slim
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

30. UJS: index.html
    data-confirm="Are you sure?"
    data-method="delete"
    data-remote="true"
    rel="nofollow">Destroy
    

    View Slide

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

    View Slide

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

    View Slide

33. UJS
    Evite usar UJS se sua aplicação for de
    médio porte, prefira organizar o
    comportamento nos assets da sua
    aplicação.
    

    View Slide

34. Asset
    pipeline
    

    View Slide

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
    

    View Slide

36. Compila arquivos em ordem
    conforme suas extensões.
    Pipeline
    file.css.scss.erb
    

    View Slide

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

    View Slide

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
    

    View Slide

39. CSS
    

    View Slide

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

    View Slide

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;
    

    View Slide

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

    View Slide

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

    View Slide

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_
    

    View Slide

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

    View Slide

46. JavaScript
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

57. Componentes
    

    View Slide

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

    View Slide

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

    View Slide

60. JavaScript dos
    componentes
    

    View Slide

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

    View Slide

62. Definir o componente não é tudo,
    ele precisa ser iniciado.
    Instanciando
    

    View Slide

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
    

    View Slide

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

    View Slide

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

    View Slide

66. 
    
    
    Date: {{ '2012-04-01' | date:'fullDa
    
    
    Hi!
    
    
    
    Angular.js
    Instanciando
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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
    

    View Slide

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

    View Slide

72. Turbolinks
    

    View Slide

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

    View Slide

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

    View Slide

75. Assets
    Coloque JavaScript e CSS no
    e indique quais devem ser
    monitorados.
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

79. Suporte a jQuery
    Páginas trazidas do cache disparam
    $(document).on('page:restore', fn).
    https://github.com/kossnocorp/
    jquery.turbolinks
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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 .
    

    View Slide

84. Wiselinks
    

    View Slide

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

    View Slide

86. Pseudo
    Desvantagem
    Depende de jQuery e elementos precisam
    de atributo indicando o uso.
    https://github.com/igor-alexandrov/
    wiselinks/issues/48
    

    View Slide

87. Um último
    assunto
    

    View Slide

88. Gerenciamento
    de dependências
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

92. Half Pipe
    

    View Slide

93. Solução
    Substitui o asset pipeline por um workflow
    baseado em Grunt.js e Bower.
    https://github.com/d-i/half-pipe
    

    View Slide

94. Grunt.js
    Gerenciador de tarefas front-end escrito
    em JavaScript.
    

    View Slide

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

    View Slide

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

    View Slide

97. Obrigado
    @jcemer
    

    View Slide