Organizando o JavaScript (WebDay 2013)

Palestra apresentada no WebDay 2013

Transcript

1. Or anizando o JavaScript Nando Vieira
2. Nando Vieira http://simplesideias.com.br @fnando
3. hellobits.com empresa
4. howtocode.com.br cursos
5. codeplane.com.br it hostin
6. * * *
7. O JavaScript passou por al umas revoluções durante o seu tempo de vida.
8. 2004 Primeira revolução Goo le lançou o Gmail com uso de AJAX
9. 2006 Se unda revolução John Resi lançou o jQuery em um meetup em NY.
10. 2009 Terceira revolução Ryan Dahl lançou o Node.js
11. O JavaScript é a lin ua em mais importante da atualidade.
12. Dos 50 repositórios mais populares do Github, 29 repositórios são relacionados a JavaScript.
13. O JavaScript já tem quase 20 anos de idade.
14. Por que a ente ainda escreve códi os ruins?
15. "invite_friends" : function() { var resizeLoader = function() { $("#loader").css("width", $(".places").width()); $("#loader").css("height", $(".places").height()-18); } resizeLoader(); var resizeTimer; $(window).bind('resize', function() { clearTimeout(resizeTimer); resizeTimer = setTimeout(resizeLoader, 50); }); $("a[href=#automatic_invite]").click(function(e){ SomeApp.utils.stopPropagation(e); if(!$(this).parents(".tab_title:first").is(".active")) { $(".tab_title:first") .toggleClass("active"); $(".tab_title:last") .toggleClass("active"); $("#automatic") .toggleClass("hidden"); $("#manual") .toggleClass("hidden"); } }); var suffixes = { "gmail": "@gmail.com", "yahoo": "", "live": "@hotmail.com", "other": ""
16. A solução é modularidade.
17. Só a modularidade permitirá separar as responsabilidades do seu códi o.
18. Só a modularidade tornará possível expandir o seu códi o com facilidade.
19. Só a modularidade tornará possível a manutenção do seu codebase.
20. De quebra você ainda anha reusabilidade de componentes.
21. E é somente assim que o seu códi o poderá ser testado sem dificuldades.
22. Se temos todos esses benefícios, porque ainda não escrevemos códi os dessa maneira?
23. A verdade é que a maioria dos desenvolvedores não sabe como fazer isso.
24. E porque escrever códi os modulares pode ser difícil.
25. Então, como fazer?
26. Conhecimento
27. Conheça a lin ua em.
28. http://developer.mozilla.or
29. http://howtocode.com.br
30. http://w3scho… melhor não!
31. http://w3fools.com
32. Or anização
33. Pense no seu códi o como uma série de blocos que precisam encaixar uns nos outros.
40. Muitos outros componentes serão criados à partir dessa estrutura.
41. Pense em como esses blocos irão se comunicar através de uma API pública.
42. Não referencie objetos diretamente do DOM, nem acesse outros objetos lobais.
43. Passe todas as dependências como ar umentos da função construtora.
44. Cada um desses blocos pode ter o seu próprio arquivo.
45. É melhor ter muitos arquivos pequenos do que poucos arquivos randes.
46. javascripts application.js eden AddToRe istry.js ProductInfo.js modules UserRe istries.js addToCartModule.js addressListModule.js boletoModule.js cartReviewModule.js cate oryInterests.js cate oryModule.js checkoutModule.js
47. Lembre-se que você sempre pode concatenar e minificar o seu códi o antes de colocar em produção.
48. Modularização
49. O JavaScript possui al umas alternativas diferentes para a criação de módulos.
50. Você pode utilizar a ideia de namespaces com object literals.
51. var Todo = { tasks: [] , addTask: function(task) {} , removeTask : function() {} , count : function() {} };
52. Object literals são muitos simples de utilizar, mas se comportam mais como sin letons.
53. O Module pattern permite simular a escopo e visibilidade de atributos.
54. var Todo = (function(){ var tasks = []; // private variable // expose the public API return { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; })();
55. O Module pattern também permite fazer a injeção de dependências.
56. var Todo = (function($, hb){ // all your code here })(jQuery, Handlebars);
57. Eu costumo usar uma variação de Module pattern com namespace.
58. Module("MyApp.MyModule", function(MyModule){ MyModule.fn.initialize = function() { // this is the initializer }; MyModule.fn.someFunction = function() { // fn is just shortcut for // prototype alas jQuery }; });
59. http:// ithub.com/fnando/module.js
60. Dependência entre os módulos não é um problema.
61. Utilize a aborda em sin le entry point.
62. // boot.js $(function(){ var html = $("html") , controller = html.data("controller") , action = html.data("action") ; MyApp.Application(controller, action); });
63. Existem outras alternativas de módulos como AMD e CommonJS.
64. Já existe um draft de módulos nativos no JavaScript no ES6 Harmony.
65. module Todo { var tasks = []; // private variable // expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
66. module Todo { var tasks = []; // private variable // expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
67. import Todo from Todo; Todo.addTask(task);
68. Os módulos podem ser importados através de URLs.
69. // load from remote sources module $ from "http://example.org/jquery.js"; // Module loader API Loader.load("http://example.org/jquery.js", function($){ // do what you need });
70. Você pode ser específico sobre o que quer importar.
71. import { a, b, c } from "some/file";
72. Ainda está em discussão. http://fnando.me/jp
73. Exemplo
74. Vamos implementar um postbox. http://fnando.me/jq
76. Primeiro implemente a funcionalidade do jeito mais rápido, para entender o problema.
77. $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup", function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
78. $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup", function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
79. $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup", function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
80. $(".postbox textarea") .on("focus", function(){ $(this).closest(".postbox") .addClass("did-focus") .removeClass("is-contracted") ; }) .on("keyup", function(){ var lines = this.value.split(/\r?\n/); var textarea = $(this); if (lines.length >= 5) { textarea.addClass("is-taller"); } else { textarea.removeClass("is-taller"); } }) .on("blur", function(){ if (!this.value) { $(this).closest(".postbox").addClass("is-contracted"); } }) ;
81. Depois que você conse uiu entender o problema, escreva uma solução mais modular.
82. Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) { this.container = container; this.textarea = container.find(".pb-input"); this.button = container.find(".pb-button"); }; });
83. Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) { // the initialization code this.addEventListeners(); }; Postbox.fn.addEventListeners = function() { this.textarea .on("focus", this.onTextareaFocus.bind(this)) .on("keyup", this.onTextareaKeyUp.bind(this)) .on("blur", this.onTextareaBlur.bind(this)) ; }; });
84. Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {}; Postbox.fn.onTextareaFocus = function(event) { this.container .addClass("did-focus") .removeClass("is-contracted") ; }; });
85. Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {}; Postbox.fn.onTextareaFocus = function(event) {}; var LINES = 5; Postbox.fn.onTextareaKeyUp = function(event) { var lines = event.target.value.split(/\r?\n/); if (lines.length >= LINES) { this.textarea.addClass("is-taller"); } else { this.textarea.removeClass("is-taller"); } }; });
86. Module("HOWTO.Postbox", function(Postbox){ Postbox.fn.initialize = function(container) {}; Postbox.fn.addEventListeners = function() {}; Postbox.fn.onTextareaFocus = function(event) {}; Postbox.fn.onTextareaKeyUp = function(event) {}; Postbox.fn.onTextareaBlur = function(event) { if (!event.target.value) { this.container.addClass("is-contract"); } }; });
87. Sempre que você escreve códi os mais modulares, é muito mais simples escrever testes.
88. describe("HOWTO.Postbox", function() { var container, postbox, textarea; beforeEach(function() { container = $("<div/>") .append("<textarea class='pb-input'/>") .append("<button class='pb-button' value='Reply'/>") .appendTo("#sample") ; textarea = container.find("textarea"); postbox = HOWTO.Postbox(container); }); it("sets class when focusing box", function() { textarea.trigger("focus"); expect(container.is(".did-focus")).toBeTruthy(); }); // other specs });
89. Finalizando
90. Todo aplicativo complexo deve ser quebrado em pedaços menores.
91. Você nunca sabe qual vai ser o tamanho do seu projeto.
92. Códi os modulares podem ser escritos sem o uso de bibliotecas.
93. Mas use o que for melhor para o seu workflow.
94. Obri ado!
95. * * *
96. http://howtocode.com.br