Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

JavaScript de qualidade: hoje, amanhã e sempre!

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

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

    Be the first to comment

    Login to see the comments

  • talitapagani

    May. 18, 2014
  • DanielCastro19

    May. 18, 2014
  • CesarNog

    May. 19, 2014
  • nandokstro

    May. 19, 2014
  • diovanemonteiro

    May. 19, 2014
  • caiosantarossa

    May. 21, 2014
  • annielmenezes

    May. 21, 2014
  • korzzus

    May. 22, 2014
  • mrprompt

    Jun. 6, 2014
  • alexandrefds1

    Aug. 3, 2014
  • rooseveltfers

    Feb. 2, 2015
  • FbioAssuno1

    Mar. 28, 2015
  • DaniloAgostinho

    Apr. 14, 2015
  • michaelmpimentel

    May. 19, 2015
  • AndersonMarques48

    Mar. 1, 2016

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

Views

Total views

2,142

On Slideshare

0

From embeds

0

Number of embeds

44

Actions

Downloads

55

Shares

0

Comments

0

Likes

15

×