JavaScript de qualidade: hoje, amanhã e sempre!

1,577 views
1,432 views

Published on

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

Published in: Software

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! :)

×