Desenvolvimento ágil com AngularJS

desenvolvimento ágil com o angular.js ciro nunes

- front-end engineer ~4 anos - agile coach - javascript,
angular.js, tools & workflow @cironunesdev / cironunes.github.io

http://meetup.com/AngularJS-Sao-Paulo

hoje vamos falar sobre agilidade no desenvolvimento de aplicações web

agenda - olá angular.js - introdução ao mundo ágil -
user stories - por que testar meu código? - workflow ágil - cart-app

full-feature framework para web apps

hello world index.html 1. <!doctype html> 2. <html ng-app="frontinbh" >
3. <head> 4. <meta charset="utf-8"> 5. <title>Hello World</title> 6. </head> 7. <body ng-controller="HelloCtrl" > 8. <p>Hello {{ name }} !</p> 9. <script src="//ajax.(...)/angular.min.js"></script> 10. <script src="app.js"> 11. </body> 12. </html>

1. angular.module( 'frontinbh' , []) 2. .controller('HelloCtrl' , function( $scope
) { 3. $scope.name = 'world'; 4. }); app.js (plunker) hello world

model = dados view = ui controller = lógica (plunker)

$scope 'cola' o controller na view single responsibility principle +
dependency injection

outras features

routes services directives modules http (ajax) filters data-binding (2 way)
resource (restful) factory providers config

o que é desenvolvimento ágil?

http://agilemanifesto.org/

user stories

user stories encorajam a modularizar e guiar o desenvolvimento pelos
testes

agilizam a escrita dos testes user stories

mas por que devo testar o código?

- confiabilidade - documentação (para humanos) - garantia incríveis poderes!

1. interpretar a user story 2. escrever um teste 3.
fazer o teste passar 4. refatorar 5. repetir a partir do #2 6. declarar os templates workflow

cart app github.com/cironunes/cart live coding

ferramentas de workflow

angular-mocks.js ferramentas de testes

bando de dados + api

#1 - como usuário - quero ver a lista de
produtos - para escolher qual vou comprar - nome, preço, imagem, qtde* - busca pelo nome

#2 - como usuário - quero adicionar produtos no carrinho
- para saber o valor total da compra - atualizar o carrinho - calcular o valor total da compra

#3 - como usuário - quero remover produtos do carrinho
- atualizar o carrinho - calcular o valor total da compra

#4 - como usuário - quero finalizar a compra -
limpar o carrinho - mostrar mensagem de carrinho vazio

- fundamentos do angular.js - introdução aos métodos ágeis -
um workflow simples e poderoso - incríveis ferramentas - como testar aplicações angular.js com persistência no mongodb o que aprendemos?

próximos passos

http://thinkster.io/

http://github.com/jmcunningham/AngularJS-Learning

http://meetup.com/AngularJS-Sao-Paulo

obrigado! @cironunesdev

perguntas?

Desenvolvimento ágil com AngularJS

Desenvolvimento ágil com AngularJS

More Decks by Ciro Nunes

Other Decks in Programming

Featured

Transcript