Desvendando os limites do universo front-end: um panorama de ferramentas e técnicas

Palestra apresentada na QConSP 2013.

Um panorama de ferramentas e técnicas front-end. Abordando templates, boilerplates, frameworks, processadores e muito mais. A função aqui é elevar seu projeto a altos níveis de abstração para garantir melhor qualidade e agilidade no desenvolvimento.

Transcript

1. Desvendando os
   limites do universo
   front-end:
   um panorama de ferramentas
   e técnicas
   

   View Slide

2. Buenas?!
   

   View Slide

3. Jean Carlo Emer
   artesão da internet
   github.com/jcemer
   twitter.com/jcemer
   speakerdeck.com/jcemer
   

   View Slide

4. View Slide

5. View Slide

6. Atenção!
   O importante é que seu
   produto funcione e seja
   fácil de manter
   

   View Slide

7. Mas...
   Se você acha que pode
   ir além no seu fluxo de
   desenvolvimento, esta
   palestra é para você!
   

   View Slide

8. Conte-me mais!
   Quero saber como começo
   meu projeto!
   

   View Slide

9. Boilerplates
   

   View Slide

10. Base sólida e reusável
    para seu projeto entalhada
    com boas práticas
    

    View Slide

11. Boa organização de
    arquivos
    Estrutura inicial de
    HTML, CSS e JS
    Robots.txt e
    humans.txt
    Favicon e apple icons
    HTML5 Boilerplate
    http:/
    /html5boilerplate.com
    

    View Slide

12. HTML
    Define viewport
    para projetos
    responsivos
    

    View Slide

13. 
    content="width=1024">
    Viewport para site não
    responsivo
    HTML
    

    View Slide

14. Inclui Modernizr com
    todas as detecções
    apenas html5shiv (IE8,7) ou
    o Modernizr customizado
    incluíndo html5shiv
    <br/>
    
    HTML
    

    View Slide

15. Página de erro 404
    UTF-8 para CSS e JS
    Entrega de arquivos
    compactados
    http://gzipwtf.com
    Define expiração dos
    arquivos
    Apache
    

    View Slide

16. Na versão 2.0.0 mudou de
    Reset.css para Normalize.css
    CSS
    

    View Slide

17. /*! normalize.css v2.1.2 | MIT License | git.io
    /**
    * Correct `block` display not defined in IE 8/
    */
    article, aside, details, figcaption, figure, fo
    header, hgroup, main, nav, section, summary {
    display: block;
    }
    /**
    * Correct `inline-block` display not defined i
    */
    audio, canvas, video {
    display: inline-block;
    }
    /**
    * Prevent modern browsers from displaying `aud
    * Remove excess height in iOS 5 devices.
    */
    audio:not([controls]) {
    display: none;
    height: 0;
    }
    /**
    * Address styling not present in IE 8/9.
    */
    Normalize
    Institui uma
    aparência padrão
    para cada elemento
    Corrige alguns bugs
    comuns
    normalize.css
    http:/
    /necolas.github.io/normalize.css
    

    View Slide

18. /**
    * Eric Meyer's Reset CSS v2.0
    */
    html, body, div, span, applet, object, iframe,
    h1, h2, h3, h4, h5, h6, p, blockquote, pre,
    a, abbr, acronym, address, big, cite, code,
    del, dfn, em, img, ins, kbd, q, s, samp,
    small, strike, strong, sub, sup, tt, var,
    b, u, i, center,
    dl, dt, dd, ol, ul, li,
    fieldset, form, label, legend,
    table, caption, tbody, tfoot, thead, tr, th, td
    article, aside, canvas, details, embed,
    figure, figcaption, footer, header, hgroup,
    menu, nav, output, ruby, section, summary,
    time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
    }
    /* HTML5 display-role reset for older browsers
    article, aside, details, figcaption, figure,
    footer, header, hgroup, menu, nav, section {
    display: block;
    }
    body {
    line-height: 1;
    }
    ol, ul {
    list-style: none;
    Reset
    Remove toda a
    aparência
    Elementos de título,
    parágrafo e lista com
    mesma aparência
    CSS Tools: Reset CSS
    http:/
    /meyerweb.com/eric/tools/
    css/reset
    

    View Slide

19. X
    reset normalize
    

    View Slide

20. Sophisto Boilerplate
    Browsers modernos
    (IE9+)
    Stylus: pré processador
    de CSS
    Rye.js: biblioteca JS leve
    substituta da jQuery
    Build tool e script de
    deploy
    Sophisto Boilerplate
    https:/
    /github.com/grifo/sophisto-boilerplate
    

    View Slide

21. View Slide

22. Aparência inicial
    Diversas APIs
    Suporte offline
    Firefox OS Boilerplate App
    Firefox OS Boilerplate App
    http:/
    /github.com/robnyman/Firefox-OS-Boilerplate-App
    

    View Slide

23. Hmmm...
    Mas ainda não abordamos
    aparência e como construir
    componentes!
    

    View Slide

24. Frameworks
    de CSS
    

    View Slide

25. Guia de estilo com
    componentes reusáveis e
    configuráveis para seu projeto
    

    View Slide

26. Cuidado!
    Não existe uma maneira
    de testar folhas de estilo
    

    View Slide

27. body, div, dl, dt, dd, ul, ol, li, h1, h2, h3,
    h4, h5, h6, pre, form, p, blockquote, th, td {
    margin: 0;
    padding: 0;
    font-size: 14px;
    direction: ltr;
    }
    Foundation 3.0
    Divs ou tds não
    herdam o tamanho da
    fonte de seus
    elementos pais
    

    View Slide

28. Pure CSS
    Seu formulário deve
    sempre terminar com
    um radio
    

    View Slide

29. Cuidado!
    Usar frameworks engessa
    a marcação a sua maneira
    

    View Slide

30. 
    
    Este é um exemplo
    bem interessante
    daquilo que não devemos fazer.
    
    Isto é consenso?
    
    

    View Slide

31. 
    
    Ótimo, muito bom!
    
    E o quanto isto é diferente
    daquilo?
    
    
    
    Twitter Bootstrap 2.3
    Marcação usando
    classes nomeadas
    pelo framework
    

    View Slide

32. CSS to the heaven
    Tags e classes devem se
    referir ao seu conteúdo
    e não a sua aparência
    Seletores devem ser o
    mais globais possíveis
    ou função, caso
    esteja projetando
    componentes
    

    View Slide

33. Legal
    E agora como eu reuso e
    organizo meu código CSS?
    

    View Slide

34. CSS on
    Steroids
    

    View Slide

35. Pré-processadores
    // Variables
    $site-width: 960px;
    $color-primary: red;
    $color-secondary: #EEE;
    // Code
    .container {
    background:
    lighten($color-secondary, 10);
    max-width: $site-width;
    margin: 0 auto;
    @include border-radius(5px);
    }
    // Mixins
    @mixin border-radius($radius) {
    -webkit-border-radius: $radius;
    -moz-border-radius: $radius;
    border-radius: $radius;
    }
    .box {
    p {
    margin-bottom: 1em;
    }
    a {
    font-weight: bold;
    &:hover {
    background: $color-secondary;
    }
    }
    }
    

    View Slide

36. Pré-processadores
    // CSS Code
    .container {
    background: white;
    max-width: 960px;
    margin: 0 auto;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    border-radius: 5px;
    }
    .box p {
    margin-bottom: 1em;
    }
    .box a {
    font-weight: bold;
    }
    .box a:hover {
    background: #eeeeee;
    }
    // Code
    .container {
    background:
    lighten($color-secondary, 10);
    max-width: $site-width;
    margin: 0 auto;
    @include border-radius(5px);
    }
    .box {
    p {
    margin-bottom: 1em;
    }
    a {
    font-weight: bold;
    &:hover {
    background: $color-secondary;
    }
    }
    }
    

    View Slide

37. Pré-processadores
    Linguagem para
    adicionar açucar
    sintático não nativos
    ao CSS
    Resultam em CSS nos
    padrões das
    especificações
    Nova camada que
    precisa ser trans-
    compilada
    

    View Slide

38. @base: #f938ab;
    .box-shadow(@style, @c) when (iscolor(@c)) {
    box-shadow: @style @c;
    -webkit-box-shadow: @style @c;
    -moz-box-shadow: @style @c;
    }
    .box-shadow(@style, @alpha: 50%) when (isnumbe
    .box-shadow(@style, rgba(0, 0, 0, @alpha));
    }
    .box {
    color: saturate(@base, 5%);
    border-color: lighten(@base, 30%);
    div { .box-shadow(0 0 5px, 30%) }
    }
    @the-border: 1px;
    @base-color: #111;
    @red: #842210;
    #header {
    color: (@base-color * 3);
    border-left: @the-border;
    border-right: (@the-border * 2);
    }
    #footer {
    color: (@base-color + #003300);
    border-color: desaturate(@red, 10%);
    }
    Padrão do Twitter
    Bootstrap
    Repetições bastante
    estranhas e
    engessadas
    Mantido por
    desenvolvedores
    desconhecidos
    

    View Slide

39. border-radius()
    -webkit-border-radius: arguments
    -moz-border-radius: arguments
    border-radius: arguments
    body
    font: 12px Helvetica, Arial, sans-serif
    background: linear-gradient(top, white, blac
    a.button
    border-radius: 5px
    @keyframes foo {
    from {
    color: black
    }
    to {
    color: white
    }
    }
    button {
    color: rgba(red, .5)
    border-radius: bottom 10px;
    }
    .nav {
    fixed: bottom 10px right 5px;
    }
    Mixins transparentes
    Mixins e componentes
    com Nib
    Sintaxe bastante livre
    Muita liberdade
    causa confusão
    

    View Slide

40. $blue: #3bbfce
    $margin: 16px
    .content-navigation
    border-color: $blue
    color: darken($blue, 9%)
    .border
    padding: $margin / 2
    margin: $margin / 2
    border-color: $blue
    @mixin table-base
    th
    text-align: center
    font-weight: bold
    td, th
    padding: 2px
    @mixin left($dist)
    float: left
    margin-left: $dist
    #data
    @include left(10px)
    @include table-base
    Projeto maduro
    Bibliotecas poderosas
    como Compass e
    Bourbon
    Duas sintaxes que não
    podem se misturar
    Sintaxe
    SASS
    

    View Slide

41. $blue: #3bbfce;
    $margin: 16px;
    .content-navigation {
    border-color: $blue;
    color: darken($blue, 9%);
    }
    .border {
    padding: $margin / 2;
    margin: $margin / 2;
    border-color: $blue;
    }
    @mixin table-base() {
    th {
    text-align: center;
    font-weight: bold;
    }
    td, th {
    padding: 2px;
    }
    }
    @mixin left($dist) {
    float: left;
    margin-left: $dist;
    }
    #data {
    @include left(10px);
    @include table-base;
    }
    Projeto maduro
    Bibliotecas poderosas
    como Compass e
    Bourbon
    Duas sintaxes que não
    podem se misturar
    Sintaxe
    SCSS
    

    View Slide

42. <3 <3 <3
    

    View Slide

43. Atenção!
    Não reescreva a árvore
    de elementos do HTML
    no CSS
    

    View Slide

44. CSS Explain
    http:/
    /josh.github.io/css-explain
    html {
    body {
    background: black;
    section {
    padding: 20px;
    p {
    margin-bottom: 10px;
    a {
    color: blue;
    &:hover {
    text-decoration: none;
    }
    }
    }
    }
    }
    }
    html body section p a:hover
    

    View Slide

45. Organizando o CSS
    // Libraries
    @import "nib"
    @import "settings"
    @import "helper"
    // Core
    @import "core/normalize"
    @import "core/structure"
    // Shared
    @import "shared/header"
    @import "shared/footer"
    // Modules
    @import "modules/grade"
    @import "modules/map"
    // Pages
    @import "pages/home"
    @import "pages/about"
    

    View Slide

46. View Slide

47. Mixins e helpers são muito
    úteis para definir grids
    Grid semântico
    

    View Slide

48. Grid semântico
    
    
    Bourbon Neat
    
    
    
    Neat é um framework de
    grid semântico.
    
    
    Sass e Bourbon são
    seus requisitos.
    
    
    
    .tool {
    @include outer-container;
    }
    http:/
    /neat.bourbon.io
    .tool-title {
    @include span-columns(3);
    }
    .tool-content {
    @include span-columns(9);
    }
    

    View Slide

49. .header {
    @include outer-container;
    }
    .brand {
    @include span-columns(3);
    }
    .menu {
    @include span-columns(9);
    }
    Grid semântico
    .tool {
    @include outer-container;
    }
    .tool-title {
    @include span-columns(3);
    }
    .tool-content {
    @include span-columns(9);
    }
    

    View Slide

50. .tool {
    @include outer-container;
    }
    .tool-title {
    @include span-columns(3);
    }
    .tool-content {
    @include span-columns(9);
    }
    .header {
    @include outer-container;
    }
    .brand {
    @include span-columns(3);
    }
    .menu {
    @include span-columns(9);
    }
    Grid semântico
    .brand {
    display: block;
    float: left;
    margin-right: 2.35765%;
    width: 23.23176%;
    }
    .brand:last-child {
    margin-right: 0;
    }
    .tool-title {
    display: block;
    float: left;
    margin-right: 2.35765%;
    width: 23.23176%;
    }
    .tool-title:last-child {
    margin-right: 0;
    }
    .tool-title {
    @include span-columns(3);
    }
    .brand {
    @include span-columns(3);
    }
    

    View Slide

51. Ops?!
    Agora temos muitas
    regras de CSS repetidas
    

    View Slide

52. CSSO
    body {
    padding: 0;
    color: red;
    }
    .element {
    color: blue;
    color: red;
    }
    .element {
    padding: 0;
    }
    input { border: none; }
    button { border: none; }
    .container, .container {
    color: red;
    }
    body,.element{padding:0;color:red}
    input,button{border:none}.container{
    color:red}
    CSSO
    http:/
    /bem.info/tools/csso
    

    View Slide

53. CSSO
    body {
    padding: 0;
    color: red;
    }
    .element {
    color: blue;
    color: red;
    }
    .element {
    padding: 0;
    }
    input { border: none; }
    button { border: none; }
    .container, .container {
    color: red;
    }
    body, .element {
    padding:0;
    color:red
    }
    input, button {
    border:none
    }
    .container {
    color:red
    }
    CSSO
    http:/
    /bem.info/tools/csso
    

    View Slide

54. Frameworks de CSS conclusão
    Use apenas os mixins
    e funções para
    pré-processadores
    de CSS
    Aproveite a vontade
    código JavaScript
    não atrelado a classes
    HTML
    
    [...]
    [...]
    
    // Mixins em LESS do Twitter Bootstrap
    .tool {
    .makeRow();
    }
    .tool-title {
    .makeColumn(3);
    }
    .tool-content {
    .makeColumn(9);
    }
    

    View Slide

55. CSS on steroids conclusão
    Deixe de bobagem e
    turbine seu workflow
    Prefira o pré-processador
    que sua equipe se sente
    mais a vontade
    Não custa muito ativar o
    CSSO, mas teste bem
    antes de levar para
    produção
    

    View Slide

56. Entendi...
    E o que faço com a
    disposição dos elementos
    do meu layout?
    

    View Slide

57. CSS Layout
    

    View Slide

58. Box model
    Define tamanhos,
    margens, paddings...
    Posiciona elementos
    em relação a outros ou
    fixa eles na viewport
    

    View Slide

59. Box model
    Ordena os elementos
    em direção vertical
    (block) ou horizontal
    (inline)
    

    View Slide

60. Box model
    Ordena os elementos
    em direção vertical
    (block) ou horizontal
    (inline)
    

    View Slide

61. Box model
    Ordena os elementos
    em direção vertical
    (block) ou horizontal
    (inline)
    

    View Slide

62. Flexbox model
    Não usa floats
    Agnóstico de direção
    Meios de alinhar
    facilmente elementos
    

    View Slide

63. Flexbox: flex grown e shrink
    grown
    0 0 1
    

    View Slide

64. Flexbox: flex grown e shrink
    grown
    0 0 1
    

    View Slide

65. Flexbox: flex grown e shrink
    grown
    shrink
    1 1 0
    grown
    0 0 1
    

    View Slide

66. Flexbox: flex grown e shrink
    shrink
    1 1 0
    0 0 1
    grown
    

    View Slide

67. Flexbox: align itens
    flex-start flex-end
    center stretch
    

    View Slide

68. Flexbox: justify content
    flex-start
    flex-end
    center
    space-between
    

    View Slide

69. Flexbox: flow e order
    Holy Grail Layout example
    https:/
    /developer.mozilla.org/en-US/docs/Web/Guide/CSS/
    Flexible_boxes
    

    View Slide

70. Flexbox: flow e order
    Holy Grail Layout example
    https:/
    /developer.mozilla.org/en-US/docs/Web/Guide/CSS/
    Flexible_boxes
    

    View Slide

71. Flexbox
    Flexbox é ideal para
    componentes
    W3C Candidate
    Recommendation
    Compatível com
    Chrome 29+ e IE 11
    @mixin flexbox() {
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    }
    @mixin flex($values) {
    -webkit-box-flex: $values;
    -moz-box-flex: $values;
    -webkit-flex: $values;
    -ms-flex: $values;
    flex: $values;
    }
    @mixin order($val) {
    -webkit-box-ordinal-group: $val;
    -moz-box-ordinal-group: $val;
    -ms-flex-order: $val;
    -webkit-order: $val;
    order: $val;
    }
    .wrapper {
    @include flexbox();
    }
    .item {
    @include flex(1 200px);
    @include order(2);
    }
    A Complete Guide to Flexbox
    http:/
    /css-tricks.com/snippets/
    css/a-guide-to-flexbox/
    

    View Slide

72. Grid
    Ideal para layouts
    completos
    Promissor para definir
    disposição dos
    componentes
    Especificação da
    Microsoft compatível
    apenas com IE 10+
    

    View Slide

73. CSS Layout conclusão
    Box model ainda é o
    caminho, aprenda ao
    máximo!
    Use flexbox e grid em
    ambientes controlados, ainda
    tem baixa compatibidade e
    especificação não estável
    Learn CSS Layout
    http:/
    /learnlayout.com
    

    View Slide

74. Legal!
    E as media queries,
    podemos falar um pouco
    disto?
    

    View Slide

75. Media Queries
    

    View Slide

76. História
    Primeira especificação é
    de 2002
    iPhone foi lançado em
    2007
    W3C recommended
    standard em 2012
    

    View Slide

77. Layout responsivos
    Termo usado por Ethan
    Marcotte em artigo Responsive
    Web Design em A List Apart
    

    View Slide

78. Acessibilidade
    Media queries também ajudam na acessibilidade
    http:/
    /sergiolopes.org/media-queries-zoom
    

    View Slide

79. Modularização
    A buzzword da vez no
    universo front-end é
    modularização
    Media queries são
    globais, com base na
    viewport
    

    View Slide

80. Cuidado!
    Vamos falar do universo
    dos sonhos desde aqui
    para frente
    

    View Slide

81. http://ianstormtaylor.com/media-queries-are-a-hack
    

    View Slide

82. View Slide

83. Meu produto
    Módulos
    

    View Slide

84. Meu produto
    Layout responsivo
    

    View Slide

85. Meu
    produto
    Layout responsivo
    

    View Slide

86. Meu produto
    Layout responsivo
    

    View Slide

87. View Slide

88. Make it so, internetz
    Element level media
    queries
    Acelerar a implementação
    de flexbox e grid
    Imagens responsivas
    pra ontem!
    Pensar em soluções,
    testar e prototipar
    

    View Slide

89. Obrigado!
    @jcemer
    

    View Slide