javascript de qualidade: hoje, amanhã e sempre!
DESCRIPTION
Palestra apresentada no DevCamp 2014, em parceria com Guilherme Carreiro.TRANSCRIPT
![Page 1: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/1.jpg)
JAVASCRIPT DE QUALIDADE
HOJE, AMANHÃ E SEMPRE GUILHERME CARREIRO THIAGO OLIVEIRA
![Page 2: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/2.jpg)
GUILHERME CARREIRO Rubyist and code deisgner
THIAGO OLIVEIRA Indian and Java programmer
![Page 3: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/3.jpg)
<!>
![Page 4: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/4.jpg)
Há muito tempo...
![Page 5: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/5.jpg)
ECMAScript
![Page 6: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/6.jpg)
![Page 7: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/7.jpg)
A linguagem (hoje)
![Page 8: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/8.jpg)
prototype
a = ["Javascript", "Ruby", "Java", "Python", "Haskell"];!a.first();// => TypeError: Object Javascript,Ruby,... has no method 'first'!Array.prototype.first = function() { return this[0];}!a.first();// => "Javascript"
![Page 9: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/9.jpg)
var
function devcamp () { a = 2; novoEvento(a);};!devcamp();!console.log(a);// => 2
![Page 10: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/10.jpg)
var
function devcamp () { var a = 2; novoEvento(a);};!devcamp();!console.log(a);// => a is not defined
![Page 11: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/11.jpg)
var
var js = 'JS';function teste() { var ruby = 'Ruby'; console.log(ruby); console.log(js); var js = 'Javascript';}!teste();// => "Ruby"// => undefined
![Page 12: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/12.jpg)
var js = 'JS';function teste() { var js, ruby = 'Ruby'; console.log(ruby); console.log(js); js = 'Javascript';}!teste();// => "Ruby"// => undefined
var
![Page 13: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/13.jpg)
![Page 14: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/14.jpg)
varfunction f () { var i = 0; for (; i < 10; i++) { var js = 'JavaScript' } console.log(js);}f();// => JavaScript
![Page 15: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/15.jpg)
var
letfunction f () { var i = 0; for (; i < 10; i++) { let js = 'JavaScript'; } console.log(js);}f();// 'js' is not defined
function f () { var i = 0; for (; i < 10; i++) { var js = 'JavaScript' } console.log(js);}f();// => JavaScript
![Page 16: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/16.jpg)
var
letfunction f () { var i = 0; for (; i < 10; i++) { let js = 'JavaScript'; } console.log(js);}f();// 'js' is not defined
const!const js = ‘JavaScript';!js = ‘Ruby’;// const 'js' has already been // declared.!!
function f () { var i = 0; for (; i < 10; i++) { var js = 'JavaScript' } console.log(js);}f();// => JavaScript
![Page 17: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/17.jpg)
![Page 18: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/18.jpg)
Bad smells (front-end)
![Page 19: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/19.jpg)
Código Javascript misturado com código HTML
<!DOCTYPE html><html><head></head><body> <input type="button" onclick="validateAndSubmit();" /> <script type="text/javascript"> doSomething(); </script></body></html>
![Page 20: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/20.jpg)
Código Javascript misturado com código HTML
<!-- index.html --><!DOCTYPE html><html><head></head><body> <input type=“button" id=“btn” /> <script src=“devcamp.js" type="text/javascript"></script></body></html>!// devcamp.jsvar btn = document.getElementById('btn');btn.addEventListener('click', validateAndSubmit);!(function(){ doSomething();}());
![Page 21: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/21.jpg)
CSS misturado com código Javascript
var botao = document.getElementById('botao');!botao.onclick = function(e) { this.style.border = '2px solid red';}
![Page 22: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/22.jpg)
CSS misturado com código Javascript
var botao = document.getElementById('botao');!botao.onclick = function(e) { this.className = 'special-button';}
![Page 23: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/23.jpg)
Lógica de negócio no Javascript
var botao = document.getElementById('botao'), saldo = <%= @saldo %>;!botao.onclick = function(e) { if(saldo > 0) { comprar(); } else { return false; }}
![Page 24: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/24.jpg)
Código HTML no Javascript
var botao = document.getElementById('botao'), saldo = <%= @saldo %>;!botao.onclick = function(e) { var status = document.getElementById('status'), html = '<div>', foto = getUserPicture(); if(saldo > 0) { html += '<img src="' + foto + '" alt="Foto" />'; html += '<h1>Saldo: ' + saldo + ' =)</h1>'; } html += '</div>'; status.innerHTML = html;}
![Page 25: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/25.jpg)
!<!-- index.html --><script src="jquery.tmpl.js" type="text/javascript"></script><!-- ... --><div id="template"> <div> <img src="${path}" alt="Foto" /> <h1>Saldo: ${saldo} =)</h1> </div></div>!// devcamp.jsvar botao = $('#botao'), template = $('#template'), saldo = <%= @saldo %>;botao.click(function(e) { var html, status = $(‘#status'), foto = getUserPicture(); if (saldo > 0) { html = $.tmpl(template.html(), {saldo: saldo, path: foto}).html(); } status.html(html);});
![Page 26: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/26.jpg)
HTML
CSS
JS (client side)
Ruby (server side)
Conteúdo
Estilo
Lógica de apresentação
Lógica de negócio
Fonte: http://www.slideshare.net/fgalassi/refactoring-to-unobtrusive-javascript
Separar responsabilidades
![Page 27: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/27.jpg)
![Page 28: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/28.jpg)
Herança moderna
![Page 29: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/29.jpg)
function object(o) { function F() {} F.prototype = o; return new F();}!var parent = { name: 'Papa'}!var child = object(parent);!console.log(child.name); // => Papa
Herança moderna
![Page 30: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/30.jpg)
Herança clássica
![Page 31: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/31.jpg)
!function Parent() { this.name = 'Joey';}!Parent.prototype.say = function() { console.log('I\'m ' + this.name);}!function Child() { this.name = 'Dee Dee';}!function inherits(Child, Parent) { Child.prototype = Object.create(Parent.prototype);}!inherits(Child, Parent);!var a = new Child();!a.say(); // => I'm Dee Dee!
![Page 32: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/32.jpg)
var SuperHuman = Person.extend(function (name) { // ...}).methods({ walk: function() { this.supr(); this.fly(); }, fly: function() { // ... }});!new SuperHuman(‘Zelda').walk();
Padrão klass
https://github.com/ded/klass
![Page 33: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/33.jpg)
![Page 34: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/34.jpg)
Classes com o ECMAScript 6
![Page 35: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/35.jpg)
class Man { constructor (name) { this.name = name; } say (message) { return this.name + ': ' + message; }}!let john = new Man('John Doe’);!john.say('Hi!');// => John Doe: Hi!
Classes
![Page 36: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/36.jpg)
class Man { constructor (name) { this.name = name; } say (message) { return this.name + ': ' + message; }}!class SuperMan extends Man { constructor () { super('Clark Kent'); } fly () { return 'Flying...'; }}!let superMan = new SuperMan();superMan.say('Yeah!');// => Clark Kent: Yeah!superMan.fly();// => Flying...
![Page 37: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/37.jpg)
![Page 38: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/38.jpg)
Arrow functions
var plus = function (a, b) { return a + b;};!var plus = (a, b) => { return a + b;};!var plus = (a, b) => a + b;!var square = a => a * a;
![Page 39: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/39.jpg)
Arrow functions
[1, 2, 3].map(function (i) { return i * i;});// => [1, 4, 9]![1, 2, 3].map(x => x * x);// => [1, 4, 9]
![Page 40: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/40.jpg)
Modules
// plugins/math.jsexport function square (a) { return a * a;}!!// index.jsimport {square} from 'plugins/math.js';square(1);
![Page 41: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/41.jpg)
Modules
// plugins/math.jsexport function square (a) { return a * a;}!!// index.jsimport 'plugins/math.js' as Math;Math.square(1);
![Page 42: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/42.jpg)
Default arguments
var g = function (a, b) { a = a || 1; b = b || 1; return a + b;}!var f = function (a = 1, b = 1) { return a + b;}!f();// => 2!f(2, 2);// => 4!f(undefined, 7);// => 8
![Page 43: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/43.jpg)
Rest parameters
var f = function (a = 1, ...b) { console.log(a, b);}!f(1);// => 1 []!f(1, 2);// => 1 [2]!f(1, 2, 3);// => 1 [2, 3]
![Page 44: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/44.jpg)
Interpolation
let a = 4;let b = 3;let code = `${a} + ${b} = ${a + b}`;// => 4 + 3 = 7!let code = ` def plus(a, b) a + b end`;
![Page 45: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/45.jpg)
Quando?
![Page 46: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/46.jpg)
![Page 47: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/47.jpg)
Como começar?
![Page 48: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/48.jpg)
Node.js
![Page 49: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/49.jpg)
Traceur
![Page 50: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/50.jpg)
Como melhorar hoje?
![Page 51: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/51.jpg)
Bower
![Page 52: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/52.jpg)
Grunt.js
![Page 53: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/53.jpg)
Jasmine
![Page 54: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/54.jpg)
![Page 55: JavaScript de qualidade: hoje, amanhã e sempre!](https://reader031.vdocuments.net/reader031/viewer/2022020122/5560fa0fd8b42a424d8b4c47/html5/thumbnails/55.jpg)
PERGUNTAS?OBRIGADO! :)