Nesta palestra falamos sobre a introdução ao AngularJS, e a sua evolução até chegar na versão 2.0

1. A evolução do AngularJS
Rodrigo Branas

2. http://www.agilecode.com.br

4. http://www.youtube.com/rodrigobranas

5. O Angular é um framework para o
desenvolvimento de aplicações web
utilizando JavaScript ou Dart

6. Estrutura a arquitetura da aplicação
em camadas bem definidas

7. Estimula a criação componentes
reusáveis e modularizáveis

8. Fornece a infraestrutura necessária
para integrar com o back-end

9. Facilita muito a automação de testes
tanto unitários quanto end-to-end

10. Criado em 2009 por
Miško Hevery e Adams Abrons

11. Principais commiters do Angular
Igor Minar e Miško Hevery

12. Facilitar a criação de aplicações web

13. Já pensou quanto código precisamos
escrever para criar uma aplicação simples?

15. 17.000 linhas e 6 meses depois...

16. Aposto que consigo reescrever o
projeto todo em apenas 2 semanas...

17. Eles conseguiram reescrever tudo em
apenas 1.500 linhas, 3 semanas depois

18. O Google decidiu adotar o projeto...

19. É como casar com mulher rica, o
futuro está garantido!

20. O interesse pelo framework vem
crescendo cada vez mais!

21. 1.0.0 temporal-domination (2012-06-13)

22. 1.2.0 timely-delivery (2013-11-08)

23. 1.3.0 superluminal-nudge (2014-10-13)

24. 1.4.0-beta.6 cookie-liberation (2015-03-17)

25. O Angular tem uma comunidade
muito forte e atuante

26. Atualmente, o projeto tem mais
de 1.235 contribuidores

27. Todo mês, várias atualizações
são lançadas

28. 1.4.0-rc.2 rocket-zambonimation (2015-05-12)
v1.4.0-rc.1 sartorial-chronography (2015-04-24)
v1.4.0-rc.0 smooth-unwinding (2015-04-10)
1.4.0-beta.6 cookie-liberation (2015-03-17)
1.3.15 locality-filtration (2015-03-17)
1.4.0-beta.5 karmic-stabilization (2015-02-24)
1.3.14 instantaneous-browserification (2015-02-24)
1.4.0-beta.4 overlyexplosive-poprocks (2015-02-09)
1.3.13 meticulous-riffleshuffle (2015-02-09)
1.4.0-beta.3 substance-mimicry (2015-02-02)
1.3.12 outlandish-knitting (2015-02-02)
1.4.0-beta.2 holographic-rooster (2015-01-26)
1.3.11 spiffy-manatee (2015-01-26)
1.4.0-beta.1 trepidatious-salamander (2015-01-20)
1.3.10 heliotropic-sundial (2015-01-20)
1.4.0-beta.0 photonic-umbrakinesis (2015-01-13)
1.3.9 multidimensional-awareness (2015-01-13)
Oquejáfoilançadoem2015?

29. Para cada nova versão é dado o
nome de um super poder

30. 0.9.0 dragon-breath (2010-10-20)

31. 0.9.5 turkey-blast (2010-11-25)

32. 0.9.6 night-vision (2010-12-06)

33. http://bit.ly/ng-release-names

34. Até agora, já foram lançadas 138
releases do framework!

35. Com tanta atualização, não dá
medo de quebrar alguma coisa?

36. 4.000 testes de unidade executados
a cada alteração feita no código...

37. Você acha que isso é muito?

38. A cada integração, 50.000 testes são
executados em vários ambientes!

39. Agora sim, isso é muito?!

40. Atualmente, existem cerca de 2.000
aplicativos no Google utilizando
Angular e todos os testes deles
também são executados

42. A performance do framework
vem melhorando muito

44. Na versão 1.4, os números ainda
vão aumentar cerca de 30%

45. Arquitetura do framework

47. View
É o que o cliente vê

48. Controller
Responsável pelo que a View consome

49. Scope
Faz a mediação entre a View e o Controller

50. AngularJS 1.x Hands-On
Por dentro das principais características do
framework!

51. Está chegando o Angular 2.0

53. Quem são?
Como vivem?
O que comem?
De onde surgiram?
Como se reproduzem?

54. Estava tudo tão bom, por que o
Angular está mudando?

55. O framework está ficando velho...

56. A versão 1.x iniciou em 2009 e está
baseada em muitos conceitos do
passado enquanto a nova versão
utiliza conceitos do futuro

57. E o presente?

58. ECMAScript 6
Utilização de novos recursos

59. Utilização de WebComponents
Possibilidade de criar componentes

60. Performance ainda melhor
A nova versão está ainda mais rápida

61. Curva de aprendizado é menor
Menos conceitos para aprender

62. Será que o Angular mudou tanto
assim, em tão pouco tempo?

63. A maioria das diretivas morreram

65. Template no Angular 1.0

66. Template no Angular 2.0

67. Como o Angular 1.x faz
binding?
<element xyz="literal">...
<element xyz="expression">...
<element xyz="{{interpolate}}">...

68. E agora, no Angular 2.0?
<element xyz="literal">...
<element [xyz]="expression">...
Com a notação de [], o bind é realizado
diretamente na propriedade do elemento

69. Comparando os dois mundos!
1.x <div ng-bind="exp"></div>
1.x <div ng-hide="exp"></div>
1.x <div ng-class="{done: exp}"></div>
2.0 <div [text]="exp"></div>
2.0 <div [hidden]="exp"></div>
2.0 <div [class.done]="exp"></div>

70. ng-bind
ng-class
ng-style
ng-disabled
ng-show
ng-hide
ng-src
ng-href
Quemmorreu?

71. O que acontece nesse cenário,
bind em uma propriedade ou o
disparo de um evento?
<element xyz="functionName(abc)">...

72. O que acontece nesse cenário,
bind em uma propriedade ou o
disparo de um evento?
<element xyz="functionName(abc)">...
<element ng-bind="functionName(abc)">...
<element ng-click="functionName(abc)">...

73. E agora, como fica no Angular 2.0?
<element [text]="functionName(abc)">
Com detecção de mudança, sem efeitos colaterais e
supressão de null
<element (click)="functionName(abc)">
Disparo baseado em eventos, com efeito colateral e
sem supressão de null

74. ng-blur
ng-change
ng-checked
ng-click
ng-dblclick
ng-keyup
ng-keydown
ng-mouseover
Quemmorreu?

75. E o ngModel? Como fica?
<input type="text" ng-model="nome" />

76. E o ngModel? Como fica?
<input type="text" ng-model="nome" />
<input type="text" #nome/>

77. Qual é a diferença?
<input type="text" #nome/>
<button (click)="nome.focus()">
Temos o elemento completo, podendo acessar
suas operações, não apenas o seu valor

78. ng-model

79. Template no Angular 2.0

80. AngularJS 2.0 na prática
Vamos analisar o código completo para ver
os outros conceitos!

81. Em que o novo Angular é escrito?

82. Parece que alguém foi dar uma
volta com o pessoal da Microsoft

83. Uma parte do AngularJS 2.0 é escrita
em TypeScript 1.5 e convertido para
ES5 para que possa ser interpretado
pelos browsers atuais. O código fonte
do framework tem ainda muitas partes
escritas em AtScript e Dart.

85. E agora, ainda vale a pena
aprender a versão 1.x?

86. A versão 1.x será abandonada?

87. Vou começar um projeto, devo
utilizar a versão 1.x ou 2.0?

88. Será possível migrar o projeto
para a versão 2.0 do framework?

89. Que droga, será que eu devo
utilizar TypeScript?

90. Por onde eu posso começar a
estudar AngularJS?

92. http://www.youtube.com/rodrigobranas

93. http://www.youtube.com/ngconfvideos

94. Rodrigo Branas
Site: http://www.agilecode.com.br
E-Mail: rodrigo.branas@gmail.com
Twitter: @rodrigobranas
SlideShare: http://www.slideshare.com/rodrigobranas
YouTube: http://www.youtube.com/rodrigobranas
LinkedIn: http://br.linkedin.com/in/rodrigobranas
+Plus: https://plus.google.com/+RodrigoBranas
GitHub: http://www.github.com/rodrigobranas