Upgrade to Pro — share decks privately, control downloads, hide ads and more …
Sign up for free

[PL] Historia jednej migracji

Avatar for Przemek Przemek
January 10, 2018
Technology
32
0

[PL] Historia jednej migracji

Migrating to Angular 5 - lessons learned.

Avatar for Przemek

Przemek

January 10, 2018

More Decks by Przemek

See All by Przemek
[PL] O blogowaniu w branży IT
Avatar for Przemek psmyrdek
0
33
[PL] Jak spać spokojnie zajmując się front-endem
Avatar for Przemek psmyrdek
0
32
Angular2 + TypeScript, or where is front-end development going to?
Avatar for Przemek psmyrdek
0
81
[PL] ITLearning - e-elearning portal for IT Industry
Avatar for Przemek psmyrdek
0
71
[PL] Not-so-object-oriented programming
Avatar for Przemek psmyrdek
0
77
Untwisted - Imagine Cup 2015
Avatar for Przemek psmyrdek
0
50
[PL] Interfaces 101
Avatar for Przemek psmyrdek
0
1.4k

Other Decks in Technology

See All in Technology
深夜のクラウド懺悔室 1:29:300 or 1:0:0
Avatar for kazzpapa3 kazzpapa3
1
240
synctest時代のhttptest Go 1.27で変わるHTTPサーバテストの裏側 / go conference2026 synctest and httptest
Avatar for Yoichiro Shimizu budougumi0617
1
2.8k
Oracle Cloud Infrastructure IaaS 新機能アップデート 2026/6 - 2026/8
Avatar for oracle4engineer oracle4engineer
PRO
0
200
WAF 運用改善の承認サイクル/SRE_BizReach_MIXI_1
Avatar for Visional Engineering ＆ Design visional_engineering_and_design
2
620
ペアプロの価値はコードを書くことだけじゃない
Avatar for コドモン開発チーム codmoninc
PRO
0
220
作品が生態系になった ─ Mini Tokyo 3D から世界へ
Avatar for 草薙昭彦 nagix
0
180
DEFCON_CHV_CTF_Write-up.pdf
Avatar for bata_24 bata_24
0
150
OpenTelemetryのメトリクスをCloudWatchに送ってPromQLで見てみた
Avatar for Itaru Ota ota1022
0
140
コスト最適化の「めんどくさい」を AWS FinOps Agent でチョット楽にする
Avatar for kaz classmethod_kaz
0
330
Amazon Quick on DesktopがIAM Identity Centerで動かない理由
Avatar for YukiOgawa yukiogawa
0
180
多層防御と最⼩権限で実現する、安全なAIエージェント設計パターン
Avatar for LINEヤフーTech (LY Corporation Tech) lycorptech_jp
PRO
1
280
omasushiというライブラリを作った
Avatar for polidog polidog
PRO
0
220

Featured

See All Featured
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
Avatar for Kevin Liebholz kevinliebholz
37
6.6k
Information Architects: The Missing Link in Design Systems
Avatar for Michelle Chin soysaucechin
1
1.1k
Rebuilding a faster, lazier Slack
Avatar for samanthasiow samanthasiow
85
9.6k
Leveraging Curiosity to Care for An Aging Population
Avatar for Cassini Nazir cassininazir
1
490
Test your architecture with Archunit
Avatar for Yoan thirion
2
2.4k
Discover your Explorer Soul
Avatar for Emna emna__ayadi
2
1.3k
State of Search Keynote: SEO is Dead Long Live SEO
Avatar for Ryan Jones ryanjones
0
270
How STYLIGHT went responsive
Avatar for nonsquared nonsquared
100
6.3k
Side Projects
Avatar for Sacha Greif sachag
456
43k
Design and Strategy: How to Deal with People Who Don’t "Get" Design
Avatar for Morgane Peng morganepeng
133
19k
Building Applications with DynamoDB
Avatar for Matt Wood mza
96
7.2k
Into the Great Unknown - MozCon
Avatar for Noah Learner thekraken
41
2.7k

Transcript

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

  2. None

  3. Gotowy na 2018 TypeScript Ulepszony build system Angular CLI Angular

    Universal AOT, etc…
  4. None
  5. None

  6. 15 minut później

  7. ✔ Gotowe

  8. None

  9. Przepis na migrację?

  10. None

  11. Pogoda Sprzęt Człowiek

  12. Front-End @

  13. None

  14. SaaS vs Software House

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

    sprawdzić…”
  16. None

  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

  23. None

  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
  28. None
  29. None

  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…

  52. None

  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

  69. None

  70. AngularJS -> Angular-less Organizacja kodu Tooling

  71. Przepis na migrację?

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

  73. None

  74. The End