0
JAVASCRIPT DE
QUALIDADE
HOJE, AMANHÃ
E SEMPRE
GUILHERME CARREIRO
THIAGO OLIVEIRA
GUILHERME CARREIRO
Rubyist and code deisgner
THIAGO OLIVEIRA
Indian and Java programmer
<!>
Há muito tempo...
ECMAScript
A linguagem (hoje)
prototype
a = ["Javascript", "Ruby", "Java", "Python", "Haskell"];	
!
a.first();	
// => TypeError: Object Javascript,Ruby,...
var
function devcamp () {	
a = 2;	
novoEvento(a);	
};	
!
devcamp();	
!
console.log(a);	
// => 2
var
function devcamp () {	
var a = 2;	
novoEvento(a);	
};	
!
devcamp();	
!
console.log(a);	
// => a is not defined
var
var js = 'JS';	
function teste() {	
var ruby = 'Ruby';	
console.log(ruby);	
console.log(js);	
var js = 'Javascript';	
...
var js = 'JS';	
function teste() {	
var js, ruby = 'Ruby';	
console.log(ruby);	
console.log(js);	
js = 'Javascript';	
}	
!...
var
function f () {	
var i = 0;	
for (; i < 10; i++) {	
var js = 'JavaScript'	
}	
console.log(js);	
}	
f();	
// => JavaScr...
var
let
function f () {	
var i = 0;	
for (; i < 10; i++) {	
let js = 'JavaScript';	
}	
console.log(js);	
}	
f();	
// 'js' ...
var
let
function f () {	
var i = 0;	
for (; i < 10; i++) {	
let js = 'JavaScript';	
}	
console.log(js);	
}	
f();	
// 'js' ...
Bad smells (front-end)
Código Javascript misturado com código HTML
<!DOCTYPE html>	
<html>	
<head></head>	
<body>	
<input type="button" onclick="...
Código Javascript misturado com código HTML
<!-- index.html -->	
<!DOCTYPE html>	
<html>	
<head>	
</head>	
<body>	
<input ...
CSS misturado com código Javascript
var botao = document.getElementById('botao');	
!
botao.onclick = function(e) {	
this.s...
CSS misturado com código Javascript
var botao = document.getElementById('botao');	
!
botao.onclick = function(e) {	
this.c...
Lógica de negócio no Javascript
var botao = document.getElementById('botao'),	
saldo = <%= @saldo %>;	
!
botao.onclick = f...
Código HTML no Javascript
var botao = document.getElementById('botao'),	
saldo = <%= @saldo %>;	
!
botao.onclick = functio...
!
<!-- index.html -->	
<script src="jquery.tmpl.js" type="text/javascript"></script>	
<!-- ... -->	
<div id="template">	
<...
HTML
CSS
JS (client side)
Ruby (server side)
Conteúdo
Estilo
Lógica de
apresentação
Lógica de	

negócio
Fonte: http://www....
Herança moderna
function object(o) {	
function F() {}	
F.prototype = o;	
return new F();	
}	
!
var parent = {	
name: 'Papa'	
}	
!
var chil...
Herança clássica
!
function Parent() {	
this.name = 'Joey';	
}	
!
Parent.prototype.say = function() {	
console.log('I'm ' + this.name);	
}	...
var SuperHuman = Person.extend(function (name) {	
// ...	
}).methods({	
walk: function() {	
this.supr();	
this.fly();	
},	...
Classes com o ECMAScript 6
class Man {	
constructor (name) {	
this.name = name;	
}	
say (message) {	
return this.name + ': ' + message;	
}	
}	
!
let ...
class Man {	
constructor (name) {	
this.name = name;	
}	
say (message) {	
return this.name + ': ' + message;	
}	
}	
!
clas...
Arrow functions
var plus = function (a, b) {	
return a + b;	
};	
!
var plus = (a, b) => {	
return a + b;	
};	
!
var plus =...
Arrow functions
[1, 2, 3].map(function (i) {	
return i * i;	
});	
// => [1, 4, 9]	
!
[1, 2, 3].map(x => x * x);	
// => [1,...
Modules
// plugins/math.js	
export function square (a) {	
return a * a;	
}	
!
!
// index.js	
import {square} from 'plugins...
Modules
// plugins/math.js	
export function square (a) {	
return a * a;	
}	
!
!
// index.js	
import 'plugins/math.js' as M...
Default arguments
var g = function (a, b) {	
a = a || 1;	
b = b || 1;	
return a + b;	
}	
!
var f = function (a = 1, b = 1)...
Rest parameters
var f = function (a = 1, ...b) {	
console.log(a, b);	
}	
!
f(1);	
// => 1 []	
!
f(1, 2);	
// => 1 [2]	
!
f...
Interpolation
let a = 4;	
let b = 3;	
let code = `${a} + ${b} = ${a + b}`;	
// => 4 + 3 = 7	
!
let code = `	
def plus(a, b...
Quando?
Como começar?
Node.js
Traceur
Como melhorar hoje?
Bower
Grunt.js
Jasmine
PERGUNTAS?OBRIGADO! :)
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
JavaScript de qualidade: hoje, amanhã e sempre!
Upcoming SlideShare
Loading in...5
×

JavaScript de qualidade: hoje, amanhã e sempre!

1,135

Published on

Palestra apresentada no DevCamp 2014, em parceria com Guilherme Carreiro.

Published in: Software

Transcript of "JavaScript de qualidade: hoje, amanhã e sempre!"

  1. 1. JAVASCRIPT DE QUALIDADE HOJE, AMANHÃ E SEMPRE GUILHERME CARREIRO THIAGO OLIVEIRA
  2. 2. GUILHERME CARREIRO Rubyist and code deisgner THIAGO OLIVEIRA Indian and Java programmer
  3. 3. <!>
  4. 4. Há muito tempo...
  5. 5. ECMAScript
  6. 6. A linguagem (hoje)
  7. 7. 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"
  8. 8. var function devcamp () { a = 2; novoEvento(a); }; ! devcamp(); ! console.log(a); // => 2
  9. 9. var function devcamp () { var a = 2; novoEvento(a); }; ! devcamp(); ! console.log(a); // => a is not defined
  10. 10. var var js = 'JS'; function teste() { var ruby = 'Ruby'; console.log(ruby); console.log(js); var js = 'Javascript'; } ! teste(); // => "Ruby" // => undefined
  11. 11. var js = 'JS'; function teste() { var js, ruby = 'Ruby'; console.log(ruby); console.log(js); js = 'Javascript'; } ! teste(); // => "Ruby" // => undefined var
  12. 12. var function f () { var i = 0; for (; i < 10; i++) { var js = 'JavaScript' } console.log(js); } f(); // => JavaScript
  13. 13. var let function 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
  14. 14. var let function 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
  15. 15. Bad smells (front-end)
  16. 16. 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>
  17. 17. 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.js var btn = document.getElementById('btn'); btn.addEventListener('click', validateAndSubmit); ! (function(){ doSomething(); }());
  18. 18. CSS misturado com código Javascript var botao = document.getElementById('botao'); ! botao.onclick = function(e) { this.style.border = '2px solid red'; }
  19. 19. CSS misturado com código Javascript var botao = document.getElementById('botao'); ! botao.onclick = function(e) { this.className = 'special-button'; }
  20. 20. 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; } }
  21. 21. 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; }
  22. 22. ! <!-- 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.js var 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); });
  23. 23. 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
  24. 24. Herança moderna
  25. 25. 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
  26. 26. Herança clássica
  27. 27. ! 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 !
  28. 28. 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
  29. 29. Classes com o ECMAScript 6
  30. 30. 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
  31. 31. 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...
  32. 32. 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;
  33. 33. Arrow functions [1, 2, 3].map(function (i) { return i * i; }); // => [1, 4, 9] ! [1, 2, 3].map(x => x * x); // => [1, 4, 9]
  34. 34. Modules // plugins/math.js export function square (a) { return a * a; } ! ! // index.js import {square} from 'plugins/math.js'; square(1);
  35. 35. Modules // plugins/math.js export function square (a) { return a * a; } ! ! // index.js import 'plugins/math.js' as Math; Math.square(1);
  36. 36. 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
  37. 37. 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]
  38. 38. 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 `;
  39. 39. Quando?
  40. 40. Como começar?
  41. 41. Node.js
  42. 42. Traceur
  43. 43. Como melhorar hoje?
  44. 44. Bower
  45. 45. Grunt.js
  46. 46. Jasmine
  47. 47. PERGUNTAS?OBRIGADO! :)
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×