ng1 zu ng2+ migrieren - entwicklertag...angular = angular 2+ = ng2 = ng kein angular 3 aktuell:...
Post on 10-Aug-2020
11 Views
Preview:
TRANSCRIPT
Philipp Burgmer w11k / theCodeCampus
ng1 zu ng2+ migrieren
Philipp Burgmer
TheCodeCampus - ng1 zu ng2+ migrieren 1
burgmer@w11k.de | @philippburgmer<>Software-Entwickler, TrainerWeb-Technologien, SicherheitTypeScript, Angular </>
Über mich
W11K GmbH - The Web Engineers
theCodeCampus.de - Weiter.Entwickeln.
TheCodeCampus - ng1 zu ng2+ migrieren 2
Gegründet 2000<>Auftrags-Entwicklung / ConsultingWeb / JavaEsslingen / Siegburg </>
Schulungen seit 2007<>theCodeCampus seit 2013Projekt-Kickoffs & Unterstützung im Projekt </>
Über uns
Historie & Motivation
Strategien
Schritt für Schritt
TheCodeCampus - ng1 zu ng2+ migrieren 3
<>
<>
<>
Überblick
AngularJS = Angular 1 = ng1
Erstes Release: 2009 (IE8)Mehr für Designer als für Entwickler
ProblemePerformance bei großen AnwendungenKeine Struktur auf Code EbeneSchlechte Steuerung des Datenflusses
TheCodeCampus - ng1 zu ng2+ migrieren 4
<>
<>-
<>---
Historie AngularJS
Angular = Angular 2+ = ng2 = ngKein Angular 3Aktuell: Angular 4.1
Release 2.0 im September 2016
Moderne Konzepte umsetzten, aktuelle Standards nutzenNatives Modul SystemKomponentenorientiertes DesignVereinheitlichtes TemplatingDeutliche Steigerung der PerformanceVerbessertes Tooling
TheCodeCampus - ng1 zu ng2+ migrieren 5
<>--
<>
<>-----
Historie Angular
Danach ist alles besserSauberer CodeSuper PerformanceZukunftssicherNie wieder $scope.$apply()
Während dessen ist aber auch manches schlimmer
TheCodeCampus - ng1 zu ng2+ migrieren 6
<>----
<>
Motivation
Grundlegendes gleichSPAData-BindingDependency-Injection
AngularJS → Angular 2+Service & Factory → ServiceFilters → PipesDirective - Template → DirectiveDirective + Template → ComponentsControllers → ComponentsModule → NgModuleScope →
TheCodeCampus - ng1 zu ng2+ migrieren 7
<>---
<>-------
Konzepte
Strategien
TheCodeCampus - ng1 zu ng2+ migrieren
Anwendung neu schreiben
Fachliche Details bekanntUmsetzung deutlich schneller als Erstentwicklung
Angular 2+ Wissen benötigtKeine Zeit für seichten Einstieg
TheCodeCampus - ng1 zu ng2+ migrieren 9
<>
<>-
<>-
Big Bang
Danach kein Legacy-Code mehr
Chance technische Schulden abzubauen
Kein zusätzlicher Aufwand für Schritweise MigrationUpgrade & DowngradeBuild
Danach hoch optimierte Anwendung
TheCodeCampus - ng1 zu ng2+ migrieren 10
<>
<>
<>--
<>
Big Bang - Vorteile
Oft zu aufwändig / zu teuer
Weiterentwicklung stockt
Paralelle Weiterentwicklung muss nachgezogen werden
TheCodeCampus - ng1 zu ng2+ migrieren 11
<>
<>
<>
Big Bang - Nachteile
Anwendung bleibt rein AngularJS
Konzepte und Best-Practises aufgreifenNeuer Code mit neuen KonzetenAlter Code schrittweise angepasstz.B. Smart-vs-Dump-Components
Little Bang am EndeUmstellung von AngularJS auf Angular
TheCodeCampus - ng1 zu ng2+ migrieren 12
<>
<>---
<>-
Adaptieren
Schrittweise neue Konzepte lernen & einbauen
Weiterentwicklung paralell möglich
AngularJS kann auch sehr komfortabel seinTypeScriptES ModuleKomponenten
TheCodeCampus - ng1 zu ng2+ migrieren 13
<>
<>
<>---
Adaptieren - Vorteile
Tooling / Build
Kein echtes Angular 2+PerformanceFeatures (z.B. Style-Encapsulation)
Little Bang: sämtlichen Code anfassen
TheCodeCampus - ng1 zu ng2+ migrieren 14
<>
<>--
<>
Adaptieren - Nachteile
Anwendung bleibt AngularJSAngular 2+ wird zusätzlich eingebunden
Neuer Code wird für Angular geschrieben
Alter Code kann Schrittweise migriert werden
Komponenten und Services können gegenseitig verwendet werden (Upgrade und Downgrade)
TheCodeCampus - ng1 zu ng2+ migrieren 15
<>-
<>
<>
<>
Hybrid
Schrittweise neue Konzepte lernen & einbauen
Weiterentwicklung profitiert sofort von Angular 2+
Alten Code Schritt für Schritt migrieren
Tiny Pop: Leichter Wechsel zu Angular am Ende
TheCodeCampus - ng1 zu ng2+ migrieren 16
<>
<>
<>
<>
Hybrid - Vorteile
Angular wird als Bibliothek eingebundenRecht schwergewichtig (ohne Optimierungen des CLI)Für Mobile eher ungeeignet
Tooling / Build
Verstehen von Upgrade und Downgrade
Nicht alles lässt sich up- bzw. downgradenPipes bzw. FilterNicht-Komponenten-Direktiven
TheCodeCampus - ng1 zu ng2+ migrieren 17
<>--
<>
<>
<>--
Hybrid - Nachteile
Die Wahrheit liegt irgendwo dazwischen
TheCodeCampus - ng1 zu ng2+ migrieren
Erst Adaptieren
Dann Hybrid
Kurz vor Ende vielleicht doch Rest-Big-Bang
TheCodeCampus - ng1 zu ng2+ migrieren 19
<>
<>
<>
Die Wahrheit
Schritt für Schritt zur Angular Anwendung
TheCodeCampus - ng1 zu ng2+ migrieren
Schritt 1 AngularJS aktualisieren
TheCodeCampus - ng1 zu ng2+ migrieren
Für AdaptierenNeue Featues verwenden könnenAngular 2+ Konzepte aufgreifen können
Für HybridUpgradeAdapter setzt AngularJS 1.5.3 voraus
Bugfixes
Performance
TheCodeCampus - ng1 zu ng2+ migrieren 22
<>--
<>-
<>
<>
AngularJS aktualisieren
Animationen
Feature-Module
ngTouch
TheCodeCampus - ng1 zu ng2+ migrieren 23
<>
<>
<>
AngularJS 1.2
Kein IE8 Support
strict-DI
ngModelOptions
ngModel Validator Pipeline
ngMessages
One-Time-Bindings
TheCodeCampus - ng1 zu ng2+ migrieren 24
<>
<>
<>
<>
<>
<>
AngularJS 1.3
Keine neuen Features
Viele Detail-VerbesserungenTeilweise Breaking-ChangesAnimationen, $http, jQuery, Cookies, ngMessages
Performance: Expression-Parser, Compiling, Watching
TheCodeCampus - ng1 zu ng2+ migrieren 25
<>
<>--
<>
AngularJS 1.4
Multi-Slot-Transclusion
Annäherung an Angular 2module.component als Alternative zu module.directive Lifecycle-Hooks für Direktiven (ab 1.5.3) $onInit() , $onChanges() , $onDestroy() und $postLink()
TheCodeCampus - ng1 zu ng2+ migrieren 26
<>
<>--
AngularJS 1.5
ngModelOptions können vererbt werden
Nicht standardisierte Promise-Methoden success und error an Rückgabe von $http entfernt
Breaking Change für Komponenten-Bindings: keine Zuweisungen mehr vor Controller-Instanziierung
TheCodeCampus - ng1 zu ng2+ migrieren 27
<>
<>
<>
AngularJS 1.6
Schritt 2 TypeScript einführen
TheCodeCampus - ng1 zu ng2+ migrieren
Warum?TypisierungCode-StrukturierungES6+ Features
Wie?*.js zu *.ts umbenennenTooling einbauen (z.B. WebPack)
TheCodeCampus - ng1 zu ng2+ migrieren 29
<>---
<>--
TypeScript einführen
TypeScript + Module-Loader
Wichtiges Feature für große Anwendungen
Ein Einstiegspunkt, danach nur über import-StatementsPro Software-Komponente eine Datei (ein Modul)Erleichtert Navigation im Code
Bibliotheken müssen per NPM installiert werden
TheCodeCampus - ng1 zu ng2+ migrieren 30
<>
<>
<>--
<>
ES-Module
Module-System von AngularJS ist SchrottMan kann aber nicht ohne
Trotzdem: Feature-ModuleErleichtert Wechsel zu Angular 2+ Modulen späterOrdner-Struktur = Feature-Struktur
Angular-Module exportieren (eigene Datei)
Angular-Module importieren und über Name einbindenAppModule bindet Feature-Module ein
TheCodeCampus - ng1 zu ng2+ migrieren 31
<>-
<>--
<>
<>-
AngularJS Module
@types stellt Typisierung für JS Bibliotheken bereitAngularJS in JS entwickelt, keine statische TypisierungCommunity stellt Declaration-Files bereitDeclaration-Files beinhalten nur Typ-Informationen
Abhängigkeiten in package.jsonangular als dependency@types/angular als devDependency
TheCodeCampus - ng1 zu ng2+ migrieren 32
<>---
<>--
Typen für AngularJS
Schritt 3 An Style-Guide anpassen
TheCodeCampus - ng1 zu ng2+ migrieren
Versuchen sich an Style-Guide und Best Practices zu halten
John Papa's Style-GuideFeature-Module und OrdnerDirektiven mit isolated ScopeKein Zugriff auf fremde Daten (Controller-As)Routing...
Viele Angular 2+ Konzept und Best Practices bauen darauf auf
TheCodeCampus - ng1 zu ng2+ migrieren 34
<>
<>-----
<>
Style-Guide
Service & Controller als KlassenService mit module.service registrierenController wie gewohnt
ES6+ Features nutzenPromise statt $qfor..of statt angular.forEachlet Variablen
TheCodeCampus - ng1 zu ng2+ migrieren 35
<>--
<>---
ES6+ Features
Schritt 4 Angular 2+ einbinden
TheCodeCampus - ng1 zu ng2+ migrieren
AngularJS BootstrappingAutomatisch über ng-app Attribute im MarkupManuell über angular.bootstrap Aufruf im Code
Bei Verwendung von UpgradeAdapter nur manuelles Bootstrapping möglichAngular 2+ Module anlegenAngular 2+ bootstrappen (zumindest fast)AngularJS bootstrappen
Kompliziert, aber ein mal Copy & Paste
TheCodeCampus - ng1 zu ng2+ migrieren 37
<>--
<>---
<>
Bootstrapping
TheCodeCampus - ng1 zu ng2+ migrieren 38
@NgModule({1
imports: [BrowserModule, UpgradeModule]2
})3
export class AppModule {4
ngDoBootstrap() {}5
}6
7
platformBrowserDynamic().bootstrapModule(AppModule).then(platformRef => {8
const upgrade = platformRef.injector.get(UpgradeModule) as UpgradeModule;9
upgrade.bootstrap(document.body, ['app'], {strictDi: true});10
});11
Bootstrapping
Schritt 5 Service migrieren
TheCodeCampus - ng1 zu ng2+ migrieren
Service schon als Klasse implementiertKleine Anpassungen für DI
Registrierung ändern: Angular 2+ UND AngularJS Module
Downgrade wenn in AngularJS Code verwendet
Abhängigkeiten upgraden oder ersetzen
TheCodeCampus - ng1 zu ng2+ migrieren 40
<>-
<>
<>
<>
Services migrieren
TheCodeCampus - ng1 zu ng2+ migrieren 41
import {downgradeInjectable} from '@angular/upgrade/static';1
2
angular.module('app')3
.factory('MyService', downgradeInjectable(MyService));4
@NgModule({1
providers: [2
MyService,3
otherServiceProvider4
]5
})6
export class AppModule {}7
Service downgraden
TheCodeCampus - ng1 zu ng2+ migrieren 42
import {OpaqueToken} from "@angular/core";1
export const OtherService = new OpaqueToken("OtherService");2
3
export function otherServiceFactory(i: any) {4
return i.get('otherService');5
}6
export const otherServiceProvider = {7
provide: OtherService,8
useFactory: otherServiceFactory,9
deps: ['$injector']10
};11
export class MyService {1
constructor(@Inject(OtherService) private other) {}2
}3
Service upgraden
Schritt 6 Komponenten migrieren
TheCodeCampus - ng1 zu ng2+ migrieren
Controller schon als Klasse implementiertKleine Anpassungen für DIWird zu Komponenten-Klasse
Template muss Angular 2+ Expression Language verwenden
Registrierung ändern: Angular 2+ UND AngularJS ModuleDowngrade wenn in AngularJS Code verwendetdeclaration und entryComponent an Angular 2+ Module
Verwendete Komponenten upgraden oder ersetzen
TheCodeCampus - ng1 zu ng2+ migrieren 44
<>--
<>
<>--
<>
Komponenten migrieren
TheCodeCampus - ng1 zu ng2+ migrieren 45
import {downgradeComponent} from "@angular/upgrade/static";1
2
@Component({3
selector: 'app-list',4
template: '<div></div>'5
})6
export class ListComponent {}7
8
angular.module('app')9
.directive('list', downgradeComponent({10
component: ListComponent11
}) as angular.IDirectiveFactory);12
Komponente downgraden
Schritt 7 AngularJS entfernen
TheCodeCampus - ng1 zu ng2+ migrieren
Alle Komponenten auf Angular 2+ umgestellt
Routen sind nur noch sehr dünne WrapperVerweisen auf Komponente
Einfach zu migrierenUI-Router zu Angular Router
TheCodeCampus - ng1 zu ng2+ migrieren 47
<>
<>-
<>-
Routing
Nur noch Angular 2+ starten
Alle Import-Statements zu AngularJS entfernen
EntryComponents kontrollieren
TheCodeCampus - ng1 zu ng2+ migrieren 48
<>
<>
<>
Bootstrapping
Tooling auf Angular CLI umstellenVon hoch spezialisiertem Build profitierenAOT CompileTest Ausführung
Neues Projekt mit CLI anlegen
Projekte zusammenführen
TheCodeCampus - ng1 zu ng2+ migrieren 49
<>---
<>
<>
Tooling
Migration mittlerweile sehr gut dokumentiertangular.io / Upgarding from AngularJS mit PhoneCat TutorialNG-Conf 2017 Vortrag von Asim Hussain mit Contacts App
UpgradeAdapter erspart BoilerplateNicht gescheit dokumentiert
Upgrade Pfad klar ersichtlichCode nicht immer ganz einfach
Nicht immer Upgrade zwingendTypeScript, Module, RxJSgut ohne Angular 2+ möglich
TheCodeCampus - ng1 zu ng2+ migrieren 50
<>--
<>-
<>-
<>--
Zusammenfassung
Philipp Burgmerburgmer@w11k.de
Twitter: @philippburgmerGitHub: pburgmer
www.thecodecampus.de@theCodeCampus
top related