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

Don't Repeat Yourself, front-ender!

fernahh
September 26, 2015

Don't Repeat Yourself, front-ender!

A web é uma das principais plataformas de desenvolvimento de aplicações. Hoje (quase) tudo está conectado na internet. Apps cada vez mais dinâmicas aumentaram a complexidade do desenvolvimento de interfaces web. Em consequência desse crescimento, surgiram metodologias e ferramentas para repetir menos código, modularizar e criar componentes para a web. No passado trabalhamos com iframes e no futuro talvez teremos web components funcionando em todos os browsers. Mas e hoje, como podemos aplicar a filosofia DRY?

fernahh

September 26, 2015
Tweet

More Decks by fernahh

Other Decks in Programming

Transcript

  1. Don’t Repeat Yourself [...] Propõe que cada porção de conhecimento

    em um sistema deve possuir uma representação única, de autoridade e livre de ambiguidades em todo o sistema. - Wikipédia
  2. Escrever algo apenas uma vez; Pensar sempre em reuso; Ser

    específico; Se algo tem mais de uma funcionalidade, divida em quantas vezes for necessário para fazer apenas uma. REPRESENTAÇÃO ÚNICA LIVRE DE AMBIGUIDADES
  3. É sempre bom lembrar... 80-90% do tempo de carregamento de

    uma página é gasto no front-end! - Steve Sounders
  4. Componente de tabs do Bootstrap <ul class="nav nav-tabs"> <li class="active"><a

    href="#">Home</a></li> <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul>
  5. Componente de navbar do Bootstrap <ul class="nav navbar-nav"> <li><a href="#">Home</a></li>

    <li><a href="#">Profile</a></li> <li><a href="#">Messages</a></li> </ul>
  6. Perdemos muito tempo em tentativa e erro de retirar pedaços

    e tentando inserir outros pedaços no meio da árvore de HTML e decifrando nomes de classes CSS. - Fabio Akita
  7. Componente do Google Maps <div id="map"></ul> <script> map = new

    google.maps.Map(document.getElementById('map'), { center: {lat: -34.397, lng: 150.644}, zoom: 8 }); </script>
  8. Os problemas com pré-processadores de HTML: - Pré-processadores geralmente são

    mais complexos; - Quase ninguém olha o output dessas ferramentas; - O futuro da linguagem é sempre ela mesma!
  9. - Novos elementos não possuem semântica nenhuma; - Alguns elementos

    possuem comportamento atribuído pelo agent do usuário; - Dependemos de JavaScript para load do conteúdo. Bad parts
  10. - No HTTP/1.1 por ser um problema gigante; - É

    inviável controlar versões de um componente; - O JavaScript do documento importado é executado no mesmo escopo. Bad parts que perigo!
  11. HTML <template id="foo"> <img src=""></img> </template> JavaScript var t =

    document.querySelector('#foo').content(); t.querySelector('img').src = 'avatar.jpg'; document.body.appendChild(t.cloneNode(true));
  12. Good parts - É uma tentativa de padronizar o uso

    de templates; - Todas as soluções atuais são gambiarras.
  13. - O conteúdo só é acessível via JavaScript; - Não

    tem os mesmos benefícios de bibliotecas atuais. Bad parts
  14. HTML <style> #foo: {color: blue;} </style> <h1 id="foo"></h1> JavaScript var

    foo = document.querySelector('#foo').createShadowRoot(); foo.innerHTML = '<p>Foobar</p>';
  15. Good parts - Hoje é a única forma de isolarmos

    marcação, comportamento e estilo; - É a melhor forma de criarmos widgets; - Nos permite criar componentes que possuem parâmetros.
  16. TL;DR ~ Web Componentes nos ajudam a repetir menos? -

    Custom Elements são mais elegantes do que criarmos elementos com Js; - Shadow DOM é infinitamente melhor do que usarmos Iframe; - Template é uma boa tentativa ao invés de uma tag script; - Não é uma revolução, é uma tentativa de oficializarmos práticas já existentes; - Se Web Compontents serão úteis ou não, depende do ecossistema em volta da sua aplicação.
  17. As melhores práticas não estão necessariamente no futuro Nunca se

    falou tanto em componentes para a web nos últimos anos. Porém, para construir componentes precisamos saber usar muito bem os três pilares da web: HTML, CSS, e JavaScript.
  18. CSS

  19. Especificidade de seletores - CSS inline: 1000 pontos; - ID:

    100 pontos; - Classes, pseudo-elementos e atributos: 10 pontos; - Elementos: 1 ponto;
  20. Técnica uilizada para definir o estilo a um seletor mesmo

    em caso de conflitos. O coração do CSS
  21. Definindo o peso de uma regra - Importância; - Origem;

    - Especificidade; - Ordem da declaração.
  22. HERANÇA Herença? OO? Assim como você herda métodos e atributos

    de objetos, no CSS você herda as regras de um elemento pai.
  23. /* * Todo o conteúdo textual do documento * terá

    16px de tamanho, pois herdam do * `body`. */ body { font-size: 16px; }
  24. HERANÇA height, width, margin, padding Propriedades que se referem ao

    box-model não aceitam herança, porém podemos forçar com o valor inherit.
  25. Super poderes para o CSS Pré-processadores deram super poderes para

    desenvolvedores escreverem CSS. Em nosso contexto, @extend e mixins nos trazem benefícios, mas que devem ser usados com bastante cautela.
  26. .error { color: red; } .icon--error { @extend .error; }

    /* * Resultado gerado pelo Sass. */ .error, .icon-error { color: red; }
  27. .other__context .error { color: darken(red, 10%); } /* * Resultado

    gerado pelo Sass. */ .other_context .error, .other_context .icon-error { color: #cc0000; }
  28. Isso é péssimo! Além de tirar o controle do desenvolvedor,

    o Sass irá gerar código desnecessário e prejudicar outras áreas de uma interface.
  29. .error, %error { color: red; } .icon--error { @extend .error;

    } .other__context .error { color: darken(red, 10%); }
  30. /* * Resultado gerado pelo Sass. */ .error { color:

    red; } .icon--error { color: red; } .other__context .error { color: #cc0000; }
  31. Resumindo sobre @extend Evite ao máximo. Talvez você nem precise.

    Se realmente quiser usar, vá de placeholders.
  32. Mixins Mixins são eficientes pois eles injetam código somente onde

    ele foi usado, além de ser muito úteis quando precisamos de parâmetros.
  33. /* * Resultado gerado pelo Sass. */ .icon--error { color:

    red; } .icon--error { color: red; }
  34. @mixin error($critical: false) { @if $critical { color: darken(red, 10%);

    } @else { color: red; } } .icon--error { @include error; } .icon--critical_error { @include error($critical: true); }
  35. /* * Resultado gerado pelo Sass. */ .icon--error { color:

    red; } .icon--critical_error { color: #cc0000; }
  36. Concatenação de classes O uso de composição/concatenação de classes é

    muito usado em frameworks de CSS. O popular Bootstrap faz bastante uso dessa abordagem.
  37. .button { display: inline-block; padding: 10px; color: black; background-color: white;

    } .button--sucess { color: white; background-color: green; }
  38. No CSS nem tudo depende da tecnologia Uma das melhores

    formas de não repetir código, encapsular e escrever menos e produzir mais é aplicando sistemas de arquitetura de CSS.
  39. OOCSS Qualquer estilo da página que se repete pode ser

    aplicado através de uma classe, ou seja, um “objeto”.
  40. SMACSS Foi criado para resolver os problemas do Yahoo Mail.

    É dividido em base, layout, module, state. Não é apenas um sistema de escrita, é uma metodologia.
  41. SMACSS > Base Contém todo o conteúdo global da aplicação,

    ou seja, seletores que não possuem classe ou id. exemplo: body, a, p, h1, ul, etc.
  42. Especificidade Efeito Cascata Herança Arquitetura de CSS Nunca saia escrevendo

    CSS até dar certo. Entenda as regras e planeje seus passos.
  43. Module Pattern Permite organizar bem o código, manter o escopo

    de variáveis e simular privacidade de funções e atributos.
  44. Privacidade de atributos var Counter = (function(){ var count =

    0; return { count: function() { return count; }, increment: function() { return count += 1; } }; })();
  45. Privacidade de atributos var Counter = (function(){ var count =

    0; return { count: function() { return count; }, increment: function() { return count += 1; } }; })(); dessa forma não quebramos o encapsulamento da variável count!
  46. util.js function multiplicacao(a, b) { return a * b; };

    export { multiplicacao } app.js import { multiplicacao } from 'util';
  47. Ferramentas > Bower > bower commands # procurar um pacote

    $ bower search jquery # instalar um pacote $ bower install jquery --save # atualizar um pacote $ bower update jquery # remover um pacote $ bower remove jquery
  48. Ferramentas > Bower > bower.json { "name": "nome-do-app", "private": true,

    "dependencies": { "jquery": "~1.11.1", "normalize-css": "~3.0.1", "modernizr": "~2.8.3", } }
  49. Gerenciadores de pacotes > npm > npm commands # procurar

    um pacote $ npm search jquery # instalar um pacote $ npm install jquery --save # atualizar pacotes $ npm update # remover um pacote $ npm uninstall jquery
  50. - Aprenda bem a web antes de qualquer ferramenta; -

    Converse muito com os (UX) designers do seu time; - Converse muito com os desenvolvedores do seu time; - Documente.