Léo Balter: JavaScript Idiomático
-
Upload
imasters -
Category
Technology
-
view
934 -
download
1
description
Transcript of Léo Balter: JavaScript Idiomático
![Page 1: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/1.jpg)
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
![Page 2: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/2.jpg)
Maiordificuldade daprogramação
"There are only two hardthings in ComputerScience: cacheinvalidation and namingthings."
— Phil Karlton
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
2 de 26 27/09/13 01:05
![Page 3: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/3.jpg)
Na vida real
"There are only two hardthings in ComputerScience: cacheinvalidation, namingthings, and off-by-oneerrors". *
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
3 de 26 27/09/13 01:05
![Page 4: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/4.jpg)
you give vars a badname.#bonjoviprogramming
— @leobalter
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
4 de 26 27/09/13 01:05
![Page 5: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/5.jpg)
JavaScript deformaConsistente eIdiomá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
![Page 6: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/6.jpg)
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
![Page 7: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/7.jpg)
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
![Page 8: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/8.jpg)
Códigoconsistente econsciente
var foo = ""
bar = ""
qux
bar será tratado comoglobal e qux vai darerro de referência sefor undefined.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
8 de 26 27/09/13 01:05
![Page 9: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/9.jpg)
Law of codestyleconsistency
"Todo código emqualquer aplicaçãodeve parecer como setivesse sido escrito poruma única pessoa,independentemente dequantas pessoastenham contribuído."
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
9 de 26 27/09/13 01:05
![Page 10: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/10.jpg)
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
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
10 de 26 27/09/13 01:05
![Page 11: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/11.jpg)
O que deve terem um guia deestilo 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
![Page 12: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/12.jpg)
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
![Page 13: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/13.jpg)
Whitespace
Tabs ou espaços?
Identação de quantosespaços?
linebreaks
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
13 de 26 27/09/13 01:05
![Page 14: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/14.jpg)
Sintaxeelegante
Quem curte o ASI?
Áspas simples ouduplas?
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
14 de 26 27/09/13 01:05
![Page 15: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/15.jpg)
Nomeação deobjetos
function q(s) {
return document.querySelectorAll(s);
}
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
15 de 26 27/09/13 01:05
![Page 16: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/16.jpg)
function query( selector ) {
return document.querySelectorAll( selector )
}
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
16 de 26 27/09/13 01:05
![Page 17: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/17.jpg)
Comentários
// retorna elementos de acordo com o seletor p
function query( selector ) {
return document.querySelectorAll( selector )
}
function query( selector ) {
return document.querySelectorAll( selector )
}
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
17 de 26 27/09/13 01:05
![Page 18: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/18.jpg)
Idiomas
// renvoie les éléments en fonction de la dern
function requete( selector ) {
return document.querySelectorAll( selector )
}
Se você entendeFrancê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
![Page 19: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/19.jpg)
Padrões deProjeto
Classes
Paradigmas(programaçãofuncional)
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
![Page 20: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/20.jpg)
return {
getData: function() {
return data;
},
setData: function( value ) {
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
![Page 21: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/21.jpg)
Ferramentas
Plato, JSHint, JSPerf,JSBin
Grunt, Yeoman,Bower
QUnit, Jasmine,Mocha
Exemplo: "Comocontribuir com umprojeto".
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
21 de 26 27/09/13 01:05
![Page 22: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/22.jpg)
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.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
22 de 26 27/09/13 01:05
![Page 23: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/23.jpg)
Não tente estabeleceruma única forma paraoutros projetos quenão são seus. Temosmindset diferentes.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
23 de 26 27/09/13 01:05
![Page 24: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/24.jpg)
JS Style Guides
Idiomatic.js
jQuery
Airbnb
Se não quiser seguiralgum, crie um pra seuprojeto e torne elemandatório.
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
24 de 26 27/09/13 01:05
![Page 25: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/25.jpg)
Obrigado!
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
25 de 26 27/09/13 01:05
![Page 26: Léo Balter: JavaScript Idiomático](https://reader033.fdocuments.in/reader033/viewer/2022052907/5590b1741a28abe4058b4675/html5/thumbnails/26.jpg)
JS Idiomático, Convenções e Polêmicas. http://jsbin.com/iGuyixo/7
26 de 26 27/09/13 01:05