Angular 2 e o futuro do desenvolvimento Front-end

Transcript

2. Directives Separation of Concerns (MVC) Data-binding Dependency Injection
4. ––≠
5. ngEurope, Outubro, 2014 Versão 2.0 anunciada oficialmente!
6. Angular 2 e o futuro do desenvolvimento Front-end
7. Angular 2 está em Alpha Preview Angular 1.x ainda é o melhor para produção
8. 30 min
9. 30 min Slides: cnunes.com/angular2-future
10. @cironunesdev
11. Belo Horizonte - MG
15. Angular 2 e o futuro do desenvolvimento Front-end
16. 1. Por que uma nova versão? 2. O que a nova versão terá de melhor? 3. Como me preparar para o futuro?
17. 1. Por que uma nova versão?
18. Decisões de design equivocadas & Evolução da plataforma
19. $scope e $digest cycle Directive Definition Object Global Dependency Injector Decisões de design
20. Web Components ES2015/2016 Web Workers Mobile apps Offline Evolução da plataforma
21. Incremental vs Big Bang
23. 2. O que a nova versão vai ter de melhor?
24. Padrões web Template Syntax Change detection
25. Padrões web
26. Padrões web Directives and transclusion
27. Web Components and content projection Padrões web Directives and transclusion
28. Title Lorem ipsum dolor sit amet
29. http://cnun.es/angular1-transclusion
30. <my-card title="This is the title"> <p>This is the content</p> </my-card>
31. <my-card title="This is the title"> <p>This is the content</p> </my-card> Property binding
32. <my-card title="This is the title"> <p>This is the content</p> </my-card> Property binding Transclusion
33. <div class="component"> <h1>{{ title }}</h1> <div ng-transclude></div> </div>
34. <div class="component"> <h1>{{ title }}</h1> <div ng-transclude></div> </div> Property binding
35. <div class="component"> <h1>{{ title }}</h1> <div ng-transclude></div> </div> Transclusion Property binding
36. app.directive('myCard', function() { return { templateUrl: 'my-card.html', scope: { title: '@' }, transclude: true }; });
37. app.directive('myCard', function() { return { templateUrl: 'my-card.html', scope: { title: '@' }, transclude: true }; }); Property binding
38. app.directive('myCard', function() { return { templateUrl: 'my-card.html', scope: { title: '@' }, transclude: true }; }); Property binding Transclusion
39. http://cnun.es/angular2-content-projection
40. <my-card [title]="'This is title'"> <p>This is the content</p> </my-card>
41. <my-card [title]="'This is title'"> <p>This is the content</p> </my-card> Property binding
42. <my-card [title]="'This is title'"> <p>This is the content</p> </my-card> Property binding Content projection
43. <div class="my-card"> <h1>{{ title }}</h1> <content></content> </div>
44. <div class="my-card"> <h1>{{ title }}</h1> <content></content> </div> Property binding
45. <div class="my-card"> <h1>{{ title }}</h1> <content></content> </div> Content projection Property binding
46. import { Component, View, ViewEncapsulation } from 'angular2/angular2'; @Component({ selector: 'my-card', properties: ['title'] }) @View({ encapsulation: ViewEncapsulation.Native templateUrl: 'my-card.html' }) class MyComponent {}
47. import { Component, View, ViewEncapsulation } from 'angular2/angular2'; @Component({ selector: 'my-card', properties: ['title'] }) @View({ encapsulation: ViewEncapsulation.Native templateUrl: 'my-card.html' }) class MyComponent {} Property binding
48. import { Component, View, ViewEncapsulation } from 'angular2/angular2'; @Component({ selector: 'my-card', properties: ['title'] }) @View({ encapsulation: ViewEncapsulation.Native templateUrl: 'my-card.html' }) class MyComponent {} Property binding Content projection
49. Padrões web
50. Encapsulamento de componentes Padrões web
51. Encapsulamento de componentes Padrões web Shadow DOM
52. Encapsulamento de componentes Padrões web Shadow DOM ES2016/2017 (TypeScript): optional
53. Template Syntax http://cnun.es/angular2-template
54. <my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card>
55. <my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada
56. <my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada Entrada
57. <my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada Saída Entrada
58. <my-card title="{{ title }}" visible="visible" remove="onRemove()"> </my-card> Entrada Saída Entrada scope: { title: '@', visible: '=', remove: '&' }
59. <my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card>
60. <my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card> Entrada
61. <my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card> Entrada Entrada
62. <my-card [title]="title" [visible]="visible" (remove)="onRemove()"> </my-card> Saída Entrada
63. Menos regras para memorizar HTML válido Sintaxe semântica Template syntax
64. Change detection
65. Cycling graphs Change detection
66. Cycling graphs Change detection Tree of components
68. http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
69. Immutable objects http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
70. Immutable objects http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
71. Immutable objects http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
72. Immutable objects @Component({ changeDetection:ON_PUSH }) http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
73. Tree of components Change detection Mais rápido por natureza 3~5x mais rápido Suporte a diferentes estratégias
74. 3. Como me preparar para o futuro?
75. Aposte nos padrões web
76. Aposte nos padrões web
77. Comece a usar ES6 hoje
78. Comece a usar ES6 hoje
79. Comece a usar ES6 hoje
80. Siga guia de estilo do John Papa
82. Veja alguns apps em Angular 2
83. github.com/cironunes/cart2 github.com/cironunes/worst-player-award builtwithangular2.com/ Angular 2 apps
84. Angular 2
85. Plataforma de desenvolvimento para evergreen browsers Angular 2
86. Plataforma de desenvolvimento para evergreen browsers Angular 2 Change detection até 8x mais rápido que na versão 1.x
87. Plataforma de desenvolvimento para evergreen browsers Angular 2 Change detection até 8x mais rápido que na versão 1.x Suporte a Web Componentes e outros padrões
88. Plataforma de desenvolvimento para evergreen browsers Angular 2 Change detection até 8x mais rápido que na versão 1.x Suporte a Web Componentes e outros padrões Sintaxe mais semântica e com menos regras
89. Perguntas? @cironunesdev