Codificando sua interface como um PROFISSIONAL. Nando Vieira

Transcrição

1 Codificando sua interface como um PROFISSIONAL Nando Vieira

2

3

4

5 Quem é Interface developer?

6 Quem é Backend developer?

7 Quem faz as duas coisas?

8 Guerra dos mundos

9 Capítulo 1 Markup semântico

10 HTML Documento estruturado html head body link meta title h1

11 SEMÂNTICA É definida pela hierarquia das informações e uso adequado das tags.

12

13 elementosa, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr

14 elementosa, abbr, address, area, article, aside, audio, b, base, bdi, bdo, blockquote, body, br, button, canvas, caption, cite, code, col, colgroup, command, datalist, dd, del, details, dfn, div, dl, dt, em, embed, fieldset, figcaption, figure, footer, form, h1, h2, h3, h4, h5, h6, head, header, hgroup, hr, html, i, iframe, img, input, ins, kbd, keygen, label, legend, li, link, map, mark, menu, meta, meter, nav, noscript, object, ol, optgroup, option, output, p, param, pre, progress, q, rp, rt, ruby, s, samp, script, section, select, small, source, span, strong, style, sub, summary, sup, table, tbody, td, textarea, tfoot, th, thead, time, title, tr, track, u, ul, var, video, wbr

15 DIV você A tag sem valor semântico que deve evitar.

16 HTML <div class="event"> <div class="name">rubyconf Brasil</div> <div class="description"> A RubyConf Brasil é a maior conferência com foco em Ruby da América do Sul. </div> </div>

17 {fail}

18 RubyConf Brasil A RubyConf Brasil é a maior conferência com foco em Ruby da América do Sul.

19 <h1> RubyConf Brasil </h1> <p> A RubyConf Brasil é a maior conferência com foco em Ruby da América do Sul. </p>

20 {win}

21 Capítulo 2 Dominando os templates

22 Templates são terra de ninguém O importante é o que o usuário vê, e não o que está por baixo.

23  <h2 class="question-title">pergunta</h2> <%#<p id="next-question"><a href="#" title="próxima pergunta: título da pergunta">próxima pergunta</a></p>%> <div class="question-box" id="question"> <%= avatar_link_to %> <div class="question-data-wrapper"> <% special_info = special_flag(@question) %> <div class="question-data <%= special_info.first+"_questiondata" if special_info %>"> %> <p class="question-status closed"><strong>pergunta fechada</strong></p> <% else %> <p class="question-status open"><strong>pergunta aberta</strong></p> <% end %> <% if special_info %> <div class="special_flag <%= special_info.first %>_flag"> <img src="/images/specials/<%= special_info.first %>/flag_question.png" alt="<%= special_info.first %>" class="pngfix"/> <a href="<%= special_info.last %>" title="<%=

24 Faça as contas view: 323 partial: 70 * 25 outras partials: layout: LOC em uma única action

25 2549 LOC

26 Complexidade Este produto queria mostrar tudo o que era "importante" em um único lugar.

27 Lógica nas views Atribuição de variáveis, condições complexas, HTML sem semântica, e mais.

28 Haml. Use se você sabe o que está fazendo!

29 - content_for :title do = - ') - :result].join('/'), :expires_in => 2.weeks) do :ruby meeting selected_race next_race closed 'complete' : 'upcoming' %h1.drop_shadow \- #{l(@race.meeting.meeting_date, :format => :short)} \- #{t(:counter_race, :count - case request.fullpath - when /fprogramme-courses/ %span= link_to(raw("#{t(:other_races, :scope => :races)}»"), meeting_path(@race.meeting)) - when /resultats-courses/ %span= link_to(raw("#{t(:other_races, :scope => :races)}»"), meeting_path(@race.meeting)) %div.drop_shadow[meeting]{:style => "margin: 0 0 8px 0!important"} = render 'race_meeting_title'.cleaner.body.meeting_races

30 ATENÇÃO! Pense duas vezes antes de usar Haml se o seu time tem uma alta rotatividade ou se você contrata muitos freelancers.

31 Err, Mr. Designer. WTF? Nem tudo pode ser como o designer sonhou. Cada navegador é diferente.

32 Suporte avançado NW N NE W E SE S SW Os navegadores mais modernos possuem suporte avançado ao CSS, e incluem até animações.

33 Internet Explorer A Microsoft inovou ao lançar o IE6, o mais avançado navegador que já existiu... em 2001.

34 IE8 é o novo Internet Explorer 6 Windows XP, que ainda tem a maior base de usuários Windows, tem suporte até o Internet Explorer 8.

35 layout Criando uma estrutura melhor

36 erb <!DOCTYPE html> <html> <head> <title>sample app</title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html>

37 Charset <meta charset="utf-8">

38 Locale <html dir="ltr" lang="<%= I18n.locale %>">

39 HTML5 no IE <%= javascript_include_tag "html5" %>

40 JavaScript var tags = "abbr article aside...".split(" "); for (var i = 0; i < tags.length; i++) { document.createelement(tags[i]); }

41 Dispatch JS <%= dispatcher_tag %> <meta name="page" content="users#index" />

42 JavaScript App.users = { before: function() { // execute before all actions }, index: function() { // code for :index action }, new: function() { // code for :new action } };

43 ATENÇÃO! Pense duas vezes antes de usar Coffeescript se o seu time tem uma alta rotatividade ou se você contrata muitos freelancers.

44 Coffeescript Pense duas vezes sempre antes de usá-lo.

45 gem install swiss_knife rake swiss_knife:javascripts:dispatcher

46 <%= body(&block) %> body.controller-action body.language body#controller-page

47 erb <!DOCTYPE html> <html dir="ltr" lang="<%= I18n.locale %>"> <head> <meta charset="utf-8"> <title><%= page_title %> Codeplane</title> <%= dispatcher_tag %> <%= favicon_link_tag %> <%= javascript_include_tag "html5" %> <%= stylesheet_includes :application %> </head> <%= body do %> <%= yield %> <%= javascript_includes :application %> <% end %> </html>

48 render Funciona de diversas maneiras diferentes, mas nem todos conhecem as possibilidades.

49 render "repo" Renderiza #{controller_name}/_repo.html.erb

50 render "repos/repo" Sempre renderiza repos/_repo.html.erb

51 instância de Repo render repo Renderiza repos/_repo.html.erb

52 coleção de repos Renderiza em loop a partial repos/_repo.html.erb

53 render form Renderiza #{controller_name}/_form.html.erb

54 forms O Rails tornou nossa vida muito mais fácil, mas ainda dá para melhorar um pouco.

55 erb <%= do f %> <%= f.error_messages %> <p> <%= f.label :name %> <%= f.text_field :name %> </p> <p> <%= f.submit "Create" %> </p> <% end %>

56 gem install simple_form

57 erb <%= do form %> <%= form.error_notification %> <%= form.input :name, autofocus: true %> <%= f.button :submit %> <% end %>

58 Capítulo 3 Removendo a lógica das views

59 atribuição de variáveis

60 erb <% label = target.moderated?? "Revogar Moderação" : "Moderar Pergunta" %> <% paginate_link = nil if local_assigns[:paginate_link].nil? %>

61 erb <% cache("/welcome/highlights", :expires_in => 24.hours) do %> <% posts = Highlight.posts bookmark = Highlight.bookmark if bookmark.size == 1 bookmark = bookmark.first else bookmark = nil end post_count = 1 %>... muito markup aqui! <% end %>

62 helpers A maneira mais simples de extrair a lógica das views.

63 erb <% if logged_in? && (current_user.id %>  <% end %>

64 erb <% if %>  <% end %>

65 Helpers ajudam Nem sempre são a melhor maneira de remover lógica de suas views.

66 Ruby app/helpers/issues_helper.rb module IssuesHelper def statuses_options Issue::STATUS.collect do name, value [t(value, scope: "issues.statuses"), value] end end end

67 Objetos que irão preparar os dados para a view. Toda a lógica fica encapsulada, melhorando sua view e tornando os testes mais simples. PRESENTERS

68 gem install simple_presenter

69 Ruby app/presenters/issue_presenter.rb class IssuePresenter < Presenter expose :number, :title, :created_at def categories_options Issue::CATEGORY.collect do name, value [ t(value, scope: "issues.categories"), value ] end end end

70 Ruby spec/presenters/issue_presenter_spec.rb context "category options" do subject { IssuePresenter.new.categories_options } it { should have(3).items } it { should include(["bug", "bug"]) } it { should include(["feature", "feature"]) } it { should include(["task", "task"]) } end

71 Ruby spec/presenters/issue_presenter_spec.rb class IssuesController < ApplicationController def = = IssuePresenter.new(@issue) respond_with(@issue) end end

72 Ruby app/views/issues/new.html.erb <%= do form %> <%= render form, %> <p class="submit"> <%= submit_or_cancel back_url, button: t("issues.create_button") %> </p> <% end %>