Talk apresentada no Google I/O Extended BH onde mostro minhas impressões sobre o Angular2

1. Angular 2
Minhas Impressões

2. @Component({selector: 'talk'})
@View({template: '<h1>Google I/O</h1>'})
// Component controller
class TalkComponent {
constructor() {
this.name = 'Paulo Pires';
this.twitter = '@paulo_hp';
}
}

5. Angular 1.x

6. Angular 1.4
Performance Melhorada
Novo Router e i18n
Suporte a CommonJS
Melhoria nas animações
E muito mais...

7. Angular 1.4
(use este hoje!)

8. Angular 1.5
(pode ser o elo até o 2.0)

9. Angular 2

10. /angular/angular

11. TypeScript
typescriptlang.org

12. Será que a checagem de tipo
em tempo de execução
pode deixar a app mais
lenta?
pergunta

13. Eu devo usar o TypeScript
para meu novo app em
Angular2?
pergunta

14. es6rocks.com

15. webcomponents.org

16. Sem controllers

17. 3 tipos de
directives

18. @Component

19. @Viewport

20. @Decorator

21. Mas isso não quebra a separação
de 'concerns' que o Angular tanto
prega?
pergunta

22. Então vou ter que mudar tudo?
Converter todos meus controllers
para directives?
pergunta

23. O Angular2 é tipo o React.js,
no fim das contas? Vou ter
que escrever HTML inline?
pergunta

24. Sem
Two-Way data-binding

25. Agora vou ter que manipular
e construir formularios
na unha?
pergunta

26. Fluxo de dados unidirecional...
Posso usar Flux?
pergunta

27. Então o Angular2 é o React
implementado pela Google?
pergunta

28. Novo Router

29. /angular/router

30. Começo meu novo projeto com
o Router velho ou com o
novo?
pergunta

31. Real Modules

32. Tchau $scope

33. @Component({
selector: 'sample-app',
componentServices: [
NameList
]
})
@Template({
url: './templates/sample-app.html',
directives: [Foreach]
})
class SampleApp {
constructor() {
this.names = NameList.get();
this.newName = '';
}
addName(newname) {
this.names.push(newname.value);
newname.value = '';
}
}

34. ...
<ul>
<li *foreach="#name in names"></li>
</ul>
...

35. Ultra Fast
Change Detection

36. DI Melhorada

37. /angular/di.js

38. import {Inject} from 'di';
import {Electricity} from './electricity';
@Inject(Electricity)
export class Fridge {
constructor(electricity) {
this.electricity = electricity;
}
getEggs() {
return '3 eggs';
}
}

40. Não esta
pronto para
producão!

42. Experimente!

43. perguntas?

44. Obrigado!