Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Organizando o JavaScript (WebDay 2013)

Organizando o JavaScript (WebDay 2013)

Palestra apresentada no WebDay 2013

Nando Vieira

July 20, 2013
Tweet

More Decks by Nando Vieira

Other Decks in Programming

Transcript

  1. Or anizando o
    JavaScript
    Nando Vieira

    View Slide

  2. Nando Vieira
    http://simplesideias.com.br
    @fnando

    View Slide

  3. hellobits.com
    empresa

    View Slide

  4. howtocode.com.br
    cursos

    View Slide

  5. codeplane.com.br
    it hostin

    View Slide

  6. * * *

    View Slide

  7. O JavaScript passou por al umas
    revoluções durante o seu tempo de vida.

    View Slide

  8. 2004 Primeira revolução
    Goo le lançou o Gmail com uso de AJAX

    View Slide

  9. 2006 Se unda revolução
    John Resi lançou o jQuery em um meetup em NY.

    View Slide

  10. 2009 Terceira revolução
    Ryan Dahl lançou o Node.js

    View Slide

  11. O JavaScript é a lin ua em mais
    importante da atualidade.

    View Slide

  12. Dos 50 repositórios mais populares
    do Github, 29 repositórios são
    relacionados a JavaScript.

    View Slide

  13. O JavaScript já tem quase 20 anos de idade.

    View Slide

  14. Por que a ente ainda escreve códi os ruins?

    View Slide

  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": ""

    View Slide

  16. A solução é modularidade.

    View Slide

  17. Só a modularidade permitirá separar
    as responsabilidades do seu códi o.

    View Slide

  18. Só a modularidade tornará possível
    expandir o seu códi o com facilidade.

    View Slide

  19. Só a modularidade tornará possível
    a manutenção do seu codebase.

    View Slide

  20. De quebra você ainda anha
    reusabilidade de componentes.

    View Slide

  21. E é somente assim que o seu códi o
    poderá ser testado sem dificuldades.

    View Slide

  22. Se temos todos esses benefícios, porque ainda
    não escrevemos códi os dessa maneira?

    View Slide

  23. A verdade é que a maioria dos
    desenvolvedores não sabe como fazer isso.

    View Slide

  24. E porque escrever códi os
    modulares pode ser difícil.

    View Slide

  25. Então, como fazer?

    View Slide

  26. Conhecimento

    View Slide

  27. Conheça a lin ua em.

    View Slide

  28. http://developer.mozilla.or

    View Slide

  29. http://howtocode.com.br

    View Slide

  30. http://w3scho… melhor não!

    View Slide

  31. http://w3fools.com

    View Slide

  32. Or anização

    View Slide

  33. Pense no seu códi o como uma série de blocos
    que precisam encaixar uns nos outros.

    View Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. Muitos outros componentes serão criados
    à partir dessa estrutura.

    View Slide

  41. Pense em como esses blocos irão se
    comunicar através de uma API pública.

    View Slide

  42. Não referencie objetos diretamente do
    DOM, nem acesse outros objetos lobais.

    View Slide

  43. Passe todas as dependências como
    ar umentos da função construtora.

    View Slide

  44. Cada um desses blocos pode
    ter o seu próprio arquivo.

    View Slide

  45. É melhor ter muitos arquivos pequenos
    do que poucos arquivos randes.

    View Slide

  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

    View Slide

  47. Lembre-se que você sempre pode
    concatenar e minificar o seu códi o
    antes de colocar em produção.

    View Slide

  48. Modularização

    View Slide

  49. O JavaScript possui al umas alternativas
    diferentes para a criação de módulos.

    View Slide

  50. Você pode utilizar a ideia de namespaces
    com object literals.

    View Slide

  51. var Todo = {
    tasks: []
    , addTask: function(task) {}
    , removeTask : function() {}
    , count : function() {}
    };

    View Slide

  52. Object literals são muitos simples de utilizar,
    mas se comportam mais como sin letons.

    View Slide

  53. O Module pattern permite simular a
    escopo e visibilidade de atributos.

    View Slide

  54. var Todo = (function(){
    var tasks = []; // private variable
    // expose the public API
    return {
    addTask: function(task) {}
    , removeTask: function(task) {}
    , count: function() {}
    };
    })();

    View Slide

  55. O Module pattern também permite fazer
    a injeção de dependências.

    View Slide

  56. var Todo = (function($, hb){
    // all your code here
    })(jQuery, Handlebars);

    View Slide

  57. Eu costumo usar uma variação de
    Module pattern com namespace.

    View Slide

  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
    };
    });

    View Slide

  59. http:// ithub.com/fnando/module.js

    View Slide

  60. Dependência entre os módulos não é um problema.

    View Slide

  61. Utilize a aborda em sin le entry point.

    View Slide

  62. // boot.js
    $(function(){
    var html = $("html")
    , controller = html.data("controller")
    , action = html.data("action")
    ;
    MyApp.Application(controller, action);
    });

    View Slide

  63. Existem outras alternativas de
    módulos como AMD e CommonJS.

    View Slide

  64. Já existe um draft de módulos nativos
    no JavaScript no ES6 Harmony.

    View Slide

  65. module Todo {
    var tasks = []; // private variable
    // expose the public API
    export default {
    addTask: function(task) {}
    , removeTask: function(task) {}
    , count: function() {}
    };
    }

    View Slide

  66. module Todo {
    var tasks = []; // private variable
    // expose the public API
    export default {
    addTask: function(task) {}
    , removeTask: function(task) {}
    , count: function() {}
    };
    }

    View Slide

  67. import Todo from Todo;
    Todo.addTask(task);

    View Slide

  68. Os módulos podem ser
    importados através de URLs.

    View Slide

  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
    });

    View Slide

  70. Você pode ser específico sobre o
    que quer importar.

    View Slide

  71. import { a, b, c } from "some/file";

    View Slide

  72. Ainda está em discussão.
    http://fnando.me/jp

    View Slide

  73. Exemplo

    View Slide

  74. Vamos implementar um postbox.
    http://fnando.me/jq

    View Slide

  75. View Slide

  76. Primeiro implemente a funcionalidade do
    jeito mais rápido, para entender o problema.

    View Slide

  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");
    }
    })
    ;

    View Slide

  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");
    }
    })
    ;

    View Slide

  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");
    }
    })
    ;

    View Slide

  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");
    }
    })
    ;

    View Slide

  81. Depois que você conse uiu entender o
    problema, escreva uma solução mais modular.

    View Slide

  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");
    };
    });

    View Slide

  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))
    ;
    };
    });

    View Slide

  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")
    ;
    };
    });

    View Slide

  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");
    }
    };
    });

    View Slide

  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");
    }
    };
    });

    View Slide

  87. Sempre que você escreve códi os mais
    modulares, é muito mais simples escrever testes.

    View Slide

  88. describe("HOWTO.Postbox", function() {
    var container, postbox, textarea;
    beforeEach(function() {
    container = $("")
    .append("")
    .append("")
    .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
    });

    View Slide

  89. Finalizando

    View Slide

  90. Todo aplicativo complexo deve ser
    quebrado em pedaços menores.

    View Slide

  91. Você nunca sabe qual vai ser
    o tamanho do seu projeto.

    View Slide

  92. Códi os modulares podem ser
    escritos sem o uso de bibliotecas.

    View Slide

  93. Mas use o que for melhor para o seu workflow.

    View Slide

  94. Obri ado!

    View Slide

  95. * * *

    View Slide

  96. http://howtocode.com.br

    View Slide