Desenvolvimento ágil com AngularJS

Transcript

2. desenvolvimento ágil com o angular.js ciro nunes
3. - front-end engineer ~4 anos - agile coach - javascript, angular.js, tools & workflow @cironunesdev / cironunes.github.io
6. http://meetup.com/AngularJS-Sao-Paulo
7. hoje vamos falar sobre agilidade no desenvolvimento de aplicações web
8. agenda - olá angular.js - introdução ao mundo ágil - user stories - por que testar meu código? - workflow ágil - cart-app
9. full-feature framework para web apps
10. 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>
11. 1. angular.module( 'frontinbh' , []) 2. .controller('HelloCtrl' , function( $scope ) { 3. $scope.name = 'world'; 4. }); app.js (plunker) hello world
12. model = dados view = ui controller = lógica (plunker)
13. $scope 'cola' o controller na view single responsibility principle + dependency injection
14. outras features
15. routes services directives modules http (ajax) filters data-binding (2 way) resource (restful) factory providers config
16. o que é desenvolvimento ágil?
17. http://agilemanifesto.org/
18. user stories
19. user stories encorajam a modularizar e guiar o desenvolvimento pelos testes
20. agilizam a escrita dos testes user stories
21. mas por que devo testar o código?
22. - confiabilidade - documentação (para humanos) - garantia incríveis poderes!
23. 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
24. cart app github.com/cironunes/cart live coding
26. ferramentas de workflow
27. angular-mocks.js ferramentas de testes
28. bando de dados + api
29. #1 - como usuário - quero ver a lista de produtos - para escolher qual vou comprar - nome, preço, imagem, qtde* - busca pelo nome
30. #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
31. #3 - como usuário - quero remover produtos do carrinho - atualizar o carrinho - calcular o valor total da compra
32. #4 - como usuário - quero finalizar a compra - limpar o carrinho - mostrar mensagem de carrinho vazio
33. - 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?
34. próximos passos
35. http://thinkster.io/
36. http://github.com/jmcunningham/AngularJS-Learning
37. http://meetup.com/AngularJS-Sao-Paulo
38. obrigado! @cironunesdev
39. perguntas?