amd, bdd, e o javali
Post on 19-May-2015
616 Views
Preview:
DESCRIPTION
TRANSCRIPT
AMD, BDD e o Javali
"PROGRAMMING IS ACRAFT NOT SCIENCE OR
ENGINEERING"John Graham Cumming
É 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.
GIVEN THAT IT'S A CRAFT THEN IT'S NOT HARD TO SEE THAT:experience matterstools matterintuition matters
AMDAsynchronous Module Definition!
REQUIRE JS
O RequireJS surgiu em setembro de 2009, com a proposta de serum carregador de módulos para javascript.
Hoje ele gerencia as dependências do seu programa
O PROBLEMA: ESCREVER CÓDIGO MODULAR.
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
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
ENTÃO EU SÓ CONSIGO ESCREVER JAVASCRIPT MODULAR SEEU USAR UMA BIBLIOTECA? NÃO!
ENTÃO PORQUE REQUIREJS?
AMD IS NOT THEANSWER
Tom Dale
Many HTTP Requests!Too Much CeremonyThe alternative!
PLEASE, SHOW ME THE CODE!
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; });
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(); })
}) }});
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" }});
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 }) ); };});
BDDBehavior-driven development
Desenvolvimento orientado ao comportamento
TDDPor onde começar?
O que testar? O que não testar?
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?
"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.
MOCHA
UM FRAMEWORK DE TESTES JAVASCRIPT (NODE.JS EBROWSER) PARA SIMPLIFICAR TESTES ASSÍNCRONOS
POR ONDE COMEÇAR
Você precisa escolher uma biblioteca de asserts:
should.jsexpect.jschaibetter-assert
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)); }) })});
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();
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">
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>
O RESULTADO NO NAVEGADOR:
O RESULTADO NO TERMINAL:
GRUNTJS
O GRUNT É UM GERENCIADOR DE TAREFAS FRONT-END FEITOEM JAVASCRIPT.
TAREFAS DA ROTINA DO DESENVOLVIMENTO FRONTEND
TestarMinificarConcatenarCompilar...
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.
npm install -g grunt-cli
sudo npm install -g grunt-cli
INSTALANDO O GRUNTJS
OU
npm init
npm install grunt --save-dev.
Configurando o GruntJS
{ "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": "hakim.elhattab@gmail.com", "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
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
{ "test": { "src": ["test/SpecRunner.html"], "options": { "run": false, "reporter": "Spec" } }}
GRUNT MOCHA
{ "server": { "options": { "port": 9001, "hostname": "*", "keepalive": true } }}
GRUNT CONNECT
{ "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
"I'M NOT YOUNG ENOUGH TO KNOWEVERYTHING"
John Graham Cumming
RAFAEL LYRAfront end developer at apontador.com
github: twitter: linkedin:
rafaellyra@rafaellyra
br.linkedin.com/in/rafaellyra/
top related