O slideshow foi denunciado.
Utilizamos seu perfil e dados de atividades no LinkedIn para personalizar e exibir anúncios mais relevantes. Altere suas preferências de anúncios quando desejar.

JavaScript de qualidade: hoje, amanhã e sempre!

1.922 visualizações

Publicada em

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

Publicada em: Software
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/y6a5rkg5 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • DOWNLOAD THIS BOOKS INTO AVAILABLE FORMAT (Unlimited) ......................................................................................................................... ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download Full EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ACCESS WEBSITE for All Ebooks ......................................................................................................................... Download Full PDF EBOOK here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download EPUB Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... Download doc Ebook here { https://tinyurl.com/yyxo9sk7 } ......................................................................................................................... ......................................................................................................................... ......................................................................................................................... .............. Browse by Genre Available eBooks ......................................................................................................................... Art, Biography, Business, Chick Lit, Children's, Christian, Classics, Comics, Contemporary, Cookbooks, Crime, Ebooks, Fantasy, Fiction, Graphic Novels, Historical Fiction, History, Horror, Humor And Comedy, Manga, Memoir, Music, Mystery, Non Fiction, Paranormal, Philosophy, Poetry, Psychology, Religion, Romance, Science, Science Fiction, Self Help, Suspense, Spirituality, Sports, Thriller, Travel, Young Adult,
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui
  • Abordagem fantástica! Bons exemplos e boa explicação.
       Responder 
    Tem certeza que deseja  Sim  Não
    Insira sua mensagem aqui

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

×