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