Boas práticas front-end

Boas práticas de desenvolvimento FRONT-END GUILHERME PONTES guilhermepontes.com

guilhermepontes.com FRONT-END

Beleza, mas vamos falar do que? guilhermepontes.com

1. CONSISTÊNCIA NO CÓDIGO 2. MELHORES PRÁTICAS guilhermepontes.com

Pilares do Desenvolvimento Front-End guilhermepontes.com

1.  Separação da apresentação, conteúdo e comportamento. 2. Marcação deve
ser bem escrita, semanticamente correta e imprenscindivelmente válida. 3. Javascript deve melhorar a experiência progressivamente. guilhermepontes.com

Mas antes, vamos fazer um juramento! guilhermepontes.com

Eu, ____, juro que vou TENTAR (e conseguir #ftw) a
seguir as dicas aqui propostas. guilhermepontes.com

Práticas gerais guilhermepontes.com

Compreensão e legibilidade guilhermepontes.com •  Escolha da língua para desenvolvimento.
•  Variáveis, métodos, classes e comentários. •  Espaços, quebras de linhas e caracteres ASCII. •  Indentação.

Markup guilhermepontes.com

Boas práticas de Markup guilhermepontes.com •  HTML5 BoilerPlate. •  Doctype.
(<!doctype html>) •  Codiﬁcação de Caracteres. (<meta charset=“utf-8” />)

Boas práticas de Markup HTML guilhermepontes.com •  Use o elemento
<p> para paragráfos ao invez de vários <br />. •  Faça uso do <dl> e <blockquote>, apropriadamente. •  Itens na lista de um form devem ser sempre usados <ul>, <ol> ou <dl>, nunca o conglomerado de <div> ou <p>. •  Use corretamente o <label> com o <input>, ele impacta muito na usabilidade, e este elemento deve sempre estar com o css cursor; pointer, para mostrar que o elemento é clicável. •  Nunca use os atributos de tamanho em <input>. •  Use um comentário no ﬁnal de cada <div> ou elemento de bloco. •  Tabelas não devem ser usadas para layout. •  Usar microdata e microformats •  Usar corretamente os elementos <thead>, <tbody>, <th> em forms.

CSS guilhermepontes.com

Dicas CSS guilhermepontes.com •  Não usar o @import •  Não
fazer CSS INLINE via HTML. •  Usar normalize.css ou algum reset. •  Entender as especiﬁcações de seletores. •  Evitar seletores que gastam muito processamento. •  Validar o código.

Boas práticas de CSS guilhermepontes.com •  Deﬁnir padrões para elementos
das páginas •  Usar classes em vez de IDs. •  Combinar seletores. •  Usar a unidade PX. •  Evitar o uso de Hacks •  IE6: div { _color: blue; } •  IE7: div { *color: blue; } •  IE8: div { color: blue\9; } •  Usar a técnica de sprites

Boas práticas de textos e cabeçalhos guilhermepontes.com •  Em textos,
usar line-height: 1.2x maior que a fonte. •  Os cabeçalhos devem ter ordem hierárquica no estilo. •  Usar border-bottom, junto com text-decoration: none, para efeitos em links. •  Usar font-face, ao invés de imagens. •  Faça bom uso do CSS3.

Javascript guilhermepontes.com

Dicas Javascript guilhermepontes.com •  99% do código JS deve estar
em arquivos externos, e devem ser inseridos no final da tag <body>. •  Não use document.write(); •  Todas variáveis booleanas devem começar com “is”. •  Exemplo: var isValid = (test.value >= 4 && test.sucess); •  Não minifique o código manualmente, a única excessão é o tradicional i do loop for. •  Arquivos de configuração devem estar no topo do código. •  Esforce-se para criar funções que podem ser generalizadas. •  Comente seu código, isso ajuda na descoberta sobre o funcionamento do código.

Padrões para um melhor Javascript guilhermepontes.com •  Escreva códigos sustentáveis.
•  Não use eval(), eval is evil. •  Para conversão de números use parseInt(); •  Arquivos de conﬁguração devem estar no topo do código. •  Abra e feche as chaves no local adequado. •  Use o padrão CamelCase para “Namespaces” e “Classes”. •  Escreva comentários. •  Evite usar o void(), with, continue.

Variáveis, classes, ids e data-attr guilhermepontes.com •  lowerCamelCase •  lowercase

Delegação de eventos guilhermepontes.com •  jQuery on() •  jQuery live()
•  Ex: •  $(“button”).on(“click hover dblclick”, handler);

Espaços guilhermepontes.com •  $( “#item” ).on( “click”, handler );

Javascript Module Pattern guilhermepontes.com

Definindo um “namespace” guilhermepontes.com var Perceptool = Perceptool || {};

Definindo uma “classe” guilhermepontes.com Perceptool.Utils = {}

Variáveis guilhermepontes.com Perceptool.Utils = { conﬁg : video : {
width: 450, height: 300 }, image : { width: 250, height: 250 } } var pct = Perceptool.Utils; pct.conﬁg.image.width; //250

Métodos guilhermepontes.com Perceptool.Utils = { ﬂoorNumber : function( n )
{ return ~~n; }, showMessage : function( msg ) { return alert( msg ); } } var pct = Perceptools.Utils; pct.showMessage( pct.ﬂoorNumber( 6.3 ) ); //6

Separando eventos de funcionalidade guilhermepontes.com Perceptool.Utils = { bind :
function() { $( “#item” ).on( “dblclick”, this.remove ); }, remove : function() { $( this ).slideUp( “slow” ); } } Perceptool.Utils.bind();

Inicialização e cache de elementos guilhermepontes.com Perceptool.Utils = { init
: function() { this.cache(); this.bind(); }, cache : function() { this.$elem = $( “.elem” ); }, bind : function() { this.$elem.on( “click”, handler ); } handler: function() { //do something } } Perceptool.Utils.init();

Métodos e variáveis privadas guilhermepontes.com Perceptool.Lib = (function(){ var foo
= false; //variavel privada var bar = function( i ) { return i; } //metodo privado return { app : function(){ alert( bar( foo ) ); } } })(); Perceptool.Lib.app(); //false Perceptool.Lib.bar(); //TypeError: Object #<Object> has no method 'bar'

Tá, você mostrou o código e não falou nada com
nada. (Eu sei que você pensou nisso! MWAHAHAHA) guilhermepontes.com

Quando e porque guilhermepontes.com

SCALABLE

TEAM-READY

SCALABLE LOCALIZED var Modulo = ( function ( window, document,
$ ) {! "// ….! })( window, document, jQuery );!

SCALABLE EXTENSIBLE

guilhermepontes.com Perceptool.Utils.fn = function( param ) { // do something
} Ou... Perceptool.Lib.prototype.foo = function( bar ) { // … }

NO HEADACHES

Conclusão

Vejo vocês em breve.

Obrigado! GUILHERME PONTES guilhermepontes.com @guiiipontes facebook.com/guiiipontes /in/guilhermepontes Next: Responsive WebDesign
Acessibilidade / Performance

Boas práticas front-end

Boas práticas front-end

More Decks by guilherme

Other Decks in Programming

Featured

Transcript