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

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 revisada
   

   View Slide

2. jcemer.com
   github.com/jcemer
   twitter.com/jcemer
   speakerdeck.com/jcemer
   

   View Slide

3. View Slide

4. O importante é que seu
   produto
   funcione e
   entregue valor
   

   View Slide

5. ...mas se você quer que
   ele seja prático de
   desenvolver
   

   View Slide

6. ...tenha uma
   manutenção
   descomplicada
   

   View Slide

7. ...e sobretudo, ir além
   no seu fluxo de
   trabalho
   

   View Slide

8. esta palestra é
   especialmente
   destinada a você!
   

   View Slide

9. A Serious Man
   http:/
   /www.imdb.com/title/tt1019452
   

   View Slide

10. Quero saber como
    começo meu
    projeto
    ?
    

    View Slide

11. Boilerplates
    

    View Slide

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

    View Slide

13. 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

14. HTML
    Define viewport
    para projetos
    responsivos
    

    View Slide

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

    View Slide

16. Inclui Modernizr
    com todas as
    detecções
    apenas html5shiv
    (IE8,7) ou o Modernizr
    customizado
    que inclui o html5shiv
    <br/>
    
    HTML
    

    View Slide

17. Página de erro 404
    UTF-8 para CSS e JS
    Entrega de arquivos
    compactados
    Define expiração dos
    arquivos para estratégia
    de cache
    Apache
    

    View Slide

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

    View Slide

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

    View Slide

20. /**
    * 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.css
    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

21. X
    reset normalize
    

    View Slide

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

    View Slide

23. View Slide

24. 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

25. Quero saber de
    aparência e como
    definir componentes
    ?
    

    View Slide

26. Frameworks
    de CSS
    

    View Slide

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

    View Slide

28. Cuidado,
    não existe uma maneira
    de testar CSS
    

    View Slide

29. 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

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

    View Slide

31. Usar frameworks
    engessa o HTML
    a sua maneira
    

    View Slide

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

    View Slide

33. 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

34. CSS to the heaven: classes
    .button
    .small-button
    .secondary-button
    .remove-button
    .margin10px
    .row
    .span4
    .post
    .dark-slider
    .left
    .active
    .video-title
    .btn, .ctnr, .act
    estado tá
    valendo :)
    diagramação
    é aparência
    sem
    abreviaturas, pf
    

    View Slide

35. E agora, como eu
    reuso e organizo
    meu código?
    ?
    

    View Slide

36. CSS on
    Steroids
    

    View Slide

37. body {
    width: 960px;
    }
    .wrapper {
    width: 940px;
    }
    .speaker-list {
    width: 480px;
    }
    Largura do site
    Largura do site
    menos respiro
    Meia largura ?!
    

    View Slide

38. $site-width: 960px;
    $site-gap: 20px;
    body {
    width: $site-width;
    }
    .wrapper {
    width: $site-width - $site-gap;
    }
    .speaker-list {
    width: $site-width / 2;
    }
    Variáveis
    Qualquer
    mudança reflete
    em todo projeto
    

    View Slide

39. body {
    color: #3F4955;
    }
    .about {
    background: #3F4955;
    }
    .contact a:hover {
    color: #3F4956;
    }
    .speaker-list {
    border: 1px solid #3F4955;
    }
    PSD estava com
    uma pequena
    variação :P
    Que diabo de cor
    é essa?
    ?!
    

    View Slide

40. $grey-color: #3F4955;
    $main-color: $grey-color;
    body {
    color: $main-color;
    }
    .about {
    background: $main-color;
    }
    .contact a:hover {
    color: $main-color;
    }
    .speaker-list {
    border: 1px solid $main-color;
    }
    Variáveis
    Muito mais
    organizado e fácil
    de entender
    

    View Slide

41. body {
    color: #3F4955;
    }
    .slider {
    color: #293038;
    }
    .carousel {
    background: rgba(63, 73, 85, 0.8);
    }
    Você não faz
    ideia, mas sou o
    cinza escuro
    E eu sou cinza com
    transparência
    ?!
    

    View Slide

42. $grey-color: #3F4955;
    $grey-dark-color: darken($grey-color, 10);
    $transparent-grey-color: rgba($grey-color, .8);
    body {
    color: $grey-color;
    }
    .slider {
    color: $grey-dark-color;
    }
    .carousel {
    background: $transparent-grey-color;
    }
    Funções
    transforma em rgb
    e adiciona o alpha
    

    View Slide

43. .slider {
    background: #1e5799; /* Old browsers */
    background: -moz-linear-gradient(left, #1e5799 0%, #7db9e8 100%); /*
    background: -webkit-gradient(linear, left top, right top, color-stop
    background: -webkit-linear-gradient(left, #1e5799 0%,#7db9e8 100%);
    background: -o-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* Op
    background: -ms-linear-gradient(left, #1e5799 0%,#7db9e8 100%); /* I
    background: linear-gradient(to right, #1e5799 0%,#7db9e8 100%); /* W
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#
    }
    Ultimate CSS Gradient Generator
    http:/
    /www.colorzilla.com/gradient-editor
    Manutenção bem
    fácil #sqn
    ?!
    

    View Slide

44. $blue-color: #1E5799;
    $light-blue-color: #7DB9E8;
    .slider {
    $gradient: linear-gradient($blue-color, $light-blue-color);
    @include background-image($gradient);
    }
    Mixins: vendor prefixes
    Bourbon.io
    http:/
    /bourbon.io/docs/#linear-gradient-function
    

    View Slide

45. @mixin user-select($arg: none) {
    -webkit-user-select: $arg;
    -moz-user-select: $arg;
    -ms-user-select: $arg;
    user-select: $arg;
    }
    .editor {
    @include user-select(none);
    }
    Mixins: vendor prefixes
    CSS user-select: none
    http:/
    /caniuse.com/#search=user-select
    

    View Slide

46. .slider p {
    margin-bottom: 1em;
    }
    .very-easy-to-add-rules-between {
    color: white;
    }
    .slider a {
    font-weight: bold;
    }
    .slider a:hover {
    background: $color-secondary;
    }
    Ops, um
    intruso aqui!
    ?!
    

    View Slide

47. .slider { }
    .slider p {
    margin-bottom: 1em;
    }
    .slider a {
    font-weight: bold;
    }
    .slider a:hover {
    background: $color-secondary;
    }
    Seletor vazio :(
    ?!
    

    View Slide

48. .slider {
    p {
    margin-bottom: 1em;
    }
    a {
    font-weight: bold;
    &:hover {
    background: $color-secondary;
    }
    }
    }
    Nested rules
    Mais fácil de ler e
    modularizar
    

    View Slide

49. Não reescreva a
    árvore de elementos do
    HTML no CSS
    

    View Slide

50. 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;
    }
    }
    }
    }
    }
    }
    Repara no resultado:
    html body section p a:hover
    

    View Slide

51. View Slide

52. .address {
    width: 200em;
    height: 300em;
    background: #666;
    color: white;
    }
    // ...
    .profile {
    width: 200em;
    height: 300em;
    background: #666;
    color: white;
    font-size: 20em;
    }
    Código repetido
    ?!
    

    View Slide

53. .address {
    width: $box-width;
    height: $box-height;
    background: $box-color;
    color: white;
    }
    // ...
    .profile {
    @extend .address;
    font-size: 20em;
    }
    Extend
    .address, .profile {
    width: 200em;
    height: 300em;
    background: #666;
    color: white;
    }
    // ...
    .profile {
    font-size: 20em;
    }
    É estranho que o
    profile estenda o
    addresss
    

    View Slide

54. %box {
    width: $box-width;
    height: $box-height;
    background: $box-color;
    color: white;
    }
    .address {
    @extend %box;
    }
    // ...
    .profile {
    @extend %box;
    font-size: 20em;
    }
    Placeholders
    Este primeiro
    bloco é apenas
    uma abstração
    

    View Slide

55. .profile {
    position: relative;
    width: 100px;
    background: red;
    }
    .profile:before {
    content: "";
    position: absolute;
    width: 0;
    height: 0;
    border: 7px solid transparent;
    left: 50%;
    margin-left: -7px;
    top: -13px;
    border-bottom: 7px red solid;
    }
    Eu não tenho
    ideia doque isto
    representa
    ?!
    

    View Slide

56. %arrow-top {
    position: relative;
    &:before {
    content: "";
    position: absolute;
    width: 0; height: 0;
    border: 7px solid transparent;
    left: 50%;
    margin-left: -7px;
    top: -13px;
    border-bottom: 7px red solid;
    }
    }
    .profile {
    width: 100px;
    background: red;
    @extend %arrow-top;
    }
    Helpers
    A cor da nossa
    seta está estática
    

    View Slide

57. @mixin arrow-top-color($color) {
    &:before {
    border-bottom-color: $color;
    }
    }
    .profile {
    width: 100px;
    background: blue;
    @extend %arrow-top;
    @include arrow-top-color(blue);
    }
    Helpers
    Tudo o que recebe
    argumentos é
    um mixin
    The Extend Concept
    http:/
    /css-tricks.com/the-extend-concept
    

    View Slide

58. View Slide

59. View Slide

60. View Slide

61. $distance: (100% - $size) / 2;
    &:#{$type} {
    content : '';
    position: absolute;
    z-index: 1;
    @if $mode == horizontal {
    left: $distance; right: $distance;
    height: $thickness;
    } @else {
    top: $distance; bottom: $distance;
    width: $thickness;
    }
    }
    }
    @mixin line-gradient($pos, $opacity) {
    @include radial-gradient($pos, rgba(black, $opacity)
    }
    @mixin left-line($size, $opacity: .15, $thickness: 10p
    @include line(vertical, before, $size, $thickness);
    &:before {
    left: 0;
    @include line-gradient(left center, $opacity);
    }
    }
    @mixin bottom-line($size, $opacity: .15, $thickness: 1
    @include line(horizontal, after, $size, $thickness);
    &:after {
    bottom: 0;
    @include line-gradient(center bottom, $opacity);
    }
    }
    @mixin top-line($size, $opacity: .15, $thickness: 10px
    @include line(horizontal, before, $size, $thickness)
    &:before {
    top: 0;
    @include line-gradient(center top, $opacity);
    }
    }
    @mixin inverse-bottom-line($size, $opacity: .15, $thic
    @include line(horizontal, after, $size, $thickness);
    &:after {
    bottom: -$thickness;
    @include line-gradient(center top, $opacity);
    }
    }
    @mixin hide-bottom-line {
    &:after {
    display: none;
    Helpers
    Line helpers
    https:/
    /gist.github.com/jcemer/7130218
    .section-title {
    font-size: rem(28px);
    color: $blue;
    @include inverse-bottom-line(80%);
    }
    .collaborate-item:last-child {
    @include left-line(90%);
    padding-left: 10%;
    }
    .address-map {
    @include top-line(100%, .25);
    @include bottom-line(100%, .25);
    }
    

    View Slide

62. View Slide

63. Pré-processadores
    Linguagem para adicionar
    açucar sintático não
    nativos ao CSS
    Resultam em CSS
    Nova camada que precisa
    ser trans-compilada
    

    View Slide

64. @base: #f938ab;
    .box-shadow(@style, @c) when (iscolor(
    box-shadow: @style @c;
    -webkit-box-shadow: @style @c;
    -moz-box-shadow: @style @c;
    }
    .box-shadow(@style, @alpha: 50%) when
    (isnumber(@alpha)) {
    .box-shadow(@style, rgba(0, 0, 0, @a
    }
    .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
    Não possui
    placeholders
    Repetições bastante
    estranhas e
    engessadas
    

    View Slide

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

    View Slide

66. Projeto maduro
    Bibliotecas
    poderosas como
    Compass e
    Bourbon
    Duas sintaxes que
    não podem se
    misturar
    $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;
    }
    Sintaxe
    SCSS
    

    View Slide

67. $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
    Sintaxe
    SASS
    Projeto maduro
    Bibliotecas
    poderosas como
    Compass e
    Bourbon
    Duas sintaxes que
    não podem se
    misturar
    

    View Slide

68. <3 <3 <3
    

    View Slide

69. Libsass: biblioteca
    escrita em C/C++
    Módulo node-sass já
    utiliza esta biblioteca e
    compila nativamente
    seu arquivo
    

    View Slide

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

    View Slide

71. 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

72. Organizando o CSS
    // Libraries
    @import "compass";
    @import "settings";
    @import "helper";
    // Core
    @import "core/normalize";
    @import "core/layout";
    // Shared
    @import "shared/header";
    @import "shared/footer";
    variáveis
    mixins e
    placeholders
    estilizar
    , ,
    elementos
    comuns
    

    View Slide

73. Organizando o CSS
    // ... continuação
    // Modules
    @import "modules/grade";
    @import "modules/map";
    // Pages
    @import "pages/home";
    @import "pages/about";
    modularização!
    regras muito específicas
    que são guiadas por uma
    classe no
    

    View Slide

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

    View Slide

75. CSS Layout
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

80. Flexbox model
    E que tal um novo
    modelo?
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

89. Flexbox model
    Flexbox é ideal para
    componentes
    W3C Candidate
    Recommendation
    Compatível com
    Chrome 29+ e IE 11
    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

90. Grid model
    Ideal para definir
    disposição dos
    componentes
    Especificação compatível
    apenas com IE 10+
    

    View Slide

91. View Slide

92. Boilerplates conclusão
    Boas práticas são sempre
    bem vindas
    Nunca esqueça do reset.css
    ou normalize.css
    

    View Slide

93. 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 Boot
    .tool {
    .makeRow();
    }
    .tool-title {
    .makeColumn(3);
    }
    .tool-content {
    .makeColumn(9);
    }
    

    View Slide

94. Pré processadores conclusão
    Deixe de bobagem e
    turbine seu workflow
    Prefira o pré-processador
    que sua equipe se sente
    mais a vontade
    

    View Slide

95. 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 concluída
    Learn CSS Layout
    http:/
    /learnlayout.com
    

    View Slide

96. Obrigado!
    @jcemer
    

    View Slide