Frontend Progress & CoffeeScript

Nesta palestra vamos falar sobre qual a importância de novas ferramentas e abstrações como Coffeescript e como evitar a luta contra essas novas ferramentas pode impactar o que será o ambiente de client side development no futuro.

Transcript

2. email daniel@objetiva.co | twitter @danielvlopes Designer Developer com foco em UI
3. IMHO
4. na prática CoffeeScript
5. var square = function(x) { return x * x; }
6. var square = function(x) { return x * x; }
7. var square = function(x) { x * x; }
8. var square = function(x) { x * x; }
9. square = function(x) x * x
10. square = function(x) x * x
11. square = (x) -> x * x
12. if (files) { BrowseDrag.updateStatus(e, files); } else if (e.data && e.data.types && e.data.types.contains('Files')) { CrossDomainUploader.showIndicators(e); }
13. if files @updateStatus e, files else if e.data?.types?.contains 'Files' CrossDomainUploader.showIndicators e
14. CustomMonocle.Controls.StyleManager = (function() { StyleManager.prototype.styleChanging = false; StyleManager.prototype.styleSheetIndex = null; StyleManager.prototype.resetStylesheet = "..."; function StyleManager(reader) { var _this = this; this.reader = reader; this.reader.listen('stylesheetchanging', function() { return _this.styleChanging = true; }); this.reader.listen('stylesheetchange', function() { return _this.styleChanging = false; }); } StyleManager.prototype.refresh = function(style, fn) { if (!this.styleChanging) { if (this.styleSheetIndex != null) { this.reader.removePageStyles(this.styleSheetIndex); } this.reader.addPageStyles(style); if (fn != null) { return fn(); } } }; return StyleManager; })();
15. class CustomMonocle.Controls.StyleManager styleChanging: false styleSheetIndex: null resetStylesheet: "..." constructor: (@reader) -> @reader.listen 'stylesheetchanging', => @styleChanging = true @reader.listen 'stylesheetchange', => @styleChanging = false refresh: (style, fn) -> unless @styleChanging @reader.removePageStyles @styleSheetIndex if @styleSheetIndex? @reader.addPageStyles style fn() if fn?
16. Beleza é subjetivo
17. POLÊMICA...
21. Quem gosta de Python ou Ruby, vai amar Coffee☕
22. APENAS EVOLUÇÃO
23. O que é Javascript ? HISTÓRIA ...
25. Netscape 1995 SCHEME no Browser
26. Linguagem Java-like, similar ao que VBScript era p C++ Profissionais fariam Java applets ...PARA AMADORES
28. https://brendaneich.com/2008/04/popularity/
29. 2 Semanas https://brendaneich.com/2008/04/popularity/
30. 2 Semanas Mix de Scheme and Self sob uma casca de Java. https://brendaneich.com/2008/04/popularity/
31. 2 Semanas Mix de Scheme and Self sob uma casca de Java. “ ... parte boa não é original, e a parte original não é boa. ” https://brendaneich.com/2008/04/popularity/
32. 2 Semanas Mix de Scheme and Self sob uma casca de Java. “ ... filho de uma rapidinha entre C e Self ... ” “ ... parte boa não é original, e a parte original não é boa. ” https://brendaneich.com/2008/04/popularity/
33. PURISMO PRAGMATISMO http://blip.tv/jsconf/jsconf2011-jeremy-ashkenas-5258082
34. na prática CoffeeScript
35. na prática Contrato importante Menos de 2 meses de prazo Escopo fixo Aproximadamente 800 horas Dependências em alfa no browser Mobile & Desktop
36. na prática Benefícios
37. Convenções
38. var civic = new Car( "Honda Civic", 2009, 20000 ); var mondeo = new Car( "Ford Mondeo", 2010, 5000 );
39. function Car( model, year, miles ) { this.model = model; this.year = year; this.miles = miles; this.toString = function () { return this.model + " has done " + this.miles + " miles"; }; }
40. var Car = (function() { function Car(model, year, miles) { this.model = model; this.year = year; this.miles = miles; } Car.prototype.toString = function() { return " " + this.model + " (" + this.year + ") has done " + this.miles + " miles"; }; return Car; })();
41. var Car = (function () { var model, year, miles; return { initialize: function (_model, _year, _miles) { model = _model; year = _year; miles = _miles; }, toString: function () { return " " + this.model + " (" + this.year + ") has done " + this.miles + " miles"; } }; })();
42. function Car(model, year, miles) { this.toString = function() { return " " + this.model + " (" + this.year + ") has done " + this.miles + " miles"; }; }
44. class Car constructor: (@model, @year, @miles) -> toString: -> " #{@model} (#{@year}) has done #{@miles} miles"
45. Escopo
46. var foo = "foo"; var bar = "bar"; var baz = "baz"; (function(){ var foo = "not foo", bar = "not bar" baz = "not baz"; }()); console.log("foo: %s, bar: %s, baz: %s", foo, bar, baz);
47. var foo = "foo"; var bar = "bar"; var baz = "baz"; (function(){ var foo = "not foo", bar = "not bar" baz = "not baz"; }()); console.log("foo: %s, bar: %s, baz: %s", foo, bar, baz); # foo: foo, bar: bar, baz: not baz
48. var foo = "foo"; var bar = "bar"; var baz = "baz"; (function(){ var foo = "not foo", bar = "not bar" baz = "not baz"; }()); console.log("foo: %s, bar: %s, baz: %s", foo, bar, baz); # foo: foo, bar: bar, baz: not baz
49. exemplo... Mais um
50. Human.prototype.loadBrain = function() { this.brain = 'loading...'; $.get('ajax/brain', function(data) { this.brain = data; }); };
52. Human.prototype.loadBrain = function() { this.brain = 'loading...'; var that = this; $.get('ajax/brain', function(data) { that.brain = data; }); };
53. Human.prototype.loadBrain = -> @brain = 'loading...' $.get 'ajax/brain', (data) => @brain = data
54. exemplo... Só mais um
55. for (var i = 1; i <= 3; i++) { setTimeout(function() { console.log(i); }, 0); }
56. for (var i = 1; i <= 3; i++) { setTimeout(function() { console.log(i); }, 0); } # 4 # 4 # 4
58. for (var i = 1; i <= 3; i++) { (function(i) { setTimeout(function() { console.log(i); }, 0); })(i); } # 1 # 2 # 3
59. for i in [1..3] do (i) -> setTimeout (-> console.log i), 0
60. Comparações
61. '' == '0' // false 0 == '' // true 0 == '0' // true false == 'false' // false false == '0' // true false == undefined // false false == null // false null == undefined // true ' \t\r\n ' == 0 // true
62. Tarde de mais, já virou padrão! Vamos consertar ?
63. '' == '0' // false 0 == '' // false 0 == '0' // false false == 'false' // false false == '0' // false false == undefined // false false == null // false null == undefined // false ' \t\r\n ' == 0 // false
64. '' == '0' 0 == '' 0 == '0' false == 'false' false == '0' false == undefined false == null null == undefined ' \t\r\n ' == 0 '' === '0' 0 === '' 0 === '0' false === 'false' false === '0' false === void 0 false === null null === void 0 ' \t\r\n ' === 0
65. JÁ FOI CONSERTADO
66. Organização
68. PROBLEMAS
69. em Coffee é difícil. DEBUG
73. Maior problema é Infra-estrutura
74. Conclusão
75. IMHO precisamos de abstrações coffee, clojurescript, etc... precisamos de tools melhores acessibilidade p/ novos devs HOJE: resultado satisfatório para RIA FUTURO: pode ser promissor
76. ESPERANÇAS
78. email daniel@objetiva.co | twitter @danielvlopes OBRIGADO MUITO