Organizando o JavaScript (Redux)

Atualmente é comum criarmos apps que usam muito JavaScript. Infelizmente, nem sempre o código é fácil de ler ou de manter. Funções que fazem de tudo um pouco, "Callback Hell" e desorganização são problemas recorrentes. Nesta palestra você verá algumas dicas de como colocar o seu JavaScript na linha.

Transcript

1. ORGANIZANDO O JS NANDO VIEIRA @fnando
2. http://nandovieira.com.br
3. http://hellobits.com
4. http://howtocode.com.br howto.
5. http://codeplane.com.br
7. A PRIMEIRA REVOLUÇÃO 2004
8. ASYNCRONOUS JAVASCRIPT AND XML AJAX
9. A SEGUNDA REVOLUÇÃO 2006
11. A TERCEIRA REVOLUÇÃO 2009
13. Dos 50 repositórios mais populares do Github, 29 repositórios* são relacionados a JavaScript. *bootstrap, node, jquery, html5-boilerplate, impress.js, d3, backbone, chosen, three.js, jQuery-File-Upload, brackets, express, angular.js, Modernizr, meteor, less.js, socket.io, jquery-mobile, underscore, reveal.js, coffee-script, jquery-ui, moment, ember.js, select2, todomvc, backbone-fundamentals, jquery-pjax, pdf.js.
14. PERGUNTA QUEM DAQUI REALMENTE CONHECE JAVASCRIPT?
15. DICAS
16. APRENDA JAVASCRIPT
17. CLOSURES, FUNÇÕES, ESCOPO DE VARIÁVEIS, CONTEXTO DE FUNÇÕES, PSEUDO-ORIENTAÇÃO A OBJETOS, PROTOTYPE, MUITO MAIS.
18. CLOSURES
19. FUNÇÕES
20. PROTOTYPE
21. OOP
22. MANIPULAÇÃO DO DOM
23. FUNCTION BINDING
24. MUITO MAIS
25. JQUERY *NÃO* É JAVASCRIPT
26. http://developer.mozilla.org
27. http://howtocode.com.br
28. http://w3scho... melhor não!
29. http://w3fools.com
30. UMA COISA DE CADA VEZ
31. "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": ""
33. 354 LINHAS
34. BAD JQUERY OU BAD DEVELOPER?
35. $("#page").load("/some/file.html");
36. Seleção do elemento no DOM $("#page").load("/some/file.html");
37. Requisição AJAX $("#page").load("/some/file.html");
38. Manipulação do DOM $("#page").load("/some/file.html");
39. FAÇA APENAS UMA COISA E A FAÇA BEM FEITATM
40. COMPONENTES
41. PENSE COMO SE FOSSE UM QUEBRA-CABEÇA
43. PERGUNTA QUANTOS COMPONENTES VOCÊ CONSEGUE IDENTIFICAR?
50. ESSE APP TERÁ MAIS COMPONENTES QUE SÓ SERÃO IDENTIFICADOS NO DESENVOLVIMENTO.
51. TER PEQUENAS PARTES PARA COMPOR UM APP É MUITO MAIS SIMPLES.
52. O CÓDIGO FICA MAIS SIMPLES POR QUE DEVE FAZER MENOS COISA.
53. QUEBRE CADA COMPONENTE EM SEU PRÓPRIO ARQUIVO.
54. CONCATENE OS ARQUIVOS NA HORA DO DEPLOY.
55. NAMESPACES
57. Module("Todo.TaskInput", function(TaskInput){ }); https://github.com/fnando/module.js
58. DEFININDO TAREFAS NA INICIALIZAÇÃO DO COMPONENTE.
59. Module("Todo.TaskInput", function(TaskInput){ TaskInput.fn.initialize = function(input) { this.input = input; }; });
60. var taskInput = Todo.TaskInput($("input#task"));
61. PENSE EM COMO VOCÊ QUER INTERAGIR COM O COMPONENTE.
62. taskInput.on("enter", callback);
63. Module("Todo.TaskInput", function(TaskInput){ TaskInput.fn.initialize = function(input) { this.input = input; this.emitter = Emitter.create(); this.on = $.proxy(this.emitter, "on"); }; }); https://github.com/fnando/emitter.js
64. INTERAGINDO COM O WRAPPER DO JQUERY
65. Module("Todo.TaskInput", function(TaskInput){ TaskInput.fn.initialize = function(input) { this.input = input; this.emitter = Emitter.create(); this.on = $.proxy(this.emitter, "on"); this.addEventListeners(); }; TaskInput.fn.addEventListeners = function() { this.input.on("keyup", $.proxy(this, "onKeyUp")); }; TaskInput.fn.onKeyUp = function(event) { if (event.which !== 13 || !event.target.value) { return; } this.emitter.emit("enter", event.target.value); event.target.value = ""; }; });
66. SABER JAVASCRIPT PERMITE DECIDIR QUAL A MELHOR ABORDAGEM PARA UM PROBLEMA.
67. TESTES AUTOMATIZADOS
68. AUTOMATIZE O QUE VOCÊ FARIA COM F5.
69. COMPONENTES MENORES SÃO MAIS FÁCEIS DE TESTAR.
70. describe("Calculation", function() { it("sums two numbers", function() { expect(2 + 2).toEqual(4); }); }); http://pivotal.github.io/jasmine/
71. EVENTOS, AJAX, INTERAÇÃO COM O DOM, E QUASE TODO O RESTO.
72. TESTE O QUE VOCÊ JULGA IMPORTANTE.
73. describe("Todo.TaskInput", function() { var component, input, callback, event; beforeEach(function() { input = $("<input/>").val("Some task"); callback = jasmine.createSpy("callback"); component = Todo.TaskInput(input); event = $.Event(); event.which = 13; event.type = "keyup"; }); it("triggers event on enter", function() { component.on("enter", callback); input.trigger(event); expect(callback).wasCalledWith("Some task"); }); // other tests go here. });
74. É MAIS DIFÍCIL DO QUE PARECE.
75. JAVASCRIPT PATTERNS
76. PATTERNS STANDARDS VS
78. ADAPTER COMMAND COMPOSITE DECORATOR FACADE FACTORY MIXIN MODULE NAMESPACE OBSERVER PROTOTYPE REVEALING SINGLETON MAIS
79. MVC/MV*
80. SEPARA AS APLICAÇÕES EM TRÊS PARTES CONHECIDAS COMO MODEL, VIEWS E CONTROLLERS.
81. EXISTEM POUCAS IMPLEMENTAÇÕES QUE SEGUEM O MVC PROPOSTO PELA XEROX PARC À RISCA.
82. A MAIORIA DOS FRAMEWORKS IMPLEMENTA UMA VARIAÇÃO (OU NEM IMPLEMENTA).
83. MVVM Model View ViewModel Model View Presenter Model View Adapter Model View Variation MVP MVA MV*
84. NO JAVASCRIPT, TIVEMOS UMA EXPLOSÃO DE FRAMEWORKS NOS ÚLTIMOS 2 ANOS.
85. EXISTEM MAIS DE 50 FRAMEWORKS QUE QUEREM VIRAR “O QUERIDINHO” DOS DESENVOLVEDORES.
86. http://addyosmani.github.com/todomvc/
87. CRIE SEU PRÓPRIO FRAMEWORK.
88. ISSO FARÁ COM QUE VOCÊ ENTENDA O PROBLEMA A FUNDO E DARÁ O CONHECIMENTO PARA RESOLVER O PROBLEMA.
89. DEPOIS, JOGUE TUDO FORA!
90. DEPLOY
92. $ find public -name '*.js' | wc -l 21
93. $ grunt Running "concat:dist" (concat) task File "public/javascripts/todo.bundle.js" created. Running "jshint:dist" (jshint) task >> 13 files lint free. Running "uglify:dist" (uglify) task File "public/javascripts/todo.min.js" created. Original: 298908 bytes. Minified: 107864 bytes. Gzipped: 37187 bytes. Running "cssmin:dist" (cssmin) task File public/stylesheets/todo.min.css created. Original: 2465 bytes. Minified: 1950 bytes. Gzipped: 500 bytes. Done, without errors.
94. http://fnando.me/en
95. FINALIZANDO
96. SABER JAVASCRIPT DEIXOU DE SER OPCIONAL.
97. JQUERY É (MUITO) BOM, MAS NÃO É TUDO.
98. NÃO SABER JAVASCRIPT LIMITA MUITO MAIS DO QUE VOCÊ PERCEBE.
99. PARE DE SE ESCONDER!
100. OBRIGADO!