ESTRUTURA DE UMFRONT-ENDEFICIENTE (PARA INICIANTES)

Um breve guia demelhores práticas

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 VILARFront-End Engineer @ Vertex Tecnologia

SOBREWTF?

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.

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

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

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

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

DESMEMBRAMENTOE 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

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”

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.

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

});

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.

SEMÂNTICAE 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).

ESCREVENDO HTML EFICIENTEENTENDER 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:

ESCREVENDO HTML EFICIENTEEXEMPLO DE TEXTO ESTÁTICO

<h3>Descrição da galeria de imagens</h3>

<figure>

<img src=”img.jpg” />

</figure>

<figure>

<img src=”img.jpg” />

</figure>

ESCREVENDO HTML EFICIENTEEXEMPLO 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>

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.

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

É ISSO AÍ,ATÉ LOGO.

http://about.me/vilarhttp://sergiovilar.com.brhttp://github.com/sergiovilar