Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
JavaScript Firme:
Módulos com RequireJS
e
BDD com Jasmine
André Valenti
#TDC2013 - The Developer's Conference
#QConSP
São ...
André Valenti
Professor de Ensino Tecnológico no
IFSP São Carlos
Sobre mim
Sobre mim
● Desenvolvedor durante 4,5 anos
● Principais experiências:
○ Java
○ JavaScript / Node.js / CoffeeScript
○ Jogos...
Pergunta:
● Você tem medo de alterar seu projeto?
Estrutura
● Projetos crescem
● Alterações são inevitáveis
● Firme na base, flexível no topo
Firmeza
estrutura_firme ⇒ sossego
Firmeza
estrutura_firme ⇒ sossego (mentira!)
¬estrutura_firme ⇒ ¬sossego (verdade)
estrutura_firme tende a⇒ sossego (verda...
Estrutura
● Sintomas de base frouxa:
○ Criar novo módulo dá muito trabalho
○ Alterações de negócio quebram o projeto
● Sin...
JavaScript
Linguagem de programação com uma certa
importância...
JavaScript
Das linguagem usadas pelos projetos
hospedados no GitHub, JavaScript é primeira,
representando 21% do total.
As...
JavaScript
Orientação a Objetos em JavaScript:
JavaScript
Uma classe chamada MinhaClasse, com um campo
chamado valor, do tipo int, privado; um método
chamado metodo1, pú...
JavaScript
function MinhaClasse(valor) {
this._valor = valor;
}
JavaScript
function MinhaClasse(valor) {
this._valor = valor;
}
MinhaClasse.prototype.metodo1 = function() {
};
JavaScript
function MinhaClasse(valor) {
this._valor = valor;
}
MinhaClasse.prototype.metodo1 = function() {
};
MinhaClass...
JavaScript
function MinhaClasse(valor) {
this._valor = valor;
}
MinhaClasse.prototype.metodo1 = function() {
};
MinhaClass...
JavaScript
Exemplo: jogo de xadrez
JavaScript
● Como organizar o código?
● Como estruturar o projeto?
"Cria logo um HTML aí e manda ver!"
(MacGyver)
xadrez-macgyver-1
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<...
xadrez-macgyver-1
Em pouco tempo, seu projeto ficará assim:
xadrez-macgyver-1
(código imenso dentro do HTML)
JavaScript
● Dá para melhorar isso aí!
● De que jeito?
"Cria uns .js, mete uns <script> e já era!"
(MacGyver)
xadrez-macgyver-2
<html>
<head> ... </head>
<body> ...
<script src="js/src/Jogador.js"></script>
<script src="js/src/Posic...
xadrez-macgyver-(1|2)
Código dos projetos disponível no GitHub:
git clone https://github.com/awvalenti/javascript-firme.gi...
xadrez-macgyver-(1|2)
● Problemas:
○ Exige ficar acrescentando <script>
○ Cria globais (variáveis, funções, classes)
○ Dep...
RequireJS
● http://requirejs.org/
● Gestor de módulos
● Compatível com navegadores e com NodeJS
RequireJS
● Deixa claras as dependências
● Evita globais
● Ajuda a reduzir acoplamento
● Carrega scripts automaticamente
Sem RequireJS
// MinhaClasse.js
function MinhaClasse() {
this._objeto1 = new Classe1();
this._objeto2 = new Classe2();
}
/...
Com RequireJS
// MinhaClasse.js
define(['Classe1', 'Classe2'], // dependências explícitas
function(Classe1, Classe2) {
fun...
Sem RequireJS
<html>
<head> ... </head>
<body> ...
<script src="js/src/Jogador.js"></script>
<script src="js/src/Posicao.j...
Com RequireJS
<html>
<head> ... </head>
<body> ...
<script src="js/lib/require.js"
data-main="js/src/xadrez-main.js"></scr...
xadrez-modular
git clone https://github.com/awvalenti/javascript-firme.git
cd javascript-firme/xadrez-modular
Modelagem
Xadrez pode ser modelado de várias maneiras...
Modelagem 1
Classes: Xadrez, Jogador
Modelagem 2
Classes: Jogador, Tabuleiro, Casa, Peça,
TipoPeça
Modelagem 3
Classes: Jogador, Time, CorTime, Tabuleiro,
Peça, TipoPeça
Modelagem
● Perguntas:
○ Qual das três é mais adequada?
○ As classes estão boas assim?
○ Será útil ter a classe Jogador de...
Modelagem
● São perguntas difíceis de se responder...
Modelagem
● São perguntas difíceis de se responder...
● ...no início do projeto!
BDD
● http://en.wikipedia.org/wiki/Behavior-
driven_development
● Especificação de comportamentos antes de
implementar fun...
Jasmine
● http://pivotal.github.io/jasmine/
● Framework para BDD em JavaScript
● Roda tanto no navegador quanto no NodeJS
...
Jasmine
describe('MeuObjeto', function() {
describe('no cenario XYZ', function() {
it('deve comportar-se da maneira W', fu...
Jasmine
● Na verdade, usa-se também um beforeEach
para criar o objeto:
Jasmine
describe('MeuObjeto', function() {
var meuObjeto = null;
beforeEach(function() {
meuObjeto = new MeuObjeto();
});
...
Exemplo padrão do Jasmine
git clone https://github.com/awvalenti/javascript-firme.git
cd javascript-firme/exemplo-padrao-j...
xadrez-especificado
git clone https://github.com/awvalenti/javascript-firme.git
cd javascript-firme/xadrez-especificado
xadrez-modular-e-especificado
git clone https://github.com/awvalenti/javascript-firme.git
cd javascript-firme/xadrez-modul...
Conclusões
● Firme na base, flexível no topo
● Fazer sem estrutura…
○ ...funciona no começo, depois capenga
○ (experiência...
Conclusões
Não seja MacGyver, seja Profissional!
Conclusões
MacGyvers têm mais dor de cabeça
MacGyver: "I really hope this works... Trust me, I know about this stuff."
Conclusões
Profissionais têm mais sossego
Neo: "Sussa."
Obrigado!
● André Valenti ("Fi")
● São Carlos-SP
● Professor no IFSP
● Contato:
○ E-mail: awvalenti@gmail.com
○ Twitter: @...
Upcoming SlideShare
Loading in …5
×

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

2,436 views

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
  • Be the first to comment

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

×