estrutura de um front-end eficiente (para iniciantes)
TRANSCRIPT
![Page 1: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/1.jpg)
ESTRUTURA DE UMFRONT-ENDEFICIENTE (PARA INICIANTES)
Um breve guia demelhores práticas
![Page 2: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/2.jpg)
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
![Page 3: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/3.jpg)
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.
![Page 4: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/4.jpg)
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
![Page 5: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/5.jpg)
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
![Page 6: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/6.jpg)
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
![Page 7: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/7.jpg)
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
![Page 8: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/8.jpg)
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
![Page 9: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/9.jpg)
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”
![Page 10: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/10.jpg)
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.
![Page 11: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/11.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();
});
![Page 12: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/12.jpg)
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.
![Page 13: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/13.jpg)
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).
![Page 14: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/14.jpg)
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:
![Page 15: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/15.jpg)
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>
![Page 16: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/16.jpg)
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>
![Page 17: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/17.jpg)
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.
![Page 18: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/18.jpg)
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”.
![Page 19: Estrutura de um Front-End eficiente (para iniciantes)](https://reader033.vdocuments.com.br/reader033/viewer/2022052907/5590b0e01a28abea058b4615/html5/thumbnails/19.jpg)
É ISSO AÍ,ATÉ LOGO.
http://about.me/vilarhttp://sergiovilar.com.brhttp://github.com/sergiovilar