Tweet
Tweet

Slide 1

Slide 1 text

No content

Slide 2

Slide 2 text

desenvolvimento ágil com o angular.js ciro nunes

Slide 3

Slide 3 text

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

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

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

Slide 7

Slide 7 text

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

Slide 8

Slide 8 text

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

Slide 9

Slide 9 text

full-feature framework para web apps

Slide 10

Slide 10 text

hello world index.html 1. 2. 3. 4. 5. Hello World 6. 7. 8.

Hello {{ name }} !

9. 10. 11. </body> 12. </html>

Slide 11

Slide 11 text

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

Slide 12

Slide 12 text

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

Slide 13

Slide 13 text

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

Slide 14

Slide 14 text

outras features

Slide 15

Slide 15 text

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

Slide 16

Slide 16 text

o que é desenvolvimento ágil?

Slide 17

Slide 17 text

http://agilemanifesto.org/

Slide 18

Slide 18 text

user stories

Slide 19

Slide 19 text

user stories encorajam a modularizar e guiar o desenvolvimento pelos testes

Slide 20

Slide 20 text

agilizam a escrita dos testes user stories

Slide 21

Slide 21 text

mas por que devo testar o código?

Slide 22

Slide 22 text

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

Slide 23

Slide 23 text

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

Slide 24

Slide 24 text

cart app github.com/cironunes/cart live coding

Slide 25

Slide 25 text

No content

Slide 26

Slide 26 text

ferramentas de workflow

Slide 27

Slide 27 text

angular-mocks.js ferramentas de testes

Slide 28

Slide 28 text

bando de dados + api

Slide 29

Slide 29 text

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

Slide 30

Slide 30 text

#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

Slide 31

Slide 31 text

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

Slide 32

Slide 32 text

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

Slide 33

Slide 33 text

- 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?

Slide 34

Slide 34 text

próximos passos

Slide 35

Slide 35 text

http://thinkster.io/

Slide 36

Slide 36 text

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

Slide 37

Slide 37 text

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

Slide 38

Slide 38 text

obrigado! @cironunesdev

Slide 39

Slide 39 text

perguntas?