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?

Transcript

1. DON’T REPEAT YOURSELF, FRONT-ENDER! @fernahh
2. blog.fernahh.com.br
3. www.organicadigital.com
4. 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
5. 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
6. Escrever menos com tecnologias web está ligado diretamente com performance. - Wikipédia
7. É sempre bom lembrar... 80-90% do tempo de carregamento de uma página é gasto no front-end! - Steve Sounders
8. <span class="icon"></span> <i class="icon"></i> HTML
9. .button {} CSS .botao {} .btn {}
10. if (foo.length === 0) {} JavaScript if (foo === "") {} if (foo.isEmpty()) {}
11. Bibliotecas <script src="//code.jquery.com/jquery-1.2.4.min.js"></script> <script src="https://ajax.googleap is.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.js"></script>
12. Bibliotecas <script src="//code.jquery.com/jquery-1.2.4.min.js"></script> <script src="https://ajax.googleap is.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script> <script src="jquery.js"></script>
13. HTML A reutilização da marcação é correta?
14. 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>
15. 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>
16. 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
17. 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>
18. Server rendered pages are not optional. - Guillermo Rauch http://rauchg.com/2014/7-principles-of-rich-web-applications/
19. HTML enviado pelo servidor de aplicações Meteor. http://tableless.com.br/nos-quebramos-web/
20. %strong{:class => "foo", :id => "bar"} Hello, World! <strong class="foo" id="bar">Hello, World!</strong>
21. strong.foo#bar Hello, World! <strong class="foo" id="bar">Hello, World!</strong>
22. strong.foo#bar Hello, World! <strong class="foo" id="bar">Hello, World!</strong>
23. 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!
24. Mas qual o futuro do HTML?
25. Para alguns desenvolvedores (principalmente os do Google), o futuro do HTML são Web Components.
26. Web Components? Custom Elements HTML Imports Templates Shadow DOM
27. Custom Elements Permite criarmos novos elementos HTML.
28. Component paper-tabs <paper-tabs selected="0"> <paper-tab>Home</paper-tab> <paper-tab>Profile</paper-tab> <paper-tab>Messages</paper-tab> </paper-tabs> https://elements.polymer-project.org/elements/paper-tabs
29. Good parts - Não temos ambiguidade; - Ganhamos tags amigáveis; - Encapsulamento de tags.
30. - 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
31. HTML Imports Permite fazermos load de outros documentos HTML
32. HTML Imports na prática <head> <link rel="import" href="bootstrap.html"> </head> http://www.akitaonrails.com/2014/07/06/web-components-e-uma-revolucao
33. Good parts - É uma forma de empacotarmos compontentes; - Faz todo sentido com HTTP/2.
34. - 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!
35. Templates Permite utilizarmos um mesmo bloco de código através de JavaScript.
36. 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));
37. Good parts - É uma tentativa de padronizar o uso de templates; - Todas as soluções atuais são gambiarras.
38. - O conteúdo só é acessível via JavaScript; - Não tem os mesmos benefícios de bibliotecas atuais. Bad parts
39. Shadow DOM Permite criarmos elementos de DOM independentes e isolados do restante da página.
40. HTML <style> #foo: {color: blue;} </style> <h1 id="foo"></h1> JavaScript var foo = document.querySelector('#foo').createShadowRoot(); foo.innerHTML = '<p>Foobar</p>';
41. 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.
42. - Perdemos o estilo da página a cada shadow DOM. Bad parts
43. 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.
44. 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.
45. Especificidade Efeito Cascata Herança Arquitetura de CSS
46. CSS
47. CSS 2 3 1
48. CSS 2 3 1 !IMPORTANT
49. Especificidade de seletores - CSS inline: 1000 pontos; - ID: 100 pontos; - Classes, pseudo-elementos e atributos: 10 pontos; - Elementos: 1 ponto;
50. Sempre que você usa !important, você quebra a especificidade.
51. https://twitter.com/rafaelrinaldi/status/586216597913739264
52. Técnica uilizada para definir o estilo a um seletor mesmo em caso de conflitos. O coração do CSS
53. Definindo o peso de uma regra - Importância; - Origem; - Especificidade; - Ordem da declaração.
54. 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.
55. /* * Todo o conteúdo textual do documento * terá 16px de tamanho, pois herdam do * `body`. */ body { font-size: 16px; }
56. 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.
57. 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.
58. @extend Permite estender placeholders e classes, porém, muitos autores desencorajam a usar esse recurso.
59. .error { color: red; } .icon--error { @extend .error; }
60. .error { color: red; } .icon--error { @extend .error; } /* * Resultado gerado pelo Sass. */ .error, .icon-error { color: red; }
61. .other__context .error { color: darken(red, 10%); }
62. .other__context .error { color: darken(red, 10%); } /* * Resultado gerado pelo Sass. */ .other_context .error, .other_context .icon-error { color: #cc0000; }
63. 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.
64. .error, %error { color: red; } .icon--error { @extend .error; } .other__context .error { color: darken(red, 10%); }
65. /* * Resultado gerado pelo Sass. */ .error { color: red; } .icon--error { color: red; } .other__context .error { color: #cc0000; }
66. Resumindo sobre @extend Evite ao máximo. Talvez você nem precise. Se realmente quiser usar, vá de placeholders.
67. 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.
68. @mixin error { color: red; } .icon--error { @include error; } .label--error { @include error; }
69. /* * Resultado gerado pelo Sass. */ .icon--error { color: red; } .icon--error { color: red; }
70. @mixin error($critical: false) { @if $critical { color: darken(red, 10%); } @else { color: red; } } .icon--error { @include error; } .icon--critical_error { @include error($critical: true); }
71. /* * Resultado gerado pelo Sass. */ .icon--error { color: red; } .icon--critical_error { color: #cc0000; }
72. 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.
73. .button { display: inline-block; padding: 10px; color: black; background-color: white; } .button--sucess { color: white; background-color: green; }
74. 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.
75. OOCSS Qualquer estilo da página que se repete pode ser aplicado através de uma classe, ou seja, um “objeto”.
76. <button class="button anchor-icon">Abrir</button> estrutura skin
77. BEM Block, Element, Modifier. Preza que o nome das classes sejam auto-explicáveis.
78. <button class="button button__anchor_icon">Abrir</button> módulo elemento
79. 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.
80. 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.
81. SMACSS > Layout Possui seletores agregadores da aplicação. exemplo: #header, #container, #footer.
82. SMACSS > Module Englobam componentes que podem ser reusáveis. exemplo: .search-box, .box, .content-box.
83. SMACSS > State São estados dos módulos da aplicação. exemplo: .is-complete, .is-ready, .is-current.
84. SMACSS > Theme São as diferentes variações dos módulos. exemplo: .button-black, .button-navy.
85. <button class="button button-anchor">Abrir</button> módulo sub-módulo
86. Especificidade Efeito Cascata Herança Arquitetura de CSS Nunca saia escrevendo CSS até dar certo. Entenda as regras e planeje seus passos.
87. COMO APLICAR COMPORTAMENTO AOS COMPONENTES?
88. Module Pattern Permite organizar bem o código, manter o escopo de variáveis e simular privacidade de funções e atributos.
89. Module Pattern (function(){ // ... }());
90. Muitos plugins jQuery usam esse pattern (function($){ // ... }(jQuery));
91. Privacidade de atributos var Counter = (function(){ var count = 0; return { count: function() { return count; }, increment: function() { return count += 1; } }; })();
92. 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!
93. ES6 Modules É a melhor forma de definirmos módulos JavaScript hoje!
94. util.js function multiplicacao(a, b) { return a * b; }; export { multiplicacao }
95. util.js function multiplicacao(a, b) { return a * b; }; export { multiplicacao } app.js import { multiplicacao } from 'util';
96. Revisando: Markup Estilo Comportamento
97. Revisando: Markup Estilo Comportamento Como gerenciar esses componentes?
98. Gerenciadores de pacotes > Bower Gerenciador de pacotes front-end. http://bower.io
99. 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
100. Ferramentas > Bower > .bowerrc { "directory": "vendor/assets/components" }
101. Ferramentas > Bower > bower.json { "name": "nome-do-app", "private": true, "dependencies": { "jquery": "~1.11.1", "normalize-css": "~3.0.1", "modernizr": "~2.8.3", } }
102. Gerenciadores de pacotes > npm Gerenciador de pacote oficial do NodeJS. http://npmjs.com
103. 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
104. Gerenciadores de pacotes > npm > package.json { "name": "nome-do-app", "private": true, "devDependencies": {} }
105. Revisando: Markup Estilo Comportamento Gerenciar componentes
106. - 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.
107. OBRIGADO! @fernahh fernahh@gmail.com blog.fernahh.com.br