don't repeat yourself front-ender

DON’T REPEAT
YOURSELF,
FRONT-ENDER!
@fernahh

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

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

Escrever menos com tecnologias web está ligado
diretamente com performance.
- Wikipédia

É sempre bom lembrar...
80-90% do tempo de carregamento de uma página é
gasto no front-end!
- Steve Sounders

<span class="icon"></span>
<i class="icon"></i>
HTML

.button {}
CSS
.botao {}
.btn {}

if (foo.length === 0) {}
JavaScript
if (foo === "") {}
if (foo.isEmpty()) {}

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>

HTML
A reutilização da marcação é correta?

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>

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>

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

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>

Server rendered pages are not optional.
- Guillermo Rauch
http://rauchg.com/2014/7-principles-of-rich-web-applications/

HTML enviado pelo
servidor de
aplicações Meteor.
http://tableless.com.br/nos-quebramos-web/

%strong{:class => "foo", :id => "bar"} Hello, World!
<strong class="foo" id="bar">Hello, World!</strong>

strong.foo#bar Hello, World!
<strong class="foo" id="bar">Hello, World!</strong>

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!

Para alguns desenvolvedores
(principalmente os do Google), o
futuro do HTML são
Web Components.

Web Components?
Custom
Elements
HTML
Imports
Templates Shadow
DOM

Custom Elements
Permite criarmos novos elementos HTML.

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

Good parts
- Não temos ambiguidade;
- Ganhamos tags amigáveis;
- Encapsulamento de tags.

- 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

HTML Imports
Permite fazermos load de outros
documentos HTML

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

Good parts
- É uma forma de empacotarmos compontentes;
- Faz todo sentido com HTTP/2.

- 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!

Templates
Permite utilizarmos um mesmo bloco de
código através de JavaScript.

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

Good parts
- É uma tentativa de padronizar o uso de templates;
- Todas as soluções atuais são gambiarras.

- O conteúdo só é acessível via JavaScript;
- Não tem os mesmos benefícios de bibliotecas atuais.
Bad parts

Shadow DOM
Permite criarmos elementos de DOM
independentes e isolados do restante da
página.

HTML
<style> #foo: {color: blue;} </style>
<h1 id="foo"></h1>
JavaScript
var foo = document.querySelector('#foo').createShadowRoot();
foo.innerHTML = '<p>Foobar</p>';

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.

- Perdemos o estilo da página a cada shadow DOM.
Bad parts

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.

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.

Especificidade Efeito Cascata Herança Arquitetura
de CSS

Especificidade de seletores
- CSS inline: 1000 pontos;
- ID: 100 pontos;
- Classes, pseudo-elementos e atributos: 10 pontos;
- Elementos: 1 ponto;

Sempre que você usa !important,
você quebra a especificidade.

https://twitter.com/rafaelrinaldi/status/586216597913739264

Técnica uilizada para definir o estilo a um seletor mesmo em caso de
conflitos.
O coração do CSS

Definindo o peso de uma regra
- Importância;
- Origem;
- Especificidade;
- Ordem da declaração.

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.

/*
* Todo o conteúdo textual do documento
* terá 16px de tamanho, pois herdam do
* `body`.
*/
body {
font-size: 16px;
}

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.

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.

@extend
Permite estender placeholders e classes, porém, muitos autores
desencorajam a usar esse recurso.

.error {
color: red;
}
.icon--error {
@extend .error;
}

.error {
color: red;
}
.icon--error {
@extend .error;
}
/*
* Resultado gerado pelo Sass.
*/
.error, .icon-error {
color: red;
}

.other__context .error {
color: darken(red, 10%);
}

}
/*
*/
.other_context .error, .other_context .icon-error {
color: #cc0000;
}

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.

.error, %error {
color: red;
}
.icon--error {
@extend .error;
}
}

/*
*/
.error {
color: red;
}
.icon--error {
color: red;
}
color: #cc0000;
}

Resumindo sobre @extend
Evite ao máximo. Talvez você nem precise. Se realmente quiser usar, vá
de placeholders.

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.

@mixin error {
color: red;
}
.icon--error {
@include error;
}
.label--error {
@include error;
}

/*
*/
.icon--error {
color: red;
}
.icon--error {
color: red;
}

@mixin error($critical: false) {
@if $critical {
} @else {
color: red;
}
}
.icon--error {
@include error;
}
.icon--critical_error {
@include error($critical: true);
}

/*
*/
.icon--error {
color: red;
}
.icon--critical_error {
color: #cc0000;
}

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.

.button {
display: inline-block;
padding: 10px;
color: black;
background-color: white;
}
.button--sucess {
color: white;
background-color: green;
}

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.

OOCSS
Qualquer estilo da página que se repete pode ser aplicado através de
uma classe, ou seja, um “objeto”.

<button class="button anchor-icon">Abrir</button>
estrutura
skin

BEM
Block, Element, Modifier. Preza que o nome das classes sejam auto-
explicáveis.

<button class="button button__anchor_icon">Abrir</button>
módulo
elemento

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.

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.

SMACSS > Layout
Possui seletores agregadores da aplicação.
exemplo: #header, #container, #footer.

SMACSS > Module
Englobam componentes que podem ser reusáveis.
exemplo: .search-box, .box, .content-box.

SMACSS > State
São estados dos módulos da aplicação.
exemplo: .is-complete, .is-ready, .is-current.

SMACSS > Theme
São as diferentes variações dos módulos.
exemplo: .button-black, .button-navy.

<button class="button button-anchor">Abrir</button>
módulo
sub-módulo

Especificidade Efeito Cascata Herança Arquitetura
de CSS
Nunca saia escrevendo CSS até dar certo.
Entenda as regras e planeje seus passos.

COMO APLICAR
COMPORTAMENTO AOS
COMPONENTES?

Module Pattern
Permite organizar bem o código, manter o escopo de variáveis e simular
privacidade de funções e atributos.

Module Pattern
(function(){
// ...
}());

Muitos plugins jQuery usam esse pattern
(function($){
// ...
}(jQuery));

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

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!

ES6 Modules
É a melhor forma de definirmos módulos JavaScript hoje!

util.js
function multiplicacao(a, b) {
return a * b;
};
export { multiplicacao }

util.js
function multiplicacao(a, b) {
return a * b;
};
export { multiplicacao }
app.js
import { multiplicacao } from 'util';

Revisando:
Markup
Estilo
Comportamento

Revisando:
Markup
Estilo
Comportamento
Como gerenciar esses componentes?

Gerenciadores de pacotes > Bower
Gerenciador de pacotes
front-end.
http://bower.io

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

Ferramentas > Bower > .bowerrc
{
"directory": "vendor/assets/components"
}

Ferramentas > Bower > bower.json
{
"name": "nome-do-app",
"private": true,
"dependencies": {
"jquery": "~1.11.1",
"normalize-css": "~3.0.1",
"modernizr": "~2.8.3",
}
}

Gerenciadores de pacotes > npm
Gerenciador de pacote
oficial do NodeJS.
http://npmjs.com

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

Gerenciadores de pacotes > npm > package.json
{
"name": "nome-do-app",
"private": true,
"devDependencies": {}
}

Revisando:
Markup
Estilo
Comportamento
Gerenciar componentes

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

OBRIGADO!
@fernahh
fernahh@gmail.com
blog.fernahh.com.br

don't repeat yourself front-ender

Mais conteúdo relacionado

Mais procurados

Destaque

Semelhante a don't repeat yourself front-ender

Mais de tdc-globalcode

Último

don't repeat yourself front-ender