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

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

Embed Size (px)

DESCRIPTION

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

Citation preview

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

JavaScript Firme:

Módulos com RequireJSe

BDD com JasmineAndré Valenti

#TDC2013 - The Developer's Conference#QConSP

São Paulo - SP

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

André Valenti

Professor de Ensino Tecnológico noIFSP São Carlos

Sobre mim

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

Sobre mim● Desenvolvedor durante 4,5 anos

● Principais experiências:○ Java○ JavaScript / Node.js / CoffeeScript○ Jogos HTML5○ Groovy / Grails○ PostgreSQL

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

Pergunta:● Você tem medo de alterar seu projeto?

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

Estrutura● Projetos crescem

● Alterações são inevitáveis

● Firme na base, flexível no topo

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

Firmezaestrutura_firme ⇒ sossego

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

Firmezaestrutura_firme ⇒ sossego (mentira!)

¬estrutura_firme ⇒ ¬sossego (verdade)

estrutura_firme tende a⇒ sossego (verdade)

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

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

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

JavaScriptLinguagem de programação com uma certa importância...

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

JavaScriptDas 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

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

JavaScriptOrientação a Objetos em JavaScript:

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

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

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

JavaScriptfunction MinhaClasse(valor) {

this._valor = valor;

}

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

JavaScriptfunction MinhaClasse(valor) {

this._valor = valor;

}

MinhaClasse.prototype.metodo1 = function() {

};

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

JavaScriptfunction MinhaClasse(valor) {

this._valor = valor;

}

MinhaClasse.prototype.metodo1 = function() {

};

MinhaClasse.prototype.metodo2 = function(a, b) {

return this._valor + a + b;

};

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

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

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

JavaScriptExemplo: jogo de xadrez

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

JavaScript● Como organizar o código?

● Como estruturar o projeto?

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

"Cria logo um HTML aí e manda ver!" (MacGyver)

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

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>

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

xadrez-macgyver-1Em pouco tempo, seu projeto ficará assim:

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

xadrez-macgyver-1

(código imenso dentro do HTML)

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

JavaScript● Dá para melhorar isso aí!

● De que jeito?

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

"Cria uns .js, mete uns <script> e já era!" (MacGyver)

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

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>

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

xadrez-macgyver-(1|2)Código dos projetos disponível no GitHub:

git clone https://github.com/awvalenti/javascript-firme.gitcd javascript-firme/xadrez-macgyver-1cd javascript-firme/xadrez-macgyver-2

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

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

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

RequireJS● http://requirejs.org/

● Gestor de módulos

● Compatível com navegadores e com NodeJS

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

RequireJS● Deixa claras as dependências

● Evita globais

● Ajuda a reduzir acoplamento

● Carrega scripts automaticamente

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

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

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

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

});

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

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>

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

Com RequireJS<html>

<head> ... </head>

<body> ...

<script src="js/lib/require.js"

data-main="js/src/xadrez-main.js"></script>

</body>

</html>

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

xadrez-modulargit clone https://github.com/awvalenti/javascript-firme.gitcd javascript-firme/xadrez-modular

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

ModelagemXadrez pode ser modelado de várias maneiras...

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

Modelagem 1Classes: Xadrez, Jogador

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

Modelagem 2Classes: Jogador, Tabuleiro, Casa, Peça,

TipoPeça

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

Modelagem 3Classes: Jogador, Time, CorTime, Tabuleiro,

Peça, TipoPeça

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

Modelagem● Perguntas:

○ Qual das três é mais adequada?○ As classes estão boas assim?○ Será útil ter a classe Jogador desde já?

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

Modelagem● São perguntas difíceis de se responder...

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

Modelagem● São perguntas difíceis de se responder...

● ...no início do projeto!

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

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

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

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

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

Jasminedescribe('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);

});

});

});

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

Jasmine● Na verdade, usa-se também um beforeEach

para criar o objeto:

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

Jasminedescribe('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);

});

});

});

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

Exemplo padrão do Jasminegit clone https://github.com/awvalenti/javascript-firme.gitcd javascript-firme/exemplo-padrao-jasmine

(ou https://github.com/downloads/pivotal/jasmine/jasmine-standalone-1.3.1.zip)

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

xadrez-especificadogit clone https://github.com/awvalenti/javascript-firme.gitcd javascript-firme/xadrez-especificado

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

xadrez-modular-e-especificadogit clone https://github.com/awvalenti/javascript-firme.gitcd javascript-firme/xadrez-modular-e-especificado

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

Conclusões● Firme na base, flexível no topo

● Fazer sem estrutura…○ ...funciona no começo, depois capenga○ (experiência própria!)

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

ConclusõesNão seja MacGyver, seja Profissional!

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

ConclusõesMacGyvers têm mais dor de cabeça

MacGyver: "I really hope this works... Trust me, I know about this stuff."

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

ConclusõesProfissionais têm mais sossego

Neo: "Sussa."

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

Obrigado!● André Valenti ("Fi")● São Carlos-SP● Professor no IFSP

● Contato:○ E-mail: [email protected]○ Twitter: @awvFi○ Blog: aosfi.blogspot.com○ SlideShare: slideshare.net/AndrFi