Este documento fornece diretrizes sobre a estruturação eficiente de um front-end, incluindo a organização de pastas para CSS, imagens e JavaScript, além de recomendações sobre modularização, semântica e escrita de HTML.

1. ESTRUTURA
DE UM
FRONT-END
EFICIENTE(PARA INICIANTES)
Um breve guia de
melhores práticas

2. QUEM
Desenvolvedor Php e Javascript focado
em Wordpress, CakePHP, social apps e
client-side apps.
Desenvolve pra web há mais de 5 anos.
SÉRGIO VILAR
Front-End Engineer @ Vertex Tecnologia

3. SOBRE
WTF?
O MODO COMO UM DESENVOLVEDOR
ORGANIZA SEU PROJETO DIZ MUITO
SOBRE ELE.
Muitos front-ends ao começar na área,
não possuem uma base sólida de como
funciona o back-end de uma aplicação.
Este guia tem como objetivo mostrar as
melhores práticas para uma melhor
produtividade de toda a equipe
partindo de uma boa organização.

4. ESTRUTURA
DE PASTAS
É importante que esteja claro sobre
onde determinado trecho de código
está no seu projeto. Veja esta estrutura:
/- css
/- pages
- ... (seus arquivos .css)
- main.css
/- img
/- sample
- ... ( suas imagens na raiz da pasta)
/- js
/- components
/- modules
- main.js

5. ESTRUTURA
DE PASTAS
CSS
main.css: importa os arquivos
correspondentes a cada página
pages: pasta que contém os
arquivos .css para cada página do seu
projeto

6. ESTRUTURA
DE PASTAS
IMG
sample: pasta que contém todas as
imagens de exemplo que você usou e
que serão preenchidas pelo back-end
... : as imagens ou sprites do seu projeto
vão na raiz da pasta img

7. ESTRUTURA
DE PASTAS
JS
components: nesta pasta ficarão as libs
que você está usando no seu projeto,
você pode apontar o bower para esta
pasta.
modules: nesta pasta fica cada módulo
responsável por cada página no seu
projeto front-end
main.js: seu arquivo javascript principal

8. DESMEMBRAMENTO
E COMO ISTO IRÁ TE SALVAR
Com uma aplicação
desmembrada, debugar
qualquer coisa é mamão-
com-açúcar, aproveite!
Cada desenvolvedor poderá
trabalhar em uma parte da
aplicação sem atrapalhar o
trabalho do colega.
Modularizando sua
aplicação, você saberá
exatamente onde procurar
ou implementar
determinada funcionalidade
para determinada página.
CADA UM NO SEU QUADRADO DEBUG FTW DESENVOLVIMENTO EM PARALELO

9. DESMEMBRAMENTO
CSS
Use seu arquivo main.css para importar
o CSS específico para cada página.
Ex:
@import “pages/home.css”
@import “pages/contato.css”

10. DESMEMBRAMENTO
JAVASCRIPT
Você pode usar o require.js para carregar
dinamicamente os arquivos .js para cada
módulo.
Ex:
var module = $('body').attr('rel');
require(['/js/modules/'+module+'.js'],function(Module){
Module.init();
});
Neste exemplo, armazenamos o módulo no qual
queremos carregar no atributo “rel” da tag body.

11. DESMEMBRAMENTO
JAVASCRIPT
E como fica esse módulo?
define('myModule', [], function(){
function Module(){
this.init = function(){
// aqui você inicializa o módulo
this.events();
};
this.events = function(){
// método de exemplo
};
}
return new Module();
});

12. A CÉSAR O QUE É DE CÉSAR
NO CSS OU NO HTML?
Tudo que é estático fica no CSS, como
aquela setinha ou aquele bg.
Tudo que é dinâmico fica no HTML.
Dessa forma, o back-end da aplicação
poderá manusear de acordo com os
dados oriundos do banco de dados.
DICA: Preferencialmente use a tag img
para conteúdo dinâmico e a
propriedade background do CSS para
conteúdo estático.

13. SEMÂNTICA
E UM POUQUINHO DE MINIMALISMO
Use apenas tags HTML necessárias.
Não coloque uma tag a mais para
resolver algo que você poderia fazer
com CSS.
Leia a documentação do HTML no site
da W3C e entenda para quê cada tag
serve (você pode até descobrir algumas
tags novas).

14. ESCREVENDO HTML EFICIENTE
ENTENDER O PROJETO É PRECISO!
Ao escrever seu HTML, preste muita
atenção para o que é estático e
dinâmico, isso fará total diferença.
Aquele texto é estático ou dinâmico?
Caso seja dinâmico, escreva o HTML de
acordo com isso.
Veja os dois exemplos a seguir:

15. ESCREVENDO HTML EFICIENTE
EXEMPLO DE TEXTO ESTÁTICO
<h3>Descrição da galeria de imagens</h3>
<figure>
<img src=”img.jpg” />
</figure>
<figure>
<img src=”img.jpg” />
</figure>

16. ESCREVENDO HTML EFICIENTE
EXEMPLO DE TEXTO DINÂMICO
<figure>
<img src=”img.jpg” />
<figcaption>Descrição da foto</figcaption>
</figure>
<figure>
<img src=”img.jpg” />
<figcaption>Descrição da foto</figcaption>
</figure>

17. HEADER E FOOTER?
COMO O BACK-END VERÁ SEU HTML
O header da sua página HTML é toda a
parte comum a todas as páginas no
início do arquivo, o footer é toda a parte
comum no final do arquivo.
Para o back-end da aplicação, ter cada
página com um head e footer diferente
será uma tortura. Sim, ele vai te xingar
muito.

18. HEADER E FOOTER?
COMO O BACK-END VERÁ SEU HTML
Use o mesmo header e footer para
todas as páginas HTML, se precisar de
algo diferente, faça no módulo do
javascript correspondente.
É preciso que o que exista de diferente
entre suas páginas HTML seja apenas o
“miolo”.

19. É ISSO AÍ,
ATÉ LOGO.
http://about.me/vilar
http://sergiovilar.com.br
http://github.com/sergiovilar