JS Idiomático,
Convenções e
Polê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
Maior
dificuldade da
programação
"There are only two hard
things in Computer
Science: cache
invalidation and naming
things."
— Phil Karlton
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
2 de 26 27/09/13 01:05
Na vida real
"There are only two hard
things in Computer
Science: cache
invalidation, naming
things, and off-by-one
errors". *
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
3 de 26 27/09/13 01:05
you give vars a bad
name.
#bonjoviprogramming
— @leobalter
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
4 de 26 27/09/13 01:05
JavaScript de
forma
Consistente e
Idiomática
var foo = "";
var bar = "";
var qux;
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
5 de 26 27/09/13 01:05
var foo = "",
bar = "",
qux;
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
6 de 26 27/09/13 01:05
var foo = ""
var bar = ""
var qux
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
7 de 26 27/09/13 01:05
Código
consistente e
consciente
var foo = ""
bar = ""
qux
bar será tratado como
global e qux vai dar
erro de referência se
for undefined.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
8 de 26 27/09/13 01:05
Law of code
style
consistency
"Todo código em
qualquer aplicação
deve parecer como se
tivesse sido escrito por
uma única pessoa,
independentemente de
quantas pessoas
tenham contribuído."
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
9 de 26 27/09/13 01:05
Assim que você
assume o estilo de um
código ele deve se
tornar lei e todos
devem seguir o mesmo
estilo.
"Argumentos além do
estilo são inúteis. Deve
haver um guia de
estilo, e você deve
segui-lo". Rebecca
Murphey
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
10 de 26 27/09/13 01:05
O que deve ter
em um guia de
estilo de JS?
Whitespace
Sintaxe bonita
Nomeação de objetos
Comentários
Idiomas
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
11 de 26 27/09/13 01:05
Padrões de projeto
...
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
12 de 26 27/09/13 01:05
Whitespace
Tabs ou espaços?
Identação de quantos
espaços?
linebreaks
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
13 de 26 27/09/13 01:05
Sintaxe
elegante
Quem curte o ASI?
Áspas simples ou
duplas?
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
14 de 26 27/09/13 01:05
Nomeação de
objetos
function q(s) {
return document.querySelect
}
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
15 de 26 27/09/13 01:05
function query( selector ) {
return document.querySelect
}
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
16 de 26 27/09/13 01:05
Comentários
// retorna elementos de acord
function query( selector ) {
return document.querySelect
}
function query( selector ) {
return document.querySelect
}
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
17 de 26 27/09/13 01:05
Idiomas
// renvoie les éléments en fo
function requete( selector )
return document.querySelect
}
Se você entende
Francês e Inglês,
parabéns.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
18 de 26 27/09/13 01:05
Padrões de
Projeto
Classes
Paradigmas
(programação
funcional)
etc
(function( global ) {
var Module = (function() {
var data = "secret";
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
19 de 26 27/09/13 01:05
return {
getData: function() {
return data;
},
setData: function( valu
return ( data = value
}
};
})();
global.Module = Module;
})( this );
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
20 de 26 27/09/13 01:05
Ferramentas
Plato, JSHint, JSPerf,
JSBin
Grunt, Yeoman,
Bower
QUnit, Jasmine,
Mocha
Exemplo: "Como
contribuir com um
projeto".
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
21 de 26 27/09/13 01:05
Qual o melhor
guia de estilos
de JS?
Nenhum.
Não há bala de prata.
O melhor estilo é o que
a sua equipe melhor se
adapta. A flexibilidade
do JS deve ser usada ao
seu favor.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
22 de 26 27/09/13 01:05
Não tente estabelecer
uma única forma para
outros projetos que
não são seus. Temos
mindset diferentes.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
23 de 26 27/09/13 01:05
JS Style Guides
Idiomatic.js
Google
jQuery
Airbnb
Se não quiser seguir
algum, crie um pra seu
projeto e torne ele
mandatório.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
24 de 26 27/09/13 01:05
Obrigado!
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
25 de 26 27/09/13 01:05
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
26 de 26 27/09/13 01:05

Léo Balter: JavaScript Idiomático

  • 1.
    JS Idiomático, Convenções e Polêmicas. LeoBalter (@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
  • 2.
    Maior dificuldade da programação "There areonly two hard things in Computer Science: cache invalidation and naming things." — Phil Karlton JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 2 de 26 27/09/13 01:05
  • 3.
    Na vida real "Thereare only two hard things in Computer Science: cache invalidation, naming things, and off-by-one errors". * JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 3 de 26 27/09/13 01:05
  • 4.
    you give varsa bad name. #bonjoviprogramming — @leobalter JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 4 de 26 27/09/13 01:05
  • 5.
    JavaScript de forma Consistente e Idiomática varfoo = ""; var bar = ""; var qux; JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 5 de 26 27/09/13 01:05
  • 6.
    var foo ="", bar = "", qux; JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 6 de 26 27/09/13 01:05
  • 7.
    var foo ="" var bar = "" var qux JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 7 de 26 27/09/13 01:05
  • 8.
    Código consistente e consciente var foo= "" bar = "" qux bar será tratado como global e qux vai dar erro de referência se for undefined. JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 8 de 26 27/09/13 01:05
  • 9.
    Law of code style consistency "Todocódigo em qualquer aplicação deve parecer como se tivesse sido escrito por uma única pessoa, independentemente de quantas pessoas tenham contribuído." JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 9 de 26 27/09/13 01:05
  • 10.
    Assim que você assumeo estilo de um código ele deve se tornar lei e todos devem seguir o mesmo estilo. "Argumentos além do estilo são inúteis. Deve haver um guia de estilo, e você deve segui-lo". Rebecca Murphey JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 10 de 26 27/09/13 01:05
  • 11.
    O que deveter em um guia de estilo de JS? Whitespace Sintaxe bonita Nomeação de objetos Comentários Idiomas JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 11 de 26 27/09/13 01:05
  • 12.
    Padrões de projeto ... JSIdiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 12 de 26 27/09/13 01:05
  • 13.
    Whitespace Tabs ou espaços? Identaçãode quantos espaços? linebreaks JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 13 de 26 27/09/13 01:05
  • 14.
    Sintaxe elegante Quem curte oASI? Áspas simples ou duplas? JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 14 de 26 27/09/13 01:05
  • 15.
    Nomeação de objetos function q(s){ return document.querySelect } JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 15 de 26 27/09/13 01:05
  • 16.
    function query( selector) { return document.querySelect } JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 16 de 26 27/09/13 01:05
  • 17.
    Comentários // retorna elementosde acord function query( selector ) { return document.querySelect } function query( selector ) { return document.querySelect } JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 17 de 26 27/09/13 01:05
  • 18.
    Idiomas // renvoie leséléments en fo function requete( selector ) return document.querySelect } Se você entende Francês e Inglês, parabéns. JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 18 de 26 27/09/13 01:05
  • 19.
    Padrões de Projeto Classes Paradigmas (programação funcional) etc (function( global) { var Module = (function() { var data = "secret"; JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 19 de 26 27/09/13 01:05
  • 20.
    return { getData: function(){ return data; }, setData: function( valu return ( data = value } }; })(); global.Module = Module; })( this ); JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 20 de 26 27/09/13 01:05
  • 21.
    Ferramentas Plato, JSHint, JSPerf, JSBin Grunt,Yeoman, Bower QUnit, Jasmine, Mocha Exemplo: "Como contribuir com um projeto". JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 21 de 26 27/09/13 01:05
  • 22.
    Qual o melhor guiade estilos de JS? Nenhum. Não há bala de prata. O melhor estilo é o que a sua equipe melhor se adapta. A flexibilidade do JS deve ser usada ao seu favor. JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 22 de 26 27/09/13 01:05
  • 23.
    Não tente estabelecer umaúnica forma para outros projetos que não são seus. Temos mindset diferentes. JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 23 de 26 27/09/13 01:05
  • 24.
    JS Style Guides Idiomatic.js Google jQuery Airbnb Senão quiser seguir algum, crie um pra seu projeto e torne ele mandatório. JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7 24 de 26 27/09/13 01:05
  • 25.
    Obrigado! JS Idiomático, Convençõese Polêmicas. http://jsbin.com/iGuyixo/7 25 de 26 27/09/13 01:05
  • 26.
    JS Idiomático, Convençõese Polêmicas. http://jsbin.com/iGuyixo/7 26 de 26 27/09/13 01:05