Introduction to Angular 2

Besides the progressive growing of Web Applications in the last few years, the new version of this super framework give us awesome new things. Change detection? Syntax sugar? ES6? Native APIs?

Transcript

1. Introduction to Angular 2, DevMT Meetup, April 2016 Introduction to Angular 2 Dhyego Fernando
2. Introduction to Angular 2, DevMT Meetup, April 2016 Meetup?
3. Introduction to Angular 2, DevMT Meetup, April 2016 @dhyegofernando full-stack dev
4. Introduction to Angular 2, DevMT Meetup, April 2016 Agenda ✓ How to prepare yourself? ✓ Short history about SPA ✓ Why Angular 2?
6. Introduction to Angular 2, DevMT Meetup, April 2016 the beginning
7. Introduction to Angular 2, DevMT Meetup, April 2016 youtube.com @2005
9. Introduction to Angular 2, DevMT Meetup, April 2016 Single Page Applications
10. Introduction to Angular 2, DevMT Meetup, April 2016
11. Introduction to Angular 2, DevMT Meetup, April 2016 Web Apps FTW
12. Introduction to Angular 2, DevMT Meetup, April 2016 GetAngular Misko Hevery Adam Abrons
13. Introduction to Angular 2, DevMT Meetup, April 2016 ✓ Directives ✓ Data-binding ✓ MVWhatever
14. Introduction to Angular 2, DevMT Meetup, April 2016 Data-binding <input type="text" ng-model="yourName"> <h1>Hello {{yourName}}!</h1>
15. Introduction to Angular 2, DevMT Meetup, April 2016 MVW
16. Introduction to Angular 2, DevMT Meetup, April 2016 Directives <tabset> <tab heading="Title 1"> <p>Content 1 goes here</p> </tab> <tab heading="Title 2"> <p>Content 2 goes here</p> </tab> <tab heading="Title 3"> <p>Content 3 goes here</p> </tab> </tabset>
17. 1.1+ Million Developers
18. Introduction to Angular 2, DevMT Meetup, April 2016 48k+ stars
19. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 1 Releases
20. Introduction to Angular 2, DevMT Meetup, April 2016 Google products in Angular 1
21. Introduction to Angular 2, DevMT Meetup, April 2016 madewithangular.com
22. Introduction to Angular 2, DevMT Meetup, April 2016 +mobile platform apps
23. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 2 Officialy announced at ng-europe 2014
25. Introduction to Angular 2, DevMT Meetup, April 2016 Why Angular 2?
26. Introduction to Angular 2, DevMT Meetup, April 2016 AngularJS (1.x) → Design decisions (not so good) → Web platform evolution More at http://blog.jhades.org/introduction-to-angular2-the-main-goals
27. Introduction to Angular 2, DevMT Meetup, April 2016 Design Decisions → Third-party libraries (interoperability) → Directive Definition Object → $scope and $digest cycles
28. Introduction to Angular 2, DevMT Meetup, April 2016 Web platform evolution → Web Workers → Web Components → ES6, ES7, TypeScript, Dart… → Offline Apps (Service Workers) → Mobile Apps
29. Introduction to Angular 2, DevMT Meetup, April 2016 So, what’s new?
30. Introduction to Angular 2, DevMT Meetup, April 2016 What’s new? Edge Web API Template Syntax Change Detection
31. Introduction to Angular 2, DevMT Meetup, April 2016 Edge Web API x Directives + Content Transclusion ✓ Directives + Content Transclusion ✓ Components + Content Projection
32. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 1 Directives + Content Transclusion
33. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 1: Directives + Content Transclusion My Title My Content Property binding Content transclusion <my-card title="My Title"> <p>My Content</p> </my-card>
34. Introduction to Angular 2, DevMT Meetup, April 2016 Property binding Content transclusion Angular 1: Directives + Content Transclusion app.directive('myCard', function() { // ... scope: { title: '@' }, transclude: true });
35. Introduction to Angular 2, DevMT Meetup, April 2016 Property binding Content transclusion <div class="my-card"> <h1>{{ title }}</h1> <div ng-transclude></div> </div> Angular 1: Directives + Content Transclusion
36. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 2 Components + Content Projection
37. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 2: Components + Content Projection Property binding Content transclusion <my-card [title]=“‘My Title’"> <p>My Content</p> </my-card>
38. Introduction to Angular 2, DevMT Meetup, April 2016 Property binding Content transclusion Angular 2: Components + Content Projection <div class="my-card"> <h1>{{ title }}</h1> <content></content> </div>
39. Introduction to Angular 2, DevMT Meetup, April 2016 Property binding Content transclusion Angular 2: Components + Content Projection @Component({ selector: 'my-card', properties: ['title'] }) @View({ // ... encapsulation: ViewEncapsulation.Native }) class MyCard { }
40. Introduction to Angular 2, DevMT Meetup, April 2016 Components Template Directive Controller Component ng1 ng2
41. Introduction to Angular 2, DevMT Meetup, April 2016 Edge Web API ✓ Component encapsulation (emulated or native) ✓ Plain JS Classes + Metadata
 (TypeScript decorators are optionals)
42. Introduction to Angular 2, DevMT Meetup, April 2016 Template Syntax
43. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 1: Template syntax Entry property Entry property Out property <my-card title="{{ title }}" visible="visible" remove="onRemove()"></my-card> scope: { title: '@', visible: '=', on-remote: '&' }
44. Introduction to Angular 2, DevMT Meetup, April 2016 Templates Binding Example Properties Events Two-way https://angular.io/docs/ts/latest/guide/template-syntax.html#!#binding-syntax <input [value]="firstName"> <button (click)="save($event)"> <input [(ng-model)]="firstName">
45. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 2: Template syntax Entry property Entry property Out property properties: [ 'title', 'visible' ] @Output() remove = new EventEmitter(); <my-card [title]=“title" [visible]=“visible” (remove)=“onRemove()”></my-card>
46. Introduction to Angular 2, DevMT Meetup, April 2016 Template Syntax ✓ Simpler API to memorize ✓ Valid HTML ✓ Syntax more semantic
47. Introduction to Angular 2, DevMT Meetup, April 2016 Change Detection ✓ Cyclic graphs x Cyclic graphs ✓ Tree of components
48. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 1: Cyclic graphs x Dirty checking x Unpredictable watchers x Unpredictable digest cycle runs http://blog.jhades.org/introduction-to-angular2-the-main-goals/#howangular1implementsbinding
49. Introduction to Angular 2, DevMT Meetup, April 2016 Angular 2: Tree of components ✓ Predictable watchers ✓ Independent change detector ✓ Switchable strategies for each CD
 (great for immutability) @Component({ changeDetection: ChangeDetectionStrategy.OnPush }) http://victorsavkin.com/post/110170125256/change-detection-in-angular-2
50. Introduction to Angular 2, DevMT Meetup, April 2016 Change Detection ✓ Faster changes detections (3x ~ 5x) ✓ Independent component CD ✓ Switchable change strategies
 (can be more faster yet 3x ~ 8x) ✓ Tree of components
51. Introduction to Angular 2, DevMT Meetup, April 2016 Are we done?
53. Introduction to Angular 2, DevMT Meetup, April 2016 Isomorphic Rendering https://github.com/angular/universal
54. Introduction to Angular 2, DevMT Meetup, April 2016 Web Workers Support ✓ Sandbox untrusted code ✓ Awesome for mobile ✓ Concurrency & Parallelism https://github.com/angular/angular/blob/master/modules/angular2/docs/web_workers/web_workers.md
55. Introduction to Angular 2, DevMT Meetup, April 2016 Unidirectional Data Flow ✓ Easier to debug ✓ Interoperable (RxJS, Flux, Redux…) ✓ Faster
56. Introduction to Angular 2, DevMT Meetup, April 2016 Simpler to Learn
57. Introduction to Angular 2, DevMT Meetup, April 2016 Multi Languages Support
58. Introduction to Angular 2, DevMT Meetup, April 2016 ES5 ES6 TypeScript Dart Multi Languages Support
59. Introduction to Angular 2, DevMT Meetup, April 2016 ES5 ES6 TypeScript Dart No Compile Compile Multi Languages Support
60. Introduction to Angular 2, DevMT Meetup, April 2016 ES5 ES6 TypeScript Dart No Types Types Multi Languages Support
61. Introduction to Angular 2, DevMT Meetup, April 2016 ES5 ES6 TypeScript Dart JavaScript-Based Syntax No JS Multi Languages Support
62. Introduction to Angular 2, DevMT Meetup, April 2016 ES6 ES5 TypeScript Dart No JS ES6 JavaScript-Based Syntax Multi Languages Support
63. Introduction to Angular 2, DevMT Meetup, April 2016 TypeScript ES6 ES5 Dart No JS TypeScript ES6 JavaScript-Based Syntax Multi Languages Support
64. Introduction to Angular 2, DevMT Meetup, April 2016 Tools
65. Introduction to Angular 2, DevMT Meetup, April 2016 Angular CLI https://github.com/angular/angular-cli
66. Introduction to Angular 2, DevMT Meetup, April 2016
67. Introduction to Angular 2, DevMT Meetup, April 2016 Batarangle ✓ Template navigation ✓ Debugging ✓ Performance analysis http://go.rangle.io/batarangle
69. Introduction to Angular 2, DevMT Meetup, April 2016 Cross Platform
71. Introduction to Angular 2, DevMT Meetup, April 2016 Cross Platform Mobile Web Mobile Desktop
72. Introduction to Angular 2, DevMT Meetup, April 2016 Angular Universal Web Workers Mobile Web Material Design
73. Introduction to Angular 2, DevMT Meetup, April 2016 Mobile
74. Introduction to Angular 2, DevMT Meetup, April 2016 Ionic Framework Max Lynch
 Adam Bradley
75. Introduction to Angular 2, DevMT Meetup, April 2016 Ionic Framework ✓ Apps featured by Google & Apple ✓ Battle-tested by lots of startups ✓ 1.2M+ apps built since 02/2014
76. Introduction to Angular 2, DevMT Meetup, April 2016 Ionic v2 built upon Angular 2 ✓ Use modern Web APIs like Web Workers ✓ Express Ionic as a more traditional GUI architecture ✓ Dramatically improve render performance ✓ Reduce the barrier to entry (it’s mostly vanilla javascript) http://ionic.io/2
77. Introduction to Angular 2, DevMT Meetup, April 2016 New features ✓ Material design support ✓ New animation and scrolling ✓ Overhauled navigation ✓ Powerful theming system ✓ New components and templates
78. Introduction to Angular 2, DevMT Meetup, April 2016
79. Introduction to Angular 2, DevMT Meetup, April 2016 The Path to Angular 2
80. Introduction to Angular 2, DevMT Meetup, April 2016 ng1 ng2
81. Introduction to Angular 2, DevMT Meetup, April 2016 ...
82. Introduction to Angular 2, DevMT Meetup, April 2016 ngUpgrade http://blog.thoughtram.io/angular/2015/10/24/upgrading-apps-to-angular-2-using-ngupgrade.html https://github.com/angular/angular/tree/master/modules/playground/src/upgrade
83. Introduction to Angular 2, DevMT Meetup, April 2016 ngUpgrade Left Top Nav Main View 1 1 1 1 1 1 1 1 1 1 1 1 1
84. Introduction to Angular 2, DevMT Meetup, April 2016 ngUpgrade Left Top Nav Main View 1 1 1 1 1 1 1 1 1 1 1 1 1 2 2 2 2 2 2 2 2 2 2 2 2 2
85. Introduction to Angular 2, DevMT Meetup, April 2016 Learning Angular 2
86. Introduction to Angular 2, DevMT Meetup, April 2016 Supported Browsers 4.1+ 9, 10, 11
87. Introduction to Angular 2, DevMT Meetup, April 2016 Release Status https://splintercode.github.io/is-angular-2-ready/
88. Introduction to Angular 2, DevMT Meetup, April 2016 Live Demo https://github.com/johnpapa/angular2-tour-of-heroes
90. Introduction to Angular 2, DevMT Meetup, April 2016 Want to talk too? http://devmt.herokuapp.com/ +
91. Introduction to Angular 2, DevMT Meetup, April 2016 http://frontincuiaba.com.br/
92. Introduction to Angular 2, DevMT Meetup, April 2016 http://hackinarena.com.br/
93. Introduction to Angular 2, DevMT Meetup, April 2016 Feedbacks? @dhyegofernando