Organizando o JavaScript (WebDay 2013)

Palestra apresentada no WebDay 2013

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