Angular2

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

Transcript

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!