Este documento discute estruturação de projetos JavaScript usando módulos com RequireJS e testes com Jasmine. Primeiro, explica os benefícios de estruturar o código em módulos para reduzir acoplamento e dependências implícitas. Em seguida, apresenta o framework Jasmine para escrever testes de comportamento (BDD) e guiar o design antes da implementação. Por fim, resume dizendo que estrutura e testes resultam em mais flexibilidade, sossego e qualidade no desenvolvimento.
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
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
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.
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>
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. 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
29. RequireJS
● Deixa claras as dependências
● Evita globais
● Ajuda a reduzir acoplamento
● Carrega scripts automaticamente
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. 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
});