O documento discute princípios de programação em JavaScript, incluindo comentários, nomeação de variáveis e funções, módulos, namespaces e o princípio SOLID de ter classes/módulos com uma única responsabilidade. Ele recomenda escrever código conciso, claro e fácil de ler para facilitar a manutenção no futuro.

1. @rafael_sps
Javascript Ilegívl

2. Quem?
Desenvolvedor web
no Grupo RBS

5. /* Comentários */
Não precisa ser o “capitão óbvio”

6. // get a specific user
getUser: function (id) {
// código aqui
}

7. Porém...
… nem todo mundo
enxerga a Matrix!

8. function validate (str) {
return /^M{0,4}(CM|CD|D?C{0,3})(XC|XL|L?X{0,3})(IX|IV|V?I
{0,3})$/.test(str);
}

9. “É melhor não ter comentários e/ou
documentação do que tê-los de forma
ruim/errônea/desatualizada”
http://blog.millermedeiros.com/always-comment-weird-things/

10. Variáveis / Métodos
“Mais curto não é sempre melhor”
(speaking Javascript)
regularUser melhor que rglrUsr

11. Conciso
&
Claro

12. Booleanos
isPlaying();
isNumber();
hasListener;

13. Funções
loadData();
render();
parse();

14. Coleções
users;
companies;
petList;

15. Event handlers
onBtnClick;
onKeyUp;
onMouseOver;

16. var anonymBtn = document.querySelector('#anonym');
var declaredBtn = document.querySelector('#declared');
var myHandler = function () {
console.log('declared');
var a = 1 + b;
}
anonymBtn.addEventListener('click', function () {
console.log('anonym');
var a = 1 + b;
});
declaredBtn.addEventListener('click', myHandler, false);

18. Namespacing
Nomear coisas não é fácil...
http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/
http://michaux.ca/articles/javascript-namespacing

20. // Globais Everywhere
var User = function () {}
var Company = function () {}
// Tudo certo para dar errado...

21. // Uma global para a todos
governar
var MYGLOBAL = MYGLOBAL || {};
MYGLOBAL.User = {};
MYGLOBAL.User.Admin = function () {};
MYGLOBAL.Company = function () {};

22. Módulos
http://addyosmani.com/writing-modular-js/
http://www.infoq.com/br/presentations/modularizacao-em-javascript

23. AMD (Asyncronous Module Definition)
RequireJS é a implementação mais popular
http://tomdale.net/2012/01/amd-is-not-the-answer/

24. define([],
function () {
var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level)
}
}
return Robot;
});

25. define([],
function () {
var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
return Battery;
});

26. require(['battery.js', 'robot.js'], function
(Source, Robot) {
var source = new Source();
source.init(80);
var robot = new Robot();
robot.init(source);
robot.charge(); // 81
robot.charge(); // 82
});

27. CommonJS
Sistema de módulos do Node.js
O Browserify implementa no browser

28. browserify main.js -o bundle.js

29. var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
module.exports = Battery;

30. var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level);
}
}
module.exports = Robot;

31. var Battery = require('./battery.js');
var Robot = require('./robot.js');
var source = new Battery();
source.init(80);
var robot = new Robot();
robot.init(source);
robot.charge(); // 81
robot.charge(); // 82

32. Harmony
Especificação do ES6
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/

33. var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
export { Battery }

34. var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level);
}
}
export { Robot }

35. import { Battery } from 'battery.js';
import { Robot } from 'robot.js';
var source = new Battery();
source.init(80);
var robot = new Robot();
robot.init(source);
robot.charge();
robot.charge();

36. S.O.L.I.D
Princípios introduzidos pelo
“Uncle Bob”

37. Single Responsability Principle
“Uma classe/módulo deve ter somente
uma razão para mudar”
http://freshbrewedcode.com/derekgreer/2011/12/08/solid-javascript-single-responsibility-
principle/

39. var SearchWidget = function () {
return {
init: function (el) {
this.el = el;
this.input = this.el.find('.search-input');
},
onData: function (data) {
this.renderList(data);
},
renderList: function (users) {
var str = '';
users.forEach(function (user) {
str += '<li>' + user.name + '</li>';
});
$('.userList').html(str);
},

40. get: function (query) {
$.ajax({
url: 'users.json',
data: {
query: query
}
}).done(this.onData.bind(this));
},
bindClick: function () {
$('.go-button').on('click', function () {
var query = this.input.val();
this.get(query);
}.bind(this));
}
}
}

41. Muitas responsabilidades
Hora de corrigir a lambança refatorar

42. var SearchWidget = function () {
return {
init: function (el) {
this.el = el;
this.input = this.el.find('.search-input');
},
bindClick: function (callback) {
this.el.find('.go-button').on('click', function () {
var query = this.input.val();
callback(query);
}.bind(this));
}
}
}

43. Código difícil de ler vira problema do
projeto, não é só teu ou do colega

44. Sempre pense na pessoa que vai
dar manutenção no seu código!
@rafael_sps
github.com/rssilva