Não alimente os trolls: JavaScript é bonito - FrontInSM 2015

Quase todo dia temos um post alegando que a linguagem é caótica e tende a destruir os sistemas que faz parte. Abordei as "armadilhas" comuns e como evitá-las. Coerção e 'this' dinâmico podem ser seus amigos!

Transcript

1. Não alimente os trolls: Javascript é bonito! @rafael_sps
2. Quem? Tecnólogo em Telecomunicações IFSul Rafael Specht da Silva
6. Javascript até que é bonito! @rafael_sps
7. Javascript é bonito legal! @rafael_sps
16. “Se JavaScript não fosse tão feia, um livro chamado ‘JavaScript: The Good Parts’ não seria o best-seller da linguagem na Amazon” http://simpleprogrammer.com/2013/05/06/why-javascript-is-doomed/
17. Inconsistente
18. typeof {} // ‘object’ typeof [] // ‘object’
19. typeof null // ‘object’ typeof undefined // ‘undefined’ undefined == null // true
20. +
21. var n1 = 2; var n2 = 3; n1 + n2 // 5 var n1 = 2 var n2 = ‘3’ n1 + n2 // ‘23’
23. https://twitter.com/1Marc/status/486803289175232512
24. == e ===
25. 0 == false // true 0 === false // false 1 == true // true 1 === true // false
26. var url1 = 'http://localhost/rs/santa-maria' var url2 = 'http://localhost/' var getState = function (url) { var stateMatch = url.match(/\/[a-z]{2}\//gi); var state = null; if (stateMatch !== null && stateMatch.length > 0) { state = stateMatch[0].replace(/\//g, ''); } return state; } getState(url1); // ‘rs’ getState(url2); // null
27. “Se você trata null e undefined igualmente, é recompensado com comparações mais simples” https://speakerdeck.com/getify/new-rules-for-javascript
28. if (stateMatch !== null && stateMatch.length > 0) { state = stateMatch[0].replace(/\//g, ''); } if (stateMatch && stateMatch.length) { state = stateMatch[0].replace(/\//g, ''); }
29. var data = {name: 'Luke', surname: 'Skywalker'} var User = function (name, surname) { this.name = name; this.surname = surname; this.getCompleteName = function () { return this.name + ' ' + this.surname; } } var user = new User(data.name, data.surname) user.getCompleteName(); // 'Luke Skywalker'
30. var data = {name: 'Luke'} var user = new User(data.name, data.surname) user.getCompleteName(); // 'Luke undefined'
31. var data = {name: 'Luke'} var User = function (name, surname) { this.name = name; this.surname = surname || ''; this.getCompleteName = function () { return this.name + ' ' + this.surname; } } var user = new User(data.name, data.surname) user.getCompleteName(); // 'Luke '
32. this
33. var UserView = function () { function setName (name) { this.name = name; } function setEvents () { var that = this; $('.hit').on('click', function () { console.log(this); // <button class="hit">Hit me!</button> $(this).toggleClass('odd'); that.setName($('.name').val()); }); } return { setEvents: setEvents, setName: setName } }
34. function setEvents () { var that = this; $('.hit').on('click', function () { console.log(this); $(this).toggleClass('odd'); that.setName($('.name').val()); }); }
35. function setEvents () { var button = $('.hit'); function handler () { console.log(this); button.toggleClass('odd'); this.setName($('.name').val()); } button.on('click', handler.bind(this)); } https://github.com/rssilva/presentations/blob/master/front-in-sm-2015/thisWorld/ex1.html
37. var Human = { setName: function (name) { console.log(this); this.name = name; }, sayHi: function () { return 'Hi! My name is ' + this.name + '!'; } }
38. var Ninja = { setName: Human.setName, setStealhLevel: function (level) { console.log(this) this.stealthLevel = level; } }
39. var Turtle = { setHullLevel: function (level) { console.log(this); this.hullLevel = level; } } var NinjaTurtle = { setName: Ninja.setName, setStealhLevel: Ninja.setStealhLevel, setHullLevel: Turtle.setHullLevel }
40. var raphael = Object.create(NinjaTurtle, {}); raphael.setName('Raphael'); raphael.setStealhLevel(50); raphael.setHullLevel(100); console.log(raphael); console.log(raphael.sayHi); https://github.com/rssilva/presentations/blob/master/front-in-sm-2015/thisWorld/ex2.html
41. Objetos mantém referência
42. var a = [1, 2, 3]; var b = a; b.pop(); console.log(a); // [1, 2] console.log(b); // [1, 2]
43. MODAIS https://github.com/rssilva/presentations/tree/master/front-in-sm- 2015/objectsByReference
44. É importante: - ter bom-humor! - criticar construtivamente - aprender os paradigmas
45. Toda linguagem tem peculiaridades. Aprender a lidar com elas é parte do nosso trabalho.
46. Obrigado! github.com/rssilva twitter.com/rafael_sps speakerdeck.com/rssilva