Angular2 Core Concepts - codemotion 2016

Introduction to Angular2 Core Concepts at Codemotion Rome 2016. Talk done together with Fabio Biondi.

Transcript

1. ANGULAR 2 CORE CONCEPTS FABIO BIONDI / MATTEO RONCHI 2 unshift.xyz
2. 2 ANGULAR 2 CORE CONCEPTS FABIOBIONDI UI Developer and Trainer Sviluppo, formazione e consulenza su AngularJS, React, CreateJS, D3.js e diverse librerie Javascript. fabiobiondi.com
3. 2 ANGULAR 2 CORE CONCEPTS MATTEORONCHI Senior Software Engineer Appassionato di architetture e ottimizzazioni da poco aggiunto al team di Workwave @cef62
4. ANGULARCOMMUNITIES AngularJS Italia AngularJS Developer Italiani
5. 2 ANGULAR 2 CORE CONCEPTS • Goodbye $scope • No more controllers • Component Based-UI • 1-way data flow • ES6 / Typescript • New built-in directives ANGULAR 2 VS 1.X
6. 2 ANGULAR 2 CORE CONCEPTS • New DI system • Performance • Better Mobile Support • Server side render e Native Script • Embrace Flux and RxJS • Change Detection System ANGULAR 2 VS 1.X
7. COMPONENTFUNDAMENTALS
8. 2 ANGULAR 2 CORE CONCEPTS Imports Component Name selector name Component Decorator template
9. COMPONENT COMMUNICATION
10. 2 ANGULAR 2 CORE CONCEPTS <widget /> <tab-bar /> <map /> <widget /> Open Plnkr
11. 2 ANGULAR 2 CORE CONCEPTS Country Model AUTOMATICALLY GENERATES
 CLASS PROPERTIES
12. 2 ANGULAR 2 CORE CONCEPTS COMPONENT 
 INJECTION MODEL INPUT PROP OUTPUT EVENT
13. <map [item]="country"> […]
 INPUT PROPERTY MAP COMPONENT
14. ANGULAR 2 CORE CONCEPT 2 Input property item:Country
 Template Binding
15. <tab-bar [data]="list"
 (onTabSelect)="doIt($event)"> […]
 INPUT PROPERTY (…)
 OUTPUT EVENT TABBARCOMPONENT
16. ANGULAR 2 CORE CONCEPT 2 ANGULAR 2 Built-in DIRECTIVES ngFor,ngClass CLICK EVENT INPUT PROPS OUTPUT EVENTS 1/2
17. ANGULAR 2 CORE CONCEPT 2 OUTPUT EVENT EMIT EVENT 2/2 Emitter
18. ANGULARBOOSTRAP ng.bootstrap(src.Widget)
19. 2 ANGULAR 2 CORE CONCEPTS 1. LOAD LIBRARIES 1/2
20. 2 ANGULAR 2 CORE CONCEPTS 2. Configure System.js 4. DISPLAY <widget/> 3. Bootstrap 2/2
21. DEPENDENCY INJECTION
22. 2 ANGULAR 2 CORE CONCEPTS • @injectable to enable injection to services • Support multiple providers • Application level injections • Component level injections NEW DEPENDENCY INJECTION ENGINE
23. 2 ANGULAR 2 CORE CONCEPTS import  {  SubComp  }  from  `./sub-­‐comp`   import  {  MyHelper  }  from  `./my-­‐helper`   @Component({     template:  `<sub-­‐comp></sub-­‐comp>`   directives:  [SubComp]   })     class  MyComp  {   constructor(private  helper:  MyHelper)  {}   }
24. 2 ANGULAR 2 CORE CONCEPTS Simple Service export  class  MyService  {      getData()  {          return  loadData.load();      }   }
25. 2 ANGULAR 2 CORE CONCEPTS import  {Injectable}  from  ‘angular2/core’;   @Injectable()   export  class  MyService  {   constructor(public  loadData:LoadData)  {}      getData()  {          return  loadData.load();      }   } Inject Service to a Service
26. COMPONENT LIFECYCLE
27. 2 ANGULAR 2 CORE CONCEPTS “ Angular only calls a directive/ component hook method if it is defined. “ [docs]
28. 2 ANGULAR 2 CORE CONCEPTS BASE HOOKS (components & directives) ngOnChanges input property value changes ngOnInit Initialization step ngDoCheck every change detection cycle ngOnDestroy before destruction
29. 2 ANGULAR 2 CORE CONCEPTS @Directive({selector:  '[my-­‐spy]'})   class  Spy  implements  OnInit,  OnDestroy  {      ngOnInit()  {   console.log(`onInit`);   }      ngOnDestroy()  {   console.log(`onDestroy`);   }   } Usage:  <div  my-­‐spy>...</div>
30. CHANGE DETECTION
31. 2 ANGULAR 2 CORE CONCEPTS Angular Application are Data Driven Data Model Components
32. 2 ANGULAR 2 CORE CONCEPTS DATA CHANGES -> VIEW UPDATES Data Model Components
33. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION TRAVELS TOP TO BOTTOM CD CD CD CD CD CD CD CD Change Detection Flow
34. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION IS DEFINED AT COMPONENT LEVEL
35. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION CAN SHOULD BE OPTIMIZED • Immutable Data • Observable • Custom BUS Systems …
36. 2 ANGULAR 2 CORE CONCEPTS @Component({     template:  `     <h1>{{user.name}}</h1>     <h3>{{user.nickName}}</h3>  `,     changeDetection:  ChangeDetectionStrategy.OnPush   inputs:  [user]   })     class  MyComp  {}   Enable Smart Change Detection
37. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION WITH IMMUTABLE DATA CD CD CD CD CD CD Change Detection Flow
38. 2 ANGULAR 2 CORE CONCEPTS @Component({     template:  `     <h1>{{user.name}}</h1>     <h3>{{user.nickName}}</h3>  `,     changeDetection:  ChangeDetectionStrategy.OnPush   })     class  MyComp  {   @Input()  user$:Observable<User>;     constructor(private  detector:  ChangeDetectorRef)  {}     ngOnInit()  {   this.user$.subscribe((user)  =>  {     this.user  =  user;   this.detector.markForCheck();     })     }     } Change Detection with Observable
39. 2 ANGULAR 2 CORE CONCEPTS CHANGE DETECTION WITH OBSERVABLES CD CD CD CD Change Detection Flow
40. WHAT CAUSE CHANGE DETECTION
41. 2 ANGULAR 2 CORE CONCEPTS • setTimeout(), setInterval() • User Events (click, input change..) • XHR Requests
42. GET IN THE ZONE
43. 2 ANGULAR 2 CORE CONCEPTS ZONE.JS INTERCEPTS ALL ASYNC OPERATIONS Angular has its own NgZone to controls Change Detections
44. THANKS! MATTEO RONCHI / @cef62 FABIO BIONDI / fabiobiondi.com