Organizando o JavaScript (WebDay 2013)

Transcript

1. 1.

   Or anizando o JavaScript Nando Vieira

2. 2.

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

3. 3.

   hellobits.com empresa

4. 4.

   howtocode.com.br cursos

5. 5.

   codeplane.com.br it hostin

6. 6.

   * * *

7. 7.

   O JavaScript passou por al umas revoluções durante o seu

   tempo de vida.
8. 8.

   2004 Primeira revolução Goo le lançou o Gmail com uso

   de AJAX
9. 9.

   2006 Se unda revolução John Resi lançou o jQuery em

   um meetup em NY.
10. 10.

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

11. 11.

    O JavaScript é a lin ua em mais importante da

    atualidade.
12. 12.

    Dos 50 repositórios mais populares do Github, 29 repositórios são

    relacionados a JavaScript.
13. 13.

    O JavaScript já tem quase 20 anos de idade.

14. 14.

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

15. 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. 16.

    A solução é modularidade.

17. 17.

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

    o.
18. 18.

    Só a modularidade tornará possível expandir o seu códi o

    com facilidade.
19. 19.

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

20. 20.

    De quebra você ainda anha reusabilidade de componentes.

21. 21.

    E é somente assim que o seu códi o poderá

    ser testado sem dificuldades.
22. 22.

    Se temos todos esses benefícios, porque ainda não escrevemos códi

    os dessa maneira?
23. 23.

    A verdade é que a maioria dos desenvolvedores não sabe

    como fazer isso.
24. 24.

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

25. 25.

    Então, como fazer?

26. 26.

    Conhecimento

27. 27.

    Conheça a lin ua em.

28. 28.

    http://developer.mozilla.or

29. 29.

    http://howtocode.com.br

30. 30.

    http://w3scho… melhor não!

31. 31.

    http://w3fools.com

32. 32.

    Or anização

33. 33.

    Pense no seu códi o como uma série de blocos

    que precisam encaixar uns nos outros.
34. 34.

    None
35. 35.

    None
36. 36.

    None
37. 37.

    None
38. 38.

    None
39. 39.

    None
40. 40.

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

41. 41.

    Pense em como esses blocos irão se comunicar através de

    uma API pública.
42. 42.

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

    lobais.
43. 43.

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

44. 44.

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

45. 45.

    É melhor ter muitos arquivos pequenos do que poucos arquivos

    randes.
46. 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. 47.

    Lembre-se que você sempre pode concatenar e minificar o seu

    códi o antes de colocar em produção.
48. 48.

    Modularização

49. 49.

    O JavaScript possui al umas alternativas diferentes para a criação

    de módulos.
50. 50.

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

51. 51.

    var Todo = { tasks: [] , addTask: function(task) {}

    , removeTask : function() {} , count : function() {} };
52. 52.

    Object literals são muitos simples de utilizar, mas se comportam

    mais como sin letons.
53. 53.

    O Module pattern permite simular a escopo e visibilidade de

    atributos.
54. 54.

    var Todo = (function(){ var tasks = []; // private

    variable // expose the public API return { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; })();
55. 55.

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

56. 56.

    var Todo = (function($, hb){ // all your code here

    })(jQuery, Handlebars);
57. 57.

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

58. 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. 59.

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

60. 60.

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

61. 61.

    Utilize a aborda em sin le entry point.

62. 62.

    // boot.js $(function(){ var html = $("html") , controller =

    html.data("controller") , action = html.data("action") ; MyApp.Application(controller, action); });
63. 63.

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

64. 64.

    Já existe um draft de módulos nativos no JavaScript no

    ES6 Harmony.
65. 65.

    module Todo { var tasks = []; // private variable

    // expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
66. 66.

    module Todo { var tasks = []; // private variable

    // expose the public API export default { addTask: function(task) {} , removeTask: function(task) {} , count: function() {} }; }
67. 67.

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

68. 68.

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

69. 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. 70.

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

71. 71.

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

72. 72.

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

73. 73.

    Exemplo

74. 74.

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

75. 75.

    None
76. 76.

    Primeiro implemente a funcionalidade do jeito mais rápido, para entender

    o problema.
77. 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. 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. 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. 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. 81.

    Depois que você conse uiu entender o problema, escreva uma

    solução mais modular.
82. 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. 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. 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. 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. 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. 87.

    Sempre que você escreve códi os mais modulares, é muito

    mais simples escrever testes.
88. 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. 89.

    Finalizando

90. 90.

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

91. 91.

    Você nunca sabe qual vai ser o tamanho do seu

    projeto.
92. 92.

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

    bibliotecas.
93. 93.

    Mas use o que for melhor para o seu workflow.

94. 94.

    Obri ado!

95. 95.

    * * *

96. 96.

    http://howtocode.com.br