amd, bdd, e o javali
DESCRIPTION
Saiba como manter seu JavaScript modular, testado e automatizado, utilizando algumas ferramentas como: RequireJS, Mocha e GruntJS. - Rupy Brazil 2013TRANSCRIPT
![Page 1: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/1.jpg)
AMD, BDD e o Javali
"PROGRAMMING IS ACRAFT NOT SCIENCE OR
ENGINEERING"John Graham Cumming
![Page 2: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/2.jpg)
É uma combinação de habilidades e experiência expressada pormeio de ferramentas, o artersão escolhe suas ferramentas
específicas e aprende a usá-las para criar sua arte.
![Page 3: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/3.jpg)
GIVEN THAT IT'S A CRAFT THEN IT'S NOT HARD TO SEE THAT:experience matterstools matterintuition matters
![Page 4: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/4.jpg)
AMDAsynchronous Module Definition!
![Page 5: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/5.jpg)
REQUIRE JS
![Page 6: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/6.jpg)
O RequireJS surgiu em setembro de 2009, com a proposta de serum carregador de módulos para javascript.
![Page 7: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/7.jpg)
Hoje ele gerencia as dependências do seu programa
![Page 8: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/8.jpg)
O PROBLEMA: ESCREVER CÓDIGO MODULAR.
![Page 9: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/9.jpg)
MODULARIZAÇÃO VS ACOPLAMENTOAcoplamento:
Gera dependênciaDificulta o crescimento
Não simpatiza com TDD|BDDDificulta entendimento do código
Impossibilita reutilizaçãoGera propagação de mudanças
![Page 10: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/10.jpg)
MODULARIZAÇÃO VS ACOPLAMENTOModularização:
Menos dependênciasFácil evolução
Facilidade na hora de testarSimples de ler
Facilidade de reutilizaçãoLiberdade para alterações
![Page 11: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/11.jpg)
ENTÃO EU SÓ CONSIGO ESCREVER JAVASCRIPT MODULAR SEEU USAR UMA BIBLIOTECA? NÃO!
ENTÃO PORQUE REQUIREJS?
![Page 12: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/12.jpg)
AMD IS NOT THEANSWER
Tom Dale
![Page 13: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/13.jpg)
Many HTTP Requests!Too Much CeremonyThe alternative!
![Page 14: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/14.jpg)
PLEASE, SHOW ME THE CODE!
![Page 15: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/15.jpg)
define(['jquery'], function ($) { function PhotoGallery () { this.thumbs = $('.gallery-thumb'); this.highlights = $('.gallery-highlight'); this.activePhoto = $('.gallery-highlight.on'); this.thumbs.on('mouseenter', $.proxy(this.onThumbHover, this)); } PhotoGallery.prototype.onThumbHover = function (ev) { var $currentTarget = $(ev.currentTarget), index = $currentTarget.attr('data-index'); this.activePhoto.removeClass('on'); this.activePhoto = $(this.highlights[index]); this.activePhoto.addClass('on'); } return PhotoGallery; });
![Page 16: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/16.jpg)
define([ 'jquery'], function ($) { 'use strict'; $.fn.expandContent = function () { this.each(function(key, element){ var $element = $(element), content, styleClass; $element.click(function(event){ event.preventDefault(); content = $element.attr('data-content'); $element.removeClass('clickable'); var $content = $(content); $content.show(); })
}) }});
![Page 17: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/17.jpg)
require.config({ baseUrl: "scripts/" shim: { "backbone": { deps: ["underscore", "jquery"], exports: "Backbone" } }, paths: { "mout": "../vendor/mout/src", "text": "../vendor/requirejs-text/text", "hbars": "../vendor/requirejs-handlebars/hbars", "jquery": "../vendor/jquery/jquery", "facebook": "https://connect.facebook.net/pt_BR/all", "leaflet": "http://cdn.leafletjs.com/leaflet-0.6.4/leaflet" }});
![Page 18: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/18.jpg)
define([ 'hbars!securityBundle/templates/user/card', 'jquery'], function (template, $) { 'use strict'; return function (container, user, player) { var $container = $(container); Handlebars.registerHelper( 'getPlayerPointsPercent', $.proxy(player.getPointsPercent, player) ); Handlebars.registerHelper( 'getUserFirstName', $.proxy(user.getFirstName, user) ); $container.html( template({ 'user': user, 'player': player }) ); };});
![Page 19: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/19.jpg)
BDDBehavior-driven development
Desenvolvimento orientado ao comportamento
![Page 20: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/20.jpg)
TDDPor onde começar?
O que testar? O que não testar?
![Page 21: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/21.jpg)
BDD!Tests are Specs
O teste pode ser a sua documentação.A palavra should te mantém no foco do teste.O nome do teste ajuda quando o teste falha.O should te faz questionar a premissa do teste.Qual a proxima coisa mais importante que o seu sistema nãofaz ainda?
![Page 22: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/22.jpg)
"O BDD EVOLUIU DE PRÁTICA ÁGEIS"Como um [X]Eu quero [Y]Para que [Z]
Dado algum contexto inicial.Quando algum evento ocorrer.Então verificar os resultados.
![Page 23: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/23.jpg)
MOCHA
![Page 24: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/24.jpg)
UM FRAMEWORK DE TESTES JAVASCRIPT (NODE.JS EBROWSER) PARA SIMPLIFICAR TESTES ASSÍNCRONOS
![Page 25: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/25.jpg)
POR ONDE COMEÇAR
Você precisa escolher uma biblioteca de asserts:
should.jsexpect.jschaibetter-assert
![Page 26: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/26.jpg)
Show me the code!describe('Array', function() { describe('#indexOf()', function(){ it('should return -1 when the value is not present', function(){ assert.equal(-1, [1,2,3].indexOf(5)); assert.equal(-1, [1,2,3].indexOf(0)); }) })});
![Page 27: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/27.jpg)
require([ 'modules/photo-gallery/main'], function (PhotoGallery){ 'use strict'; function createDomScope () { var i = 0, l = 5, dl, dt, dd; dl = document.createElement('dl'); for (i = 0; i < l; i += 1) { var dt = document.createElement('dt'); dt.className += 'gallery-highlight'; if (i == 0) { dt.className += ' on'; } dl.appendChild(dt); } for (i = 0; i < l; i += 1) { var dd = document.createElement('dd'); dd.className += 'gallery-thumb'; dd.setAttribute('data-index', i); dl.appendChild(dd); } return dl; } describe('Photo Gallery', function () { var photoGallery, domScope, testArea, $thumbs, $highlights, $activeHighlight, i, l, dataIndex; before(function () { domScope = createDomScope(); testArea = document.getElementById('testArea'); testArea.appendChild(domScope); photoGallery = new PhotoGallery();
![Page 28: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/28.jpg)
O seu SpecRunner:< body>< link href="../bower_components/mocha/mocha.css" rel="stylesheet" media="screen" />< script src="../bower_components/requirejs/require.js">< script src="../bower_components/mocha/mocha.js">< script src="../bower_components/expect/expect.js">
![Page 29: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/29.jpg)
Rodando seus testes:< script type="text/javascript"> var specs = [ 'specs/module.spec', 'specs/component.spec', 'specs/feature.spec' ]; require.config({ ... }); mocha.setup('bdd'); require( specs, function () { mocha.run() });< /script>< /body>
![Page 30: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/30.jpg)
O RESULTADO NO NAVEGADOR:
![Page 31: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/31.jpg)
O RESULTADO NO TERMINAL:
![Page 32: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/32.jpg)
GRUNTJS
![Page 33: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/33.jpg)
O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITOEM JAVASCRIPT.
TAREFAS DA ROTINA DO DESENVOLVIMENTO FRONTEND
TestarMinificarConcatenarCompilar...
![Page 34: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/34.jpg)
PORQUE ESCOLHER O GRUNT?A comunidade do grunt é enorme e cresce a cada dia, já são
centenas de plugins do grunt que fazem praticamente tudo quevocê precisa.
![Page 35: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/35.jpg)
npm install -g grunt-cli
sudo npm install -g grunt-cli
INSTALANDO O GRUNTJS
OU
![Page 36: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/36.jpg)
npm init
npm install grunt --save-dev.
Configurando o GruntJS
![Page 37: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/37.jpg)
{ "name": "reveal.js", "version": "2.6.0-dev", "description": "The HTML Presentation Framework", "homepage": "http://lab.hakim.se/reveal-js", "subdomain": "revealjs", "scripts": { "test": "grunt test", "start": "" }, "author": { "name": "Hakim El Hattab", "email": "[email protected]", "web": "http://hakim.se" }, "repository": { "type": "git", "url": "git://github.com/hakimel/reveal.js.git" }, "engines": { "node": "~0.8.0" }, "dependencies": { "socket.io": "~0.9.13" }, "devDependencies": { "grunt-contrib-qunit": "~0.2.2", "grunt-contrib-jshint": "~0.6.4", "grunt": "~0.4.0" }, "licenses": [
O PACKAGE.JSON
![Page 38: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/38.jpg)
module.exports = function (grunt) { 'use strict'; grunt.initConfig({ pkg: grunt.file.readJSON('package.json'), requirejs: grunt.file.readJSON('config/requirejs.json'), compass: grunt.file.readJSON('config/compass.json'), watch: grunt.file.readJSON('config/watch.json'), uglify: grunt.file.readJSON('config/uglify.json'), csslint: grunt.file.readJSON('config/csslint.json'), jshint: grunt.file.readJSON('config/jshint.json'), connect: grunt.file.readJSON('config/connect.json'), mocha: grunt.file.readJSON('config/mocha.json'), shell: grunt.file.readJSON('config/shell.json'), release: grunt.file.readJSON('config/release.json') });
require('matchdep').filter('grunt-*').forEach(grunt.loadNpmTasks);
grunt.registerTask('build', ['compass', 'requirejs']); grunt.registerTask('test', ['mocha']);};
O GRUNTFILE.JS
![Page 39: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/39.jpg)
{ "test": { "src": ["test/SpecRunner.html"], "options": { "run": false, "reporter": "Spec" } }}
GRUNT MOCHA
![Page 40: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/40.jpg)
{ "server": { "options": { "port": 9001, "hostname": "*", "keepalive": true } }}
GRUNT CONNECT
![Page 41: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/41.jpg)
{ "compile" : { "options" : { "baseUrl": "src/js/", "name": "filename", "paths": { "templates": "../templates/", "Handlebars": "../../bower_components/handlebars/handlebars", "text": "../../bower_components/requirejs-text/text", "hbars": "../../bower_components/requirejs-handlebars/hbars" }, "shim": { "Handlebars": { "exports": "Handlebars" }, "jquery": { "exports": "jQuery" } }, "out": "public/js/main.min.js", "optimize": "uglify2" } }}
GRUNT REQUIREJS
![Page 42: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/42.jpg)
"I'M NOT YOUNG ENOUGH TO KNOWEVERYTHING"
John Graham Cumming
![Page 43: AMD, BDD, e o Javali](https://reader034.vdocuments.net/reader034/viewer/2022042518/555a8ec9d8b42a991b8b4792/html5/thumbnails/43.jpg)
RAFAEL LYRAfront end developer at apontador.com
github: twitter: linkedin:
rafaellyra@rafaellyra
br.linkedin.com/in/rafaellyra/