JavaScript Firme: Módulos com RequireJS e BDD com Jasmine

1,821
-1

Published on

Introdução a modularidade com RequireJS e BDD com Jasmine. Tais ferramentas permitem criar uma estrutura firme para desenvolver projetos JavaScript. Projetos estruturados dessa maneira podem rodar tanto no navegador quanto no NodeJS.

Demonstrações disponíveis em:
https://github.com/awvalenti/javascript-firme

Published in: Technology
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,821
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
37
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

JavaScript Firme: Módulos com RequireJS e BDD com Jasmine

  1. 1. JavaScript Firme: Módulos com RequireJS e BDD com Jasmine André Valenti #TDC2013 - The Developer's Conference #QConSP São Paulo - SP
  2. 2. André Valenti Professor de Ensino Tecnológico no IFSP São Carlos Sobre mim
  3. 3. Sobre mim ● Desenvolvedor durante 4,5 anos ● Principais experiências: ○ Java ○ JavaScript / Node.js / CoffeeScript ○ Jogos HTML5 ○ Groovy / Grails ○ PostgreSQL
  4. 4. Pergunta: ● Você tem medo de alterar seu projeto?
  5. 5. Estrutura ● Projetos crescem ● Alterações são inevitáveis ● Firme na base, flexível no topo
  6. 6. Firmeza estrutura_firme ⇒ sossego
  7. 7. Firmeza estrutura_firme ⇒ sossego (mentira!) ¬estrutura_firme ⇒ ¬sossego (verdade) estrutura_firme tende a⇒ sossego (verdade)
  8. 8. Estrutura ● Sintomas de base frouxa: ○ Criar novo módulo dá muito trabalho ○ Alterações de negócio quebram o projeto ● Sintomas de topo engessado: ○ Evoluir código dá muito trabalho ○ Refatorar dá muito trabalho
  9. 9. JavaScript Linguagem de programação com uma certa importância...
  10. 10. JavaScript Das linguagem usadas pelos projetos hospedados no GitHub, JavaScript é primeira, representando 21% do total. As próximas são: Ruby (12%), Java (8%), Shell (8%), Python (8%), PHP (7%), C (6%), C++ (5%), Perl (4%) e CoffeeScript (3%). https://github.com/languages
  11. 11. JavaScript Orientação a Objetos em JavaScript:
  12. 12. JavaScript Uma classe chamada MinhaClasse, com um campo chamado valor, do tipo int, privado; um método chamado metodo1, público, sem parâmetros, sem valor de retorno; um método chamado metodo2, público, com 2 parâmetros do tipo int, com retorno do tipo int.
  13. 13. JavaScript function MinhaClasse(valor) { this._valor = valor; }
  14. 14. JavaScript function MinhaClasse(valor) { this._valor = valor; } MinhaClasse.prototype.metodo1 = function() { };
  15. 15. JavaScript function MinhaClasse(valor) { this._valor = valor; } MinhaClasse.prototype.metodo1 = function() { }; MinhaClasse.prototype.metodo2 = function(a, b) { return this._valor + a + b; };
  16. 16. JavaScript function MinhaClasse(valor) { this._valor = valor; } MinhaClasse.prototype.metodo1 = function() { }; MinhaClasse.prototype.metodo2 = function(a, b) { return this._valor + a + b; }; new MinhaClasse(1).metodo2(3, 4);
  17. 17. JavaScript Exemplo: jogo de xadrez
  18. 18. JavaScript ● Como organizar o código? ● Como estruturar o projeto?
  19. 19. "Cria logo um HTML aí e manda ver!" (MacGyver)
  20. 20. xadrez-macgyver-1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <title>Título da Página</title> </head> <body> <h1>Título da Página</h1> <script> // Seu código JavaScript aqui! </script> </body> </html>
  21. 21. xadrez-macgyver-1 Em pouco tempo, seu projeto ficará assim:
  22. 22. xadrez-macgyver-1 (código imenso dentro do HTML)
  23. 23. JavaScript ● Dá para melhorar isso aí! ● De que jeito?
  24. 24. "Cria uns .js, mete uns <script> e já era!" (MacGyver)
  25. 25. xadrez-macgyver-2 <html> <head> ... </head> <body> ... <script src="js/src/Jogador.js"></script> <script src="js/src/Posicao.js"></script> <script src="js/src/Xadrez.js"></script> <script src="js/src/xadrez-main.js"></script> </body> </html>
  26. 26. xadrez-macgyver-(1|2) Código dos projetos disponível no GitHub: git clone https://github.com/awvalenti/javascript-firme.git cd javascript-firme/xadrez-macgyver-1 cd javascript-firme/xadrez-macgyver-2
  27. 27. xadrez-macgyver-(1|2) ● Problemas: ○ Exige ficar acrescentando <script> ○ Cria globais (variáveis, funções, classes) ○ Dependências ficam mascaradas ○ Forte tendência a acoplamento ○ Não vai rodar no NodeJS
  28. 28. RequireJS ● http://requirejs.org/ ● Gestor de módulos ● Compatível com navegadores e com NodeJS
  29. 29. RequireJS ● Deixa claras as dependências ● Evita globais ● Ajuda a reduzir acoplamento ● Carrega scripts automaticamente
  30. 30. Sem RequireJS // MinhaClasse.js function MinhaClasse() { this._objeto1 = new Classe1(); this._objeto2 = new Classe2(); } // Problemas: // - dependências implícitas: Classe1 e Classe2 // // - obrigatoriedade de elementos <script> no HTML // // - globais: Classe1, Classe2 e MinhaClasse
  31. 31. Com RequireJS // MinhaClasse.js define(['Classe1', 'Classe2'], // dependências explícitas function(Classe1, Classe2) { function MinhaClasse() { // tudo é importado automaticamente this._objeto1 = new Classe1(); this._objeto2 = new Classe2(); } MinhaClasse.prototype.meuMetodo = function() {}; return MinhaClasse; // não gera globais });
  32. 32. Sem RequireJS <html> <head> ... </head> <body> ... <script src="js/src/Jogador.js"></script> <script src="js/src/Posicao.js"></script> <script src="js/src/Xadrez.js"></script> <script src="js/src/xadrez-main.js"></script> </body> </html>
  33. 33. Com RequireJS <html> <head> ... </head> <body> ... <script src="js/lib/require.js" data-main="js/src/xadrez-main.js"></script> </body> </html>
  34. 34. xadrez-modular git clone https://github.com/awvalenti/javascript-firme.git cd javascript-firme/xadrez-modular
  35. 35. Modelagem Xadrez pode ser modelado de várias maneiras...
  36. 36. Modelagem 1 Classes: Xadrez, Jogador
  37. 37. Modelagem 2 Classes: Jogador, Tabuleiro, Casa, Peça, TipoPeça
  38. 38. Modelagem 3 Classes: Jogador, Time, CorTime, Tabuleiro, Peça, TipoPeça
  39. 39. Modelagem ● Perguntas: ○ Qual das três é mais adequada? ○ As classes estão boas assim? ○ Será útil ter a classe Jogador desde já?
  40. 40. Modelagem ● São perguntas difíceis de se responder...
  41. 41. Modelagem ● São perguntas difíceis de se responder... ● ...no início do projeto!
  42. 42. BDD ● http://en.wikipedia.org/wiki/Behavior- driven_development ● Especificação de comportamentos antes de implementar funcionalidades ● Requisitos guiando o design de código, de maneira incremental ● APIs sendo criadas antes de implementações
  43. 43. Jasmine ● http://pivotal.github.io/jasmine/ ● Framework para BDD em JavaScript ● Roda tanto no navegador quanto no NodeJS ● Escrevem-se specs usando-se describe e it
  44. 44. Jasmine describe('MeuObjeto', function() { describe('no cenario XYZ', function() { it('deve comportar-se da maneira W', function() { expect(meuObjeto.getOQueEstaFazendo()).toBe('W'); }); it('deve acontecer tal outra coisa', function() { expect(meuObjeto.getTalOutraCoisa()).toBe(true); }); }); });
  45. 45. Jasmine ● Na verdade, usa-se também um beforeEach para criar o objeto:
  46. 46. Jasmine describe('MeuObjeto', function() { var meuObjeto = null; beforeEach(function() { meuObjeto = new MeuObjeto(); }); describe('no cenario XYZ', function() { it('deve comportar-se da maneira W', function() { expect(meuObjeto.getOQueEstaFazendo()).toBe('W'); }); it('deve acontecer tal outra coisa', function() { expect(meuObjeto.getTalOutraCoisa()).toBe(true); }); }); });
  47. 47. Exemplo padrão do Jasmine git clone https://github.com/awvalenti/javascript-firme.git cd javascript-firme/exemplo-padrao-jasmine (ou https://github.com/downloads/pivotal/jasmine/jasmine-standalone-1.3.1.zip)
  48. 48. xadrez-especificado git clone https://github.com/awvalenti/javascript-firme.git cd javascript-firme/xadrez-especificado
  49. 49. xadrez-modular-e-especificado git clone https://github.com/awvalenti/javascript-firme.git cd javascript-firme/xadrez-modular-e-especificado
  50. 50. Conclusões ● Firme na base, flexível no topo ● Fazer sem estrutura… ○ ...funciona no começo, depois capenga ○ (experiência própria!)
  51. 51. Conclusões Não seja MacGyver, seja Profissional!
  52. 52. Conclusões MacGyvers têm mais dor de cabeça MacGyver: "I really hope this works... Trust me, I know about this stuff."
  53. 53. Conclusões Profissionais têm mais sossego Neo: "Sussa."
  54. 54. Obrigado! ● André Valenti ("Fi") ● São Carlos-SP ● Professor no IFSP ● Contato: ○ E-mail: awvalenti@gmail.com ○ Twitter: @awvFi ○ Blog: aosfi.blogspot.com ○ SlideShare: slideshare.net/AndrFi
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×