Codificando sua interface como um profissional

Transcript

1. Codificando sua interface como um PROFISSIONAL Nando Vieira
5. Quem é Interface developer?
6. Quem é Backend developer?
7. Quem faz as duas coisas?
8. mundos Guerra dos
9. Capítulo 1 Markup semântico
10. HTML Documento estruturado html head body link title meta h1
11. SEMÂNTICA É definida pela hierarquia das informações e uso adequado das tags.
13. elementos a, 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. elementos a, 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. A tag sem valor semântico que você deve evitar. DIV
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. A RubyConf Brasil é a maior conferência com foco em Ruby da América do Sul. <h1> </h1> <p> </p> RubyConf Brasil
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. <!-- div#container_main é aberta no application layout --> <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 :medium, @question.user %> <div class="question-data-wrapper"> <% special_info = special_flag(@question) %> <div class="question-data <%= special_info.first+"_question- data" if special_info %>"> <% if @question.expired? || @question.closed? %> <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. view: 323 partial: 70 * 25 outras partials: 32 + 20 + 70 +70 + 59 layout: 210 + 15 Faça as contas 2549 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 = [@race.place.name, l(@race.meeting.meeting_date), @race.to_s, @race.name].join(' - ') - cache([I18n.locale, @race.cache_key, :result].join('/'), :expires_in => 2.weeks) do :ruby meeting = @race.meeting selected_race = @race next_race = @next_race closed = @race.closed? ? 'complete' : 'upcoming' %h1.drop_shadow = @race.place.name \- #{l(@race.meeting.meeting_date, :format => :short)} \- #{t(:counter_race, :count => @race.meeting.races.count)} - case request.fullpath - when /fprogramme-courses/ %span= link_to(raw("#{t(:other_races, :scope => :races)} &raquo;"), meeting_path(@race.meeting)) - when /resultats-courses/ %span= link_to(raw("#{t(:other_races, :scope => :races)} &raquo;"), meeting_path(@race.meeting)) %div.drop_shadow[meeting]{:style => "margin: 0 0 8px 0 !important"} = render 'race_meeting_title' .cleaner .body .meeting_races
30. Pense duas vezes antes de usar Haml se o seu time tem uma alta rotatividade ou se você contrata muitos freelancers. ATENÇÃO!
31. Err, Mr. Designer. WTF? Nem tudo pode ser como o designer sonhou. Cada navegador é diferente.
32. Suporte avançado N W S E NW SW SE NE 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. Windows XP, que ainda tem a maior base de usuários Windows, tem suporte até o Internet Explorer 8. IE8 é o novo Internet Explorer 6 http://en.wikipedia.org/wiki/Usage_share_of_operating_systems
35. layout Criando uma estrutura melhor
36. <!DOCTYPE html> <html> <head> <title>Sample app</title> <%= stylesheet_link_tag "application" %> <%= javascript_include_tag "application" %> <%= csrf_meta_tags %> </head> <body> <%= yield %> </body> </html> eRb
37. Charset <meta charset="utf-8">
38. Locale <html dir="ltr" lang="<%= I18n.locale %>">
39. HTML5 no IE <%= javascript_include_tag "html5" %>
40. var tags = "abbr|article|aside...".split("|"); for (var i = 0; i < tags.length; i++) { document.createElement(tags[i]); } JavaScript https://gist.github.com/dea13a2b98569cbaa673
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 https://github.com/fnando/dispatcher-js
46. <%= body(&block) %> body.controller-action body.language body#controller-page
47. <!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> eRb
48. Funciona de diversas maneiras diferentes, mas nem todos conhecem as possibilidades. render
49. render "repo" Renderiza #{controller_name}/_repo.html.erb
50. render "repos/repo" Sempre renderiza repos/_repo.html.erb
51. render repo Renderiza repos/_repo.html.erb instância de Repo
52. render @repos Renderiza em loop a partial repos/_repo.html.erb coleção de repos
53. render form Renderiza #{controller_name}/_form.html.erb
54. O Rails tornou nossa vida muito mais fácil, mas ainda dá para melhorar um pouco. forms
55. <%= form_for @repo do |f| %> <%= f.error_messages %> <p> <%= f.label :name %> <%= f.text_field :name %> </p> <p> <%= f.submit "Create" %> </p> <% end %> eRb
56. gem install simple_form
57. <%= simple_form_for @repo do |form| %> <%= form.error_notification %> <%= form.input :name, autofocus: true %> <%= f.button :submit %> <% end %> eRb
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. <% if logged_in? && (current_user.id == @question.user_id) && !@question.expired? && !@question.has_best_answer? %> <!-- código HTML aqui --> <% end %> eRb
64. <% if can_edit_question_expiration?(@question) %> <!-- código HTML aqui --> <% end %> eRb
65. Helpers ajudam Nem sempre são a melhor maneira de remover lógica de suas views.
66. module IssuesHelper def statuses_options Issue::STATUS.collect do |name, value| [t(value, scope: "issues.statuses"), value] end end end Ruby app/helpers/issues_helper.rb
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. 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 Ruby app/presenters/issue_presenter.rb
70. 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 Ruby spec/presenters/issue_presenter_spec.rb
71. class IssuesController < ApplicationController def new @issue = Issue.new @presenter = IssuePresenter.new(@issue) respond_with(@issue) end end Ruby spec/presenters/issue_presenter_spec.rb
72. <%= simple_form_for @issue do |form| %> <%= render form, presenter: @presenter %> <p class="submit"> <%= submit_or_cancel back_url, button: t("issues.create_button") %> </p> <% end %> Ruby app/views/issues/new.html.erb
73. <%= form.input :category, collection: presenter.categories_options %>
74. Toda e qualquer lógica, por menor que seja. O que deve ir no presenter?
75. tl;dr
76. Dê a devida importância ao seu conteúdo HTML Semântico
77. HTML5 + CSS3 para quem suporta Progressive Enhancement
78. Saiba o que usar, quando usar Aprenda a usar as partials
79. Haml, Coffeescript ou asset pipeline, a menos que você saiba onde está se metendo Não use
80. Extraia lógica de suas views para objetos que podem ser facilmente testados Encapsulamento
82. hellobits.com @fnando nando vieira