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

JavaScript Firme:
Módulos com RequireJS
e
BDD com Jasmine
André Valenti
#TDC2013 - The Developer's Conference
#QConSP
São Paulo - SP

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 HTML5
○ Groovy / Grails
○ PostgreSQL

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 (verdade)

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

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

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ú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.

JavaScript
function MinhaClasse(valor) {
this._valor = valor;
}

JavaScript
}
MinhaClasse.prototype.metodo1 = function() {
};

JavaScript
}
};
MinhaClasse.prototype.metodo2 = function(a, b) {
return this._valor + a + b;
};

JavaScript
}
};
MinhaClasse.prototype.metodo2 = function(a, b) {
return this._valor + a + b;
};
new MinhaClasse(1).metodo2(3, 4);

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

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/Posicao.js"></script>
<script src="js/src/Xadrez.js"></script>
<script src="js/src/xadrez-main.js"></script>
</body>
</html>

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

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

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();
}
// Problemas:
// - dependências implícitas: Classe1 e Classe2
//
// - obrigatoriedade de elementos <script> no HTML
//
// - globais: Classe1, Classe2 e MinhaClasse

Com RequireJS
// MinhaClasse.js
define(['Classe1', 'Classe2'], // dependências explícitas
function(Classe1, Classe2) {
function MinhaClasse() {
// tudo é importado automaticamente
}
MinhaClasse.prototype.meuMetodo = function() {};
return MinhaClasse; // não gera globais
});

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>

Com RequireJS
<html>
<head> ... </head>
<body> ...
<script src="js/lib/require.js"
data-main="js/src/xadrez-main.js"></script>
</body>
</html>

xadrez-modular
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 desde já?

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 funcionalidades
● Requisitos guiando o design de código, de
maneira incremental
● APIs sendo criadas antes de implementações

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

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

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

Exemplo padrão do Jasmine
cd javascript-firme/exemplo-padrao-jasmine
(ou https://github.com/downloads/pivotal/jasmine/jasmine-standalone-1.3.1.zip)

xadrez-especificado
cd javascript-firme/xadrez-especificado

xadrez-modular-e-especificado
cd javascript-firme/xadrez-modular-e-especificado

Conclusões
● Firme na base, flexível no topo
● Fazer sem estrutura…
○ ...funciona no começo, depois capenga
○ (experiência própria!)

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: @awvFi
○ Blog: aosfi.blogspot.com
○ SlideShare: slideshare.net/AndrFi

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

Mais conteúdo relacionado

Mais procurados (20)

Semelhante a JavaScript Firme: Módulos com RequireJS e BDD com Jasmine (20)

Mais de André Willik Valenti (6)

Último (19)

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