Desenvolvedores sempre buscaram escrever menos e fazer mais. Mas como aplicar a filosofia DRY com tecnologias que inicialmente não foram projetadas especificamente para desenvolver apps? Vamos aprender nessa talk quais são as boas práticas, metodologias e ferramentas para repetir menos e produzir mais!
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?
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
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/
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!
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
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!
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.
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.
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.
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”.
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.
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!
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.