Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
[PL] Historia jednej migracji
Search
Przemek
January 10, 2018
Technology
0
25
[PL] Historia jednej migracji
Migrating to Angular 5 - lessons learned.
Przemek
January 10, 2018
Tweet
Share
More Decks by Przemek
See All by Przemek
[PL] O blogowaniu w branży IT
psmyrdek
0
25
[PL] Jak spać spokojnie zajmując się front-endem
psmyrdek
0
25
Angular2 + TypeScript, or where is front-end development going to?
psmyrdek
0
70
[PL] ITLearning - e-elearning portal for IT Industry
psmyrdek
0
62
[PL] Not-so-object-oriented programming
psmyrdek
0
66
Untwisted - Imagine Cup 2015
psmyrdek
0
43
[PL] Interfaces 101
psmyrdek
0
1.4k
Other Decks in Technology
See All in Technology
無意味な開発生産性の議論から抜け出すための予兆検知とお金とAI
i35_267
3
11k
怖くない!はじめてのClaude Code
shinya337
0
360
高速なプロダクト開発を実現、創業期から掲げるエンタープライズアーキテクチャ
kawauso
2
7.8k
fukabori.fm 出張版: 売上高617億円と高稼働率を陰で支えた社内ツール開発のあれこれ話 / 20250704 Yoshimasa Iwase & Tomoo Morikawa
shift_evolve
PRO
2
6.3k
ビギナーであり続ける/beginning
ikuodanaka
3
710
Tech-Verse 2025 Global CTO Session
lycorptech_jp
PRO
0
1.6k
asken AI勉強会(Android)
tadashi_sato
0
170
生成AIで小説を書くためにプロンプトの制約や原則について学ぶ / prompt-engineering-for-ai-fiction
nwiizo
6
4k
敢えて生成AIを使わないマネジメント業務
kzkmaeda
1
320
KubeCon + CloudNativeCon Japan 2025 Recap Opening & Choose Your Own Adventureシリーズまとめ
mmmatsuda
0
260
5min GuardDuty Extended Threat Detection EKS
takakuni
0
190
SmartNewsにおける 1000+ノード規模 K8s基盤 でのコスト最適化 – Spot・Gravitonの大規模導入への挑戦
vsanna2
0
120
Featured
See All Featured
The Pragmatic Product Professional
lauravandoore
35
6.7k
Product Roadmaps are Hard
iamctodd
PRO
54
11k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
5.9k
Docker and Python
trallard
44
3.5k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
26
2.9k
How to train your dragon (web standard)
notwaldorf
94
6.1k
Facilitating Awesome Meetings
lara
54
6.4k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
960
The Cult of Friendly URLs
andyhume
79
6.5k
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
How STYLIGHT went responsive
nonsquared
100
5.6k
The World Runs on Bad Software
bkeepers
PRO
69
11k
Transcript
Przemek Smyrdek „Historia jednej migracji” [PL] 2018-01-10 @psmyrdek
None
Gotowy na 2018 TypeScript Ulepszony build system Angular CLI Angular
Universal AOT, etc…
None
None
15 minut później
✔ Gotowe
None
Przepis na migrację?
None
Pogoda Sprzęt Człowiek
Front-End @
None
SaaS vs Software House
”Na horyzoncie są inne projekty…” ”Trzeba spojrzeć na XYZ” ”Mógłbyś
sprawdzić…”
None
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
None
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
None
None
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…
None
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
None
AngularJS -> Angular-less Organizacja kodu Tooling
Przepis na migrację?
Pogoda -> Czas Sprzęt -> Środowisko Człowiek -> Zespół
None
The End