Refactoring Angular Apps to Components (HelsinkiJS 11/15)

Transcript

1. Refactoring AngularJS Apps to Components @teropa
2. Component is the main primitive. ! An atomic UI piece that is composable and reusable. Brian Ford, TXJS 2015
3. <my-confirmation [message]="'Launch missiles?'" (ok)="launchMissiles()"> </my-confirmation> Angular 2 Components
4. @Component({ selector: 'my-confirmation', inputs: ['message'], outputs: ['ok'] }) @View({ template: ` <div> {{message}} <button (click)="ok()">OK</button> </div> ` }) class MyConfirmation { okEvents = new EventEmitter(); ok() { this.okEvents.next(); } } Interface Boundary: Inputs & Outputs UI Template Logic Angular 2 Components
5. <my-confirmation message="'Launch missiles?'" on-ok="launchMissiles()"> </my-confirmation> Angular 1 Approximation
6. module.directive('myConfirmation', function() { return { scope: {}, bindToController: { message: '=', onOk: '&' }, controller: function() { }, controllerAs: 'ctrl', template: ` <div> {{ctrl.message}} <button ng-click="ctrl.onOk()"> OK </button> </div> ` } }); Interface Boundary: Inputs & Outputs UI Template Logic Angular 1 Approximation
7. module.component('myConfirmation', { bindings: { message: '=', onOk: '&' }, controller: function() { }, template: ` <div> {{myConfirmation.message}} <button ng-click="myConfirmation.onOk()"> OK </button> </div> ` }); Interface Boundary: Inputs & Outputs UI Template Logic Angular 1.5 Approximation
8. Image: Howard Lake Most Real Apps: Scope Soup
9. Image: Howard Lake Most Real Apps: Scope Soup ! Lots of ng-controller and ng-include ! No controller/template parity ! Data sharing through scope inheritance Rampant shared mutable state
10. Scope Soup Components ?
12. Small, Simple, Systematic steps Scope Soup Components
13. Stages 1 - Component Creation 2 - Data Flow
14. 1 Component Creation
15. Replace ng-controller with Component 1 - Component Creation
16. <div ng-controller="FoobarCtrl as ctrl"> <p>{{ctrl.getText()}}</p> </div> Replace ng-controller with Component index.html Before
17. foobar.js After module.component('foobar', { scope: true, controller: ‘FoobarCtrl as ctrl' }); Replace ng-controller with Component
18. After components/foobar/ foobar.js foobar_controller.js Replace ng-controller with Component
19. index.html After <foobar> <p>{{ctrl.getText()}}</p> </foobar> Replace ng-controller with Component
20. Move Markup to Component Template 1 - Component Creation
21. <foobar> <p>{{ctrl.getText()}}</p> </foobar> Move Markup to Component Template index.html After
22. After components/foobar/ foobar.js foobar_controller.js foobar.html Move Markup to Component Template
23. module.component(‘foobar', { scope: true, controller: ‘FoobarCtrl as ctrl', templateUrl: 'foobar.html' }); foobar.js After Move Markup to Component Template
24. foobar.html After <p>{{ctrl.getText()}</p> Move Markup to Component Template
25. index.html After <foobar></foobar> Move Markup to Component Template
26. 2 Data Flow
27. Replace external reference with bound input 2 - Data Flow
28. Replace external reference with bound input foobar.html Before <div ng-show="mainCtrl.isFooBarVisible()"> <p> {{foobar.getText(mainCtrl.getLanguage())}} </p> </div>
29. module.component(‘foobar', { scope: true, bindings: { visible: '=' }, controller: 'FoobarCtrl', templateUrl: 'foobar.html' }); Replace external reference with bound input foobar.js After
30. <foobar visible="mainCtrl.isFooBarVisible()"> </foobar> Replace external reference with bound input index.html After
31. Replace external reference with bound input foobar.html After <div ng-show="foobar.visible"> <p> {{foobar.getText(mainCtrl.getLanguage())}} </p> </div>
32. module.component('foobar', { scope: true, bindings: { visible: '=', language: '=' }, controller: 'FoobarCtrl', templateUrl: 'foobar.html' }); Replace external reference with bound input foobar.js After
33. <foobar visible="mainCtrl.isFooBarVisible()" language="mainCtrl.getLanguage()"> </foobar> Replace external reference with bound input index.html After
34. Replace external reference with bound input foobar.html After <div ng-show="foobar.visible"> <p>{{foobar.getText(foobar.language)}}</p> </div>
35. Replace external function call with bound output 2 - Data Flow
36. <div ng-show="foobar.visible"> <p>{{foobar.getText(foobar.language)}}</p> <button ng-click="mainCtrl.deleteFoobar()"> Delete </button> </div> Replace external function call with bound output foobar.html Before
37. module.component('foobar', { scope: true, bindings: { visible: '=', language: '=', onDelete: '&' }, controller: 'FoobarCtrl', templateUrl: 'foobar.html' }); foobar.js After Replace external function call with bound output
38. <foobar visible="mainCtrl.isFooBarVisible()" language="mainCtrl.getLanguage()" onDelete="mainCtrl.deleteFoobar()"> </foobar> index.html After Replace external function call with bound output
39. foobar.html After Replace external function call with bound output <div ng-show="foobar.visible"> <p>{{foobar.getText(foobar.language)}}</p> <button ng-click="foobar.onDelete()"> Delete </button> </div>
40. Isolate Component 2 - Data Flow
41. module.component('foobar', { scope: true, bindings: { visible: '=', language: '=', onDelete: '&' }, controller: 'FoobarCtrl', templateUrl: 'foobar.html' }); foobar.js Before Isolate Component
42. 1 - Component Creation 2 - Data Flow Replace ng-include with Component Replace ng-controller with Component Move Markup to Component Template Adopt Template Root Controller to Component Replace External Reference with Bound Input Wrap Markup in Component Directive Replace External Function Call with Bound Output Isolate Component Replace State Mutation with Bound Outputs teropa.info/blog/2015/10/18/refactoring-angular-apps-to-components.html Replace Two-Way Binding with One-Way Binding