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?

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