[PL] Historia jednej migracji

Przemek Smyrdek „Historia jednej migracji” [PL] 2018-01-10 @psmyrdek

Gotowy na 2018 TypeScript Ulepszony build system Angular CLI Angular
Universal AOT, etc…

15 minut później

✔ Gotowe

Przepis na migrację?

Pogoda Sprzęt Człowiek

Front-End @

SaaS vs Software House

”Na horyzoncie są inne projekty…” ”Trzeba spojrzeć na XYZ” ”Mógłbyś
sprawdzić…”

Ruszamy!

…ale w jaki sposób zabrać się za migrację aplikacji na
produkcji?

1. Projekt oparty o AngularJS 3. Projekt oparty o Angulara
2. Etap przejściowy - aplikacja hybrydowa

npm install @angular/upgrade --save

@angular/upgrade Integracja dwóch wersji Angulara Dependency Injection Change Detection Komponenty

@angular/upgrade Integracja dwóch wersji Angulara

Która część aplikacji należy do mnie?

Podejście „bottom-up” (lite upgrade) Migracja przeprowadzana „od dołu” AngularJS ->
Angular downgradeModule, downgradeComponent ☎

Podejście „top-down” (full upgrade) Migracja przeprowadzana „od góry” Angular ->
AngularJS UpgradeModule, UpgradeComponent

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

Jak pogodzić dwa frameworki w jednym projekcie?

client-app server-app AngularJS JavaScript Webpack node.js serwowanie plików statycznych +
Angular + TypeScript + dodatki

315 zmienionych plików prawie 8.5k dodanych linii kodu 29 commitów
„ng bootstrap”

„Spike”

client-app server-app AngularJS JavaScript Webpack node.js serwowanie plików statycznych Angular
(Angular CLI) odrębny projekt npm ignore client-app-next

client-app server-app client-app-next AngularJS bundle

client-app server-app client-app-next ng build --watch nodemon app.js

server-app client-app-next client-app

⛺ Bootstrap Jak przejść ostatni etap

<body ng-app="people-ui"> ... </body> angular.element(() => { angular.bootstrap(document, ['people-ui']); });
Od ng-app do angular.bootstrap

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']); } }

⛺ ⛺Serwisy Bootstrap Jak przejść ostatni etap

Migracja serwisów angular.module('people-ui') .service('QueryService', QueryService); function QueryService() { this.getFiltersQuery =
function(currentState) { return { aggregations: getCurrentState(), query: getAdditionalQueryProperties() }; } }

Migracja serwisów import { Injectable } from '@angular/core'; @Injectable() export
class QueryService { getFiltersQuery(currentState) { return { aggregations: this.getAggregations(), query: this.getQuery() }; } }

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') }

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 ) { } }

A jeśli serwis nie należy do mnie? @NgModule({ imports: [
CommonModule ], providers: [ accessServiceProvider ] }) export class AngularJsModule { }

⛺ ⛺ ⛺ Komponenty Serwisy Bootstrap Jak przejść ostatni etap

Migracja komponentów angular .module('people-ui') .component('myComponent', { template: require('./my.component.pug'), controller: MyComponentController
});

Migracja komponentów function MyComponentController() { var ctrl = this; ctrl.$onInit
= function () { } ctrl.$onDestroy = function() { } }

Migracja komponentów @Component({ selector: 'my-component', templateUrl: './my.component.html', }) export class
MyComponent implements OnInit, OnDestroy { ngOnInit() { } ngOnDestroy() { } }

Jeszcze tylko template…

A nie, spoko… const { transformTemplate } = require('create-angular-template') const
angularTemplate = transformTemplate(template, options) npm install create-angular-template

psmyrdek/create-angular-template

A to?! <sr-old-component color="$ctrl.currentColor"> ... </sr-old-component>

<app-old-component /> UpgradeComponent <sr-old-component />

UpgradeComponent @Directive({ selector: 'app-old-component' }) export class OldComponentFacade extends UpgradeComponent
{ @Input() color: string; constructor(elementRef: ElementRef, injector: Injector) { super('srOldComponent', elementRef, injector); } }

AngularJS - upgraded <sr-old-component color="$ctrl.currentColor"> ... </sr-old-component> <app-old-component [color]="currentColor"> ...
</app-old-component>

⛺ Jak przejść ostatni etap ⛺ ⛺ ⛺ Komponenty Serwisy
Dyrektywy Bootstrap

Co z dyrektywami? To zależy. <sr-old-component color="$ctrl.color" popover=”$ctrl.label"> ... </sr-old-component>

Połączenie dwóch Angularów? <app-old-component [color]="color" popover="label"> ... </app-old-component> + =

Facade/Wrapper @Directive({ selector: 'app-popover' }) export class PopoverFacade extends UpgradeComponent
{ @Input() label: string; constructor(elementRef: ElementRef, injector: Injector) { super(’srPopoverFacade', elementRef, injector); } }

Co w środku? <span popover="$ctrl.label"> <ng-transclude></ng-transclude> </span> angular .module('people-ui') .component('srPopoverFacade',
{ template: ..., bindings: { label: '<’ } });

Facade/Wrapper <app-popover [label]="label"> <app-old-component [color]="color"> ... </app-old-component> </app-popover> + =

Co z dyrektywami? To zależy. Facade/Wrapper Własna implementacja Zewnętrzna biblioteka

⛺ ⛺ ⛺ ⛺ Komponenty Serwisy Dyrektywy Bootstrap Jak przejść
ostatni etap

Ciąg dalszy nastąpi… Refaktoryzacja kodu Optymalizacja aplikacji Aktualizacja zależności

AngularJS -> Angular-less Organizacja kodu Tooling

Przepis na migrację?

Pogoda -> Czas Sprzęt -> Środowisko Człowiek -> Zespół

The End

[PL] Historia jednej migracji

[PL] Historia jednej migracji

More Decks by Przemek

Other Decks in Technology

Featured

Transcript