léo balter: javascript idiomático

JS Idiomático,Convenções ePolêmicas.Leo Balter

(@leobalter)

2013-09-25

JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7

1 de 26 27/09/13 01:05

Maiordificuldade daprogramação

"There are only two hardthings in ComputerScience: cacheinvalidation and namingthings."

— Phil Karlton


2 de 26 27/09/13 01:05

Na vida real

"There are only two hardthings in ComputerScience: cacheinvalidation, namingthings, and off-by-oneerrors". *


3 de 26 27/09/13 01:05

you give vars a badname.#bonjoviprogramming

— @leobalter


4 de 26 27/09/13 01:05

JavaScript deformaConsistente eIdiomática

var foo = "";

var bar = "";

var qux;


5 de 26 27/09/13 01:05

var foo = "",

bar = "",

qux;


6 de 26 27/09/13 01:05

var foo = ""

var bar = ""

var qux


7 de 26 27/09/13 01:05

Códigoconsistente econsciente

var foo = ""

bar = ""

qux

bar será tratado comoglobal e qux vai darerro de referência sefor undefined.


8 de 26 27/09/13 01:05

Law of codestyleconsistency

"Todo código emqualquer aplicaçãodeve parecer como setivesse sido escrito poruma única pessoa,independentemente dequantas pessoastenham contribuído."


9 de 26 27/09/13 01:05

Assim que vocêassume o estilo de umcódigo ele deve setornar lei e todosdevem seguir o mesmoestilo.

"Argumentos além doestilo são inúteis. Devehaver um guia deestilo, e você devesegui-lo". RebeccaMurphey


10 de 26 27/09/13 01:05

O que deve terem um guia deestilo de JS?

Whitespace

Sintaxe bonita

Nomeação de objetos

Comentários

Idiomas


11 de 26 27/09/13 01:05

Padrões de projeto

...


12 de 26 27/09/13 01:05

Whitespace

Tabs ou espaços?

Identação de quantosespaços?

linebreaks


13 de 26 27/09/13 01:05

Sintaxeelegante

Quem curte o ASI?

Áspas simples ouduplas?


14 de 26 27/09/13 01:05

Nomeação deobjetos

function q(s) {

return document.querySelectorAll(s);

}


15 de 26 27/09/13 01:05

function query( selector ) {

return document.querySelectorAll( selector )

}


16 de 26 27/09/13 01:05

Comentários

// retorna elementos de acordo com o seletor p



}



}


17 de 26 27/09/13 01:05

Idiomas

// renvoie les éléments en fonction de la dern

function requete( selector ) {


}

Se você entendeFrancês e Inglês,parabéns.


18 de 26 27/09/13 01:05

Padrões deProjeto

Classes

Paradigmas(programaçãofuncional)

etc

(function( global ) {

var Module = (function() {

var data = "secret";


19 de 26 27/09/13 01:05

return {

getData: function() {

return data;

},

setData: function( value ) {

return ( data = value );

}

};

})();

global.Module = Module;

})( this );


20 de 26 27/09/13 01:05

Ferramentas

Plato, JSHint, JSPerf,JSBin

Grunt, Yeoman,Bower

QUnit, Jasmine,Mocha

Exemplo: "Comocontribuir com umprojeto".


21 de 26 27/09/13 01:05

Qual o melhorguia de estilosde JS?

Nenhum.

Não há bala de prata.O melhor estilo é o quea sua equipe melhor seadapta. A flexibilidadedo JS deve ser usada aoseu favor.


22 de 26 27/09/13 01:05

Não tente estabeleceruma única forma paraoutros projetos quenão são seus. Temosmindset diferentes.


23 de 26 27/09/13 01:05

JS Style Guides

Idiomatic.js

Google

jQuery

Airbnb

Se não quiser seguiralgum, crie um pra seuprojeto e torne elemandatório.


24 de 26 27/09/13 01:05

Obrigado!


25 de 26 27/09/13 01:05


26 de 26 27/09/13 01:05

léo balter: javascript idiomático

Technology

e polmicas

leobalter js idiomtico

secret js idiomtico

linebreaks js idiomtico

var qux js idiomtico

phil karlton js idiomtico

rebecca murphey js idiomtico

jsbin grunt