The awesomeness of Angular 2

Demo: http://github.com/cironunes/cart2

Transcript

1. The Awesomeness of Angular 2
2. Ciro Nunes FRONT-END ENGINEER @cironunesdev / +cironunesdev / cironunes.com
3. Belo Horizonte - MG
7. The Awesomeness of Angular 2
8. but before…
9. The current state of Angular 1.x
10. 15k+ forks angular/angular.js 1.2k+ contributors 37k+ stars Angular 1.x
11. 1.4 New Router New I18n CommonJS support Better animation support Performance improvements
12. Angular 2 ready 1.4 New Router New I18n CommonJS support Better animation support Performance improvements
13. Angular 1.4 is the best Angular yet
14. 1.5 is coming soon
15. The Awesomeness of Angular 2
18. Why a brand new version?
24. Reasons for a brand new version
25. Evolving web Reasons for a brand new version
26. Evolving web Reasons for a brand new version Focus
27. The awesomeness of Angular 2
28. Change detection The awesomeness of Angular 2
29. Change detection The awesomeness of Angular 2 Benefits of using ES6
30. Change detection The awesomeness of Angular 2 Benefits of using ES6 Template syntax
31. Disclaimer Angular 2 is currently in Alpha Preview
32. Change detection
33. Performance issues
36. Faster by nature Easier to reason about Trees
37. Immutable objects
40. Observable objects
45. Configurable 3-10x faster Trees instead of cycling graphs Change detection http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
46. Benefits from using ES6
47. “Classes" Angular 1.x angular.module('myApp') .controller('MyComponent', function() { this.meaningOfLife = 42; });
48. Classes Angular 2 class MyComponent { constructor() { this.meaningOfLife = 42; } }
49. angular.module('myApp', ['myModule']); angular.module('myModule', []); Modules Angular 1
50. Modules Angular 2 export class MyModule {} import {MyModule} from 'module';
51. Directives Angular 1 angular.module('myApp') .directive('myComponent', function() { return { template: '<p>Meaning of life is {{ meaningOfLife }}</p>', bindToController: true, controller: function() { this.meaningOfLife = 42; } }; })
52. Annotations (optional) @Component({ selector: 'my-component' }) @View({ template: `<p>The meaning of life is {{ meaningOfLife }}</p>` }) class MyComponent { constructor() { this.meaningOfLife = 42; } }
53. Types (completely optional) @Component({ selector: 'my-component' }) @View({ template: `<p>The meaning of life is {{ meaningOfLife }}</p>` }) class MyComponent { meaningOfLife: number; constructor() { this.meaningOfLife = 42; } }
54. Template syntax
55. Data-binding
56. <my-greeting person="Ciro"></my-greeting> <my-greeting person="{{vm.person}}"></my-greeting> <my-greeting person="vm.person"></my-greeting> Binding to components Angular 1
57. <my-greeting [person]="person"> <my-greeting person="Ciro"> Binding to components Angular 2
58. Events
59. <my-greeting greet="vm.smile()"></my-greeting> Angular 1 expression or statement
60. <my-greeting (greet)="smile()"></my-greeting> Angular 2 expression vs statement <my-greeting [greet]="smile()"></my-greeting>
61. Toolable Power in the hands of the user Fewer rules to remember Template syntax Play nice with Web Components
62. DEMO TIME github.com/cironunes/cart2
63. Thanks! @cironunesdev / +cironunesdev / cironunes.com