Organizando o JavaScript (Redux)

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.

Cb5d9e9095cd41b636764a85e57ade4b?s=128

Nando Vieira

May 04, 2013
Tweet

Transcript

  1. 6.
  2. 10.
  3. 12.
  4. 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.
  5. 15.
  6. 18.
  7. 19.
  8. 20.
  9. 21.

    OOP

  10. 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": ""
  11. 32.
  12. 42.
  13. 44.
  14. 45.
  15. 46.
  16. 47.
  17. 48.
  18. 49.
  19. 56.
  20. 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
  21. 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 = ""; }; });
  22. 70.

    describe("Calculation", function() { it("sums two numbers", function() { expect(2 +

    2).toEqual(4); }); }); http://pivotal.github.io/jasmine/
  23. 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. });
  24. 77.
  25. 79.
  26. 88.

    ISSO FARÁ COM QUE VOCÊ ENTENDA O PROBLEMA A FUNDO

    E DARÁ O CONHECIMENTO PARA RESOLVER O PROBLEMA.
  27. 90.
  28. 91.
  29. 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.
  30. 100.