Slide 1

Slide 1 text

E agora, virei um front-end Rails!?

Slide 2

Slide 2 text

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.

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

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

Slide 5

Slide 5 text

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

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

Quem são vocês?

Slide 8

Slide 8 text

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!

Slide 9

Slide 9 text

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

Slide 10

Slide 10 text

http://jcemer.com

Slide 11

Slide 11 text

http://codeminer42.com

Slide 12

Slide 12 text

Views e partials

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

<%= post.title %>

<%= post.subtitle %>

<%= post.content %>
Erb Template Engines

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

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

Slide 17

Slide 17 text

Nunca mais esqueça de fechar uma tag. Partials tornam-se auto-contidas, toda tag abre e fecha no mesmo arquivo. Haml Template Engines

Slide 18

Slide 18 text

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

Slide 19

Slide 19 text

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

Slide 20

Slide 20 text

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

Slide 21

Slide 21 text

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

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

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

Slide 25

Slide 25 text

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

Slide 26

Slide 26 text

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

Slide 27

Slide 27 text

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

Slide 28

Slide 28 text

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

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

UJS: index.html Destroy

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

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

Slide 34

Slide 34 text

Asset pipeline

Slide 35

Slide 35 text

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

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

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

Slide 39

Slide 39 text

CSS

Slide 40

Slide 40 text

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

Slide 41

Slide 41 text

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;

Slide 42

Slide 42 text

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

Slide 43

Slide 43 text

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

Slide 44

Slide 44 text

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_

Slide 45

Slide 45 text

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

Slide 46

Slide 46 text

JavaScript

Slide 47

Slide 47 text

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

Slide 48

Slide 48 text

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

Slide 49

Slide 49 text

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

Slide 50

Slide 50 text

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

Slide 51

Slide 51 text

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

Slide 52

Slide 52 text

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

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

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

Slide 55

Slide 55 text

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

Slide 56

Slide 56 text

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

Slide 57

Slide 57 text

Componentes

Slide 58

Slide 58 text

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

Slide 59

Slide 59 text

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

Slide 60

Slide 60 text

JavaScript dos componentes

Slide 61

Slide 61 text

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

Slide 62

Slide 62 text

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

Slide 63

Slide 63 text

// 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

Slide 64

Slide 64 text

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

Slide 65

Slide 65 text

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

Slide 66

Slide 66 text

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

Slide 67

Slide 67 text

Piecemaker Instanciando
Colorize
https://github.com/jcemer/piecemaker

Slide 68

Slide 68 text

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

Slide 69

Slide 69 text

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

Slide 70

Slide 70 text

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

Slide 71

Slide 71 text

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

Slide 72

Slide 72 text

Turbolinks

Slide 73

Slide 73 text

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

Slide 74

Slide 74 text

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

Slide 75

Slide 75 text

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

Slide 76

Slide 76 text

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

Slide 77

Slide 77 text

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

Slide 78

Slide 78 text

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

Slide 79

Slide 79 text

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

Slide 80

Slide 80 text

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

Slide 81

Slide 81 text

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

Slide 82

Slide 82 text

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

Slide 83

Slide 83 text

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 .

Slide 84

Slide 84 text

Wiselinks

Slide 85

Slide 85 text

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

Slide 86

Slide 86 text

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

Slide 87

Slide 87 text

Um último assunto

Slide 88

Slide 88 text

Gerenciamento de dependências

Slide 89

Slide 89 text

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

Slide 90

Slide 90 text

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

Slide 91

Slide 91 text

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

Slide 92

Slide 92 text

Half Pipe

Slide 93

Slide 93 text

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

Slide 94

Slide 94 text

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

Slide 95

Slide 95 text

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

Slide 96

Slide 96 text

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

Slide 97

Slide 97 text

Obrigado @jcemer