Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

Jean Carlo Emer
August 30, 2013
11
1.1k

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.

Jean Carlo Emer

August 30, 2013
Tweet

More Decks by Jean Carlo Emer

See All by Jean Carlo Emer
Web & Mobile
jcemer
1
130
Thinking metrics on React apps
jcemer
0
81
Cache em aplicações web
jcemer
0
220
Aplicações Web - um estudo sobre React
jcemer
1
140
Lapidando o Globo Play
jcemer
1
210
Desenvolvedor mobile precisa aprender Web
jcemer
1
80
Evolução e futuro do uso de paradigmas no JavaScript
jcemer
3
540
Tudo o que a web (podia ser) ainda será
jcemer
8
510
Embarque App
jcemer
0
450

Featured

See All Featured
Put a Button on it: Removing Barriers to Going Fast.
kastner
56
2.5k
GraphQLの誤解/rethinking-graphql
sonatard
39
7.8k
Music & Morning Musume
bryan
37
4.7k
Imperfection Machines: The Place of Print at Facebook
scottboms
254
12k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
From Idea to $5000 a Month in 5 Months
shpigford
374
44k
What's new in Ruby 2.0
geeforr
336
30k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
270
12k
Visualization
eitanlees
129
12k
WebSockets: Embracing the real-time Web
robhawkes
58
6k
Rails Girls Zürich Keynote
gr2m
87
12k
Building Flexible Design Systems
yeseniaperezcruz
314
35k

Transcript

  1. Desvendando os limites do universo front-end: um panorama de ferramentas

    e técnicas

  2. Buenas?!

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

  4. None
  5. None

  6. Atenção! O importante é que seu produto funcione e seja

    fácil de manter

  7. Mas... Se você acha que pode ir além no seu

    fluxo de desenvolvimento, esta palestra é para você!

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

  9. Boilerplates

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

    práticas

  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

  12. HTML Define viewport para projetos responsivos

  13. <head> <meta name="viewport" content="width=1024"> Viewport para site não responsivo HTML

  14. Inclui Modernizr com todas as detecções apenas html5shiv (IE8,7) ou

    o Modernizr customizado incluíndo html5shiv <script src="html5shiv.min.js"> </script> </head> HTML

  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

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

  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

  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

  19. X reset normalize

  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
  21. None

  22. Aparência inicial Diversas APIs Suporte offline Firefox OS Boilerplate App

    Firefox OS Boilerplate App http:/ /github.com/robnyman/Firefox-OS-Boilerplate-App

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

  24. Frameworks de CSS

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

    projeto

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

  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

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

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

  30. <div class="border4px m10 clearfix"> <p> <i class="red">Este é um exemplo</span>

    <span class="left">bem interessante</span> <span class="green">daquilo que não devemos fazer.</span> </p> <p class="right darktext">Isto é consenso?</p> </div>

  31. <div class="row"> <div class="span9"> Ótimo, muito bom! <div class="row"> <div

    class="span6">E o quanto isto é diferente</div> <div class="span3 text-left">daquilo?</div> </div> </div> </div> Twitter Bootstrap 2.3 Marcação usando classes nomeadas pelo framework

  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

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

    CSS?

  34. CSS on Steroids

  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; } } }

  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; } } }

  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

  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

  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

  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

  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

  42. <3 <3 <3

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

    CSS

  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

  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"
  46. None

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

    semântico

  48. Grid semântico <article class="tool"> <h1 class="tool-title"> Bourbon Neat </h1> <div

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

  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); }

  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); }

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

  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

  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

  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 <article class="tool"> <h1 class="tool-title">[...]</h1> <div class="tool-content">[...]</div> </article> // Mixins em LESS do Twitter Bootstrap .tool { .makeRow(); } .tool-title { .makeColumn(3); } .tool-content { .makeColumn(9); }

  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

  56. Entendi... E o que faço com a disposição dos elementos

    do meu layout?

  57. CSS Layout

  58. Box model Define tamanhos, margens, paddings... Posiciona elementos em relação

    a outros ou fixa eles na viewport

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

    horizontal (inline)

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

    horizontal (inline)

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

    horizontal (inline)

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

    alinhar facilmente elementos

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

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

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

    grown 0 0 1

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

    0 1 grown

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

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

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

    Flexible_boxes

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

    Flexible_boxes

  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/

  72. Grid Ideal para layouts completos Promissor para definir disposição dos

    componentes Especificação da Microsoft compatível apenas com IE 10+

  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

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

  75. Media Queries

  76. História Primeira especificação é de 2002 iPhone foi lançado em

    2007 W3C recommended standard em 2012

  77. Layout responsivos Termo usado por Ethan Marcotte em artigo Responsive

    Web Design em A List Apart

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

  79. Modularização A buzzword da vez no universo front-end é modularização

    Media queries são globais, com base na viewport

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

    frente

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

  82. None

  83. Meu produto Módulos

  84. Meu produto Layout responsivo

  85. Meu produto Layout responsivo

  86. Meu produto Layout responsivo

  87. None

  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

  89. Obrigado! @jcemer