Slide 1
Slide 1 text
Javascript Ilegívl
@rafael_sps
Slide 2
Slide 2 text
Quem?
Desenvolvedor web
no Grupo RBS
Slide 3
Slide 3 text
No content
Slide 4
Slide 4 text
No content
Slide 5
Slide 5 text
/* Comentários */
Não precisa ser o “capitão óbvio”
Slide 6
Slide 6 text
// get a specific user
getUser: function (id) {
// código aqui
}
Slide 7
Slide 7 text
Porém...
… nem todo mundo
enxerga a Matrix!
Slide 8
Slide 8 text
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);
}
Slide 9
Slide 9 text
“É 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/
Slide 10
Slide 10 text
Variáveis / Métodos
“Mais curto não é sempre melhor”
(speaking Javascript)
regularUser melhor que
rglrUsr
Slide 11
Slide 11 text
Conciso
&
Claro
Slide 12
Slide 12 text
Booleanos
isPlaying();
isNumber();
hasListener;
Slide 13
Slide 13 text
Funções
loadData();
render();
parse();
Slide 14
Slide 14 text
Coleções
users;
companies;
petList;
Slide 15
Slide 15 text
Event handlers
onBtnClick;
onKeyUp;
onMouseOver;
Slide 16
Slide 16 text
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);
Slide 17
Slide 17 text
No content
Slide 18
Slide 18 text
Namespacing
Nomear coisas não é fácil...
http://javascriptweblog.wordpress.com/2010/12/07/namespacing-in-javascript/
http://michaux.ca/articles/javascript-namespacing
Slide 19
Slide 19 text
No content
Slide 20
Slide 20 text
// Globais Everywhere
var User = function () {}
var Company = function () {}
// Tudo certo para dar errado...
Slide 21
Slide 21 text
// Uma global para a todos
governar
var MYGLOBAL = MYGLOBAL || {};
MYGLOBAL.User = {};
MYGLOBAL.User.Admin = function () {};
MYGLOBAL.Company = function () {};
Slide 22
Slide 22 text
Módulos
http://addyosmani.com/writing-modular-js/
http://www.infoq.com/br/presentations/modularizacao-em-javascript
Slide 23
Slide 23 text
AMD (Asyncronous Module Definition)
RequireJS é a implementação mais popular
http://tomdale.net/2012/01/amd-is-not-the-answer/
Slide 24
Slide 24 text
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;
});
Slide 25
Slide 25 text
define([],
function () {
var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
return Battery;
});
Slide 26
Slide 26 text
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
});
Slide 27
Slide 27 text
CommonJS
Sistema de módulos do Node.js
O Browserify implementa no browser
Slide 28
Slide 28 text
browserify main.js -o bundle.js
Slide 29
Slide 29 text
var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
module.exports = Battery;
Slide 30
Slide 30 text
var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level);
}
}
module.exports = Robot;
Slide 31
Slide 31 text
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
Slide 32
Slide 32 text
Harmony
Especificação do ES6
http://es6rocks.com/2014/10/es6-modules-today-with-6to5/
Slide 33
Slide 33 text
var Battery = function () {
this.init = function (level) {
this.level = level;
}
}
export { Battery }
Slide 34
Slide 34 text
var Robot = function () {
this.init = function (battery) {
this.battery = battery;
}
this.charge = function () {
this.battery.level++;
console.log(this.battery.level);
}
}
export { Robot }
Slide 35
Slide 35 text
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();
Slide 36
Slide 36 text
S.O.L.I.D
Princípios introduzidos pelo
“Uncle Bob”
Slide 37
Slide 37 text
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/
Slide 38
Slide 38 text
No content
Slide 39
Slide 39 text
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 += '' + user.name + ' ';
});
$('.userList').html(str);
},
Slide 40
Slide 40 text
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));
}
}
}
Slide 41
Slide 41 text
Muitas responsabilidades
Hora de corrigir a lambança refatorar
Slide 42
Slide 42 text
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));
}
}
}
Slide 43
Slide 43 text
Código difícil de ler vira problema do
projeto, não é só teu ou do colega
Slide 44
Slide 44 text
Sempre pense na pessoa que vai
dar manutenção no seu código!
@rafael_sps
github.com/rssilva