[PL] Historia jednej migracji

Migrating to Angular 5 - lessons learned.

Transcript

1. Przemek Smyrdek „Historia jednej migracji” [PL] 2018-01-10 @psmyrdek
3. Gotowy na 2018 TypeScript Ulepszony build system Angular CLI Angular Universal AOT, etc…
6. 15 minut później
7. ✔ Gotowe
9. Przepis na migrację?
11. Pogoda Sprzęt Człowiek
12. Front-End @
14. SaaS vs Software House
15. ”Na horyzoncie są inne projekty…” ”Trzeba spojrzeć na XYZ” ”Mógłbyś sprawdzić…”
17. Ruszamy!
18. …ale w jaki sposób zabrać się za migrację aplikacji na produkcji?
19. 1. Projekt oparty o AngularJS 3. Projekt oparty o Angulara 2. Etap przejściowy - aplikacja hybrydowa
20. npm install @angular/upgrade --save
21. @angular/upgrade Integracja dwóch wersji Angulara Dependency Injection Change Detection Komponenty
22. @angular/upgrade Integracja dwóch wersji Angulara
24. Która część aplikacji należy do mnie?
25. Podejście „bottom-up” (lite upgrade) Migracja przeprowadzana „od dołu” AngularJS -> Angular downgradeModule, downgradeComponent ☎
26. Podejście „top-down” (full upgrade) Migracja przeprowadzana „od góry” Angular -> AngularJS UpgradeModule, UpgradeComponent
27. Migracja w moim przypadku (full): root component należy do mnie chcę przemigrować co tylko możliwe części nienależące do mnie integruję poprzez upgrade
30. Jak pogodzić dwa frameworki w jednym projekcie?
31. client-app server-app AngularJS JavaScript Webpack node.js serwowanie plików statycznych + Angular + TypeScript + dodatki
32. 315 zmienionych plików prawie 8.5k dodanych linii kodu 29 commitów „ng bootstrap”
33. „Spike”
34. client-app server-app AngularJS JavaScript Webpack node.js serwowanie plików statycznych Angular (Angular CLI) odrębny projekt npm ignore client-app-next
35. client-app server-app client-app-next AngularJS bundle
36. client-app server-app client-app-next ng build --watch nodemon app.js
37. server-app client-app-next client-app
38. ⛺ Bootstrap Jak przejść ostatni etap
39. <body ng-app="people-ui"> ... </body> angular.element(() => { angular.bootstrap(document, ['people-ui']); }); Od ng-app do angular.bootstrap
40. UpgradeModule w akcji import { UpgradeModule } from '@angular/upgrade/static'; @NgModule({ … }) export class AppModule { constructor( private upgradeModule: UpgradeModule ) { } ngDoBootstrap() { this.upgradeModule .bootstrap(document.body, ['people-ui']); } }
41. ⛺ ⛺Serwisy Bootstrap Jak przejść ostatni etap
42. Migracja serwisów angular.module('people-ui') .service('QueryService', QueryService); function QueryService() { this.getFiltersQuery = function(currentState) { return { aggregations: getCurrentState(), query: getAdditionalQueryProperties() }; } }
43. Migracja serwisów import { Injectable } from '@angular/core'; @Injectable() export class QueryService { getFiltersQuery(currentState) { return { aggregations: this.getAggregations(), query: this.getQuery() }; } }
44. A jeśli serwis nie należy do mnie? import { InjectionToken } from "@angular/core"; export const ACCESS_SERVICE_TOKEN = new InjectionToken<any>('ACCESS_SERVICE'); export const accessServiceProvider = { provide: ACCESS_SERVICE_TOKEN, deps: ['$injector'], useFactory: injector => injector.get('accessService') }
45. A jeśli serwis nie należy do mnie? import { Injectable } from '@angular/core'; @Injectable() export class WantToUseAngularJsService { constructor( @Inject(ACCESS_SERVICE_TOKEN) private service: any ) { } }
46. A jeśli serwis nie należy do mnie? @NgModule({ imports: [ CommonModule ], providers: [ accessServiceProvider ] }) export class AngularJsModule { }
47. ⛺ ⛺ ⛺ Komponenty Serwisy Bootstrap Jak przejść ostatni etap
48. Migracja komponentów angular .module('people-ui') .component('myComponent', { template: require('./my.component.pug'), controller: MyComponentController });
49. Migracja komponentów function MyComponentController() { var ctrl = this; ctrl.$onInit = function () { } ctrl.$onDestroy = function() { } }
50. Migracja komponentów @Component({ selector: 'my-component', templateUrl: './my.component.html', }) export class MyComponent implements OnInit, OnDestroy { ngOnInit() { } ngOnDestroy() { } }
51. Jeszcze tylko template…
53. Jeszcze tylko template…
54. A nie, spoko… const { transformTemplate } = require('create-angular-template') const angularTemplate = transformTemplate(template, options) npm install create-angular-template
55. psmyrdek/create-angular-template
56. A to?! <sr-old-component color="$ctrl.currentColor"> ... </sr-old-component>
57. <app-old-component /> UpgradeComponent <sr-old-component />
58. UpgradeComponent @Directive({ selector: 'app-old-component' }) export class OldComponentFacade extends UpgradeComponent { @Input() color: string; constructor(elementRef: ElementRef, injector: Injector) { super('srOldComponent', elementRef, injector); } }
59. AngularJS - upgraded <sr-old-component color="$ctrl.currentColor"> ... </sr-old-component> <app-old-component [color]="currentColor"> ... </app-old-component>
60. ⛺ Jak przejść ostatni etap ⛺ ⛺ ⛺ Komponenty Serwisy Dyrektywy Bootstrap
61. Co z dyrektywami? To zależy. <sr-old-component color="$ctrl.color" popover=”$ctrl.label"> ... </sr-old-component>
62. Połączenie dwóch Angularów? <app-old-component [color]="color" popover="label"> ... </app-old-component> + =
63. Facade/Wrapper @Directive({ selector: 'app-popover' }) export class PopoverFacade extends UpgradeComponent { @Input() label: string; constructor(elementRef: ElementRef, injector: Injector) { super(’srPopoverFacade', elementRef, injector); } }
64. Co w środku? <span popover="$ctrl.label"> <ng-transclude></ng-transclude> </span> angular .module('people-ui') .component('srPopoverFacade', { template: ..., bindings: { label: '<’ } });
65. Facade/Wrapper <app-popover [label]="label"> <app-old-component [color]="color"> ... </app-old-component> </app-popover> + =
66. Co z dyrektywami? To zależy. Facade/Wrapper Własna implementacja Zewnętrzna biblioteka
67. ⛺ ⛺ ⛺ ⛺ Komponenty Serwisy Dyrektywy Bootstrap Jak przejść ostatni etap
68. Ciąg dalszy nastąpi… Refaktoryzacja kodu Optymalizacja aplikacji Aktualizacja zależności
70. AngularJS -> Angular-less Organizacja kodu Tooling
71. Przepis na migrację?
72. Pogoda -> Czas Sprzęt -> Środowisko Człowiek -> Zespół
74. The End