Estrutura de um Front-End eficiente (para iniciantes)
22 gostaram5,953 visualizações
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.
![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.](https://image.slidesharecdn.com/front-endeficiente-130806161044-phpapp01/85/Estrutura-de-um-Front-End-eficiente-para-iniciantes-10-320.jpg)
![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();
});](https://image.slidesharecdn.com/front-endeficiente-130806161044-phpapp01/85/Estrutura-de-um-Front-End-eficiente-para-iniciantes-11-320.jpg)
Estrutura de um Front-End eficiente (para iniciantes)
- 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