ng1 zu ng2+ migrieren - Entwicklertag...Angular = Angular 2+ = ng2 = ng Kein Angular 3 Aktuell:...

Philipp Burgmer w11k / theCodeCampus

ng1 zu ng2+ migrieren

Philipp Burgmer

TheCodeCampus - ng1 zu ng2+ migrieren 1

[email protected] | @philippburgmer<>Software-Entwickler, TrainerWeb-Technologien, SicherheitTypeScript, Angular </>

Über mich

mailto:[email protected]

https://twitter.com/philippburgmer

W11K GmbH - The Web Engineers

theCodeCampus.de - Weiter.Entwickeln.


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


<>

<>

<>

Ü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


<>

<>-

<>---

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


<>--

<>

<>-----

Historie Angular

Danach ist alles besserSauberer CodeSuper PerformanceZukunftssicherNie wieder $scope.$apply()

Während dessen ist aber auch manches schlimmer


<>----

<>

Motivation

Grundlegendes gleichSPAData-BindingDependency-Injection

AngularJS → Angular 2+Service & Factory → ServiceFilters → PipesDirective - Template → DirectiveDirective + Template → ComponentsControllers → ComponentsModule → NgModuleScope →


<>---

<>-------

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


<>

<>-

<>-

Big Bang

Danach kein Legacy-Code mehr

Chance technische Schulden abzubauen

Kein zusätzlicher Aufwand für Schritweise MigrationUpgrade & DowngradeBuild

Danach hoch optimierte Anwendung


<>

<>

<>--

<>

Big Bang - Vorteile

Oft zu aufwändig / zu teuer

Weiterentwicklung stockt

Paralelle Weiterentwicklung muss nachgezogen werden


<>

<>

<>

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


<>

<>---

<>-

Adaptieren

Schrittweise neue Konzepte lernen & einbauen

Weiterentwicklung paralell möglich

AngularJS kann auch sehr komfortabel seinTypeScriptES ModuleKomponenten


<>

<>

<>---

Adaptieren - Vorteile

Tooling / Build

Kein echtes Angular 2+PerformanceFeatures (z.B. Style-Encapsulation)

Little Bang: sämtlichen Code anfassen


<>

<>--

<>

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)


<>-

<>

<>

<>

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


<>

<>

<>

<>

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


<>--

<>

<>

<>--

Hybrid - Nachteile

Die Wahrheit liegt irgendwo dazwischen


Erst Adaptieren

Dann Hybrid

Kurz vor Ende vielleicht doch Rest-Big-Bang


<>

<>

<>

Die Wahrheit

Schritt für Schritt zur Angular Anwendung


Schritt 1 AngularJS aktualisieren


Für AdaptierenNeue Featues verwenden könnenAngular 2+ Konzepte aufgreifen können

Für HybridUpgradeAdapter setzt AngularJS 1.5.3 voraus

Bugfixes

Performance


<>--

<>-

<>

<>

AngularJS aktualisieren

Animationen

Feature-Module

ngTouch


<>

<>

<>

AngularJS 1.2

Kein IE8 Support

strict-DI

ngModelOptions

ngModel Validator Pipeline

ngMessages

One-Time-Bindings


<>

<>

<>

<>

<>

<>

AngularJS 1.3

Keine neuen Features

Viele Detail-VerbesserungenTeilweise Breaking-ChangesAnimationen, $http, jQuery, Cookies, ngMessages

Performance: Expression-Parser, Compiling, Watching


<>

<>--

<>

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()


<>

<>--

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


<>

<>

<>

AngularJS 1.6

Schritt 2 TypeScript einführen


Warum?TypisierungCode-StrukturierungES6+ Features

Wie?*.js zu *.ts umbenennenTooling einbauen (z.B. WebPack)


<>---

<>--

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


<>

<>

<>--

<>

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


<>-

<>--

<>

<>-

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


<>---

<>--

Typen für AngularJS

Schritt 3 An Style-Guide anpassen


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


<>

<>-----

<>

Style-Guide

https://github.com/johnpapa/angular-styleguide/blob/master/a1/README.md

Service & Controller als KlassenService mit module.service registrierenController wie gewohnt

ES6+ Features nutzenPromise statt $qfor..of statt angular.forEachlet Variablen


<>--

<>---

ES6+ Features

Schritt 4 Angular 2+ einbinden


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


<>--

<>---

<>

Bootstrapping


@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


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


<>-

<>

<>

<>

Services migrieren


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


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


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


<>--

<>

<>--

<>

Komponenten migrieren


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


Alle Komponenten auf Angular 2+ umgestellt

Routen sind nur noch sehr dünne WrapperVerweisen auf Komponente

Einfach zu migrierenUI-Router zu Angular Router


<>

<>-

<>-

Routing

Nur noch Angular 2+ starten

Alle Import-Statements zu AngularJS entfernen

EntryComponents kontrollieren


<>

<>

<>

Bootstrapping

Tooling auf Angular CLI umstellenVon hoch spezialisiertem Build profitierenAOT CompileTest Ausführung

Neues Projekt mit CLI anlegen

Projekte zusammenführen


<>---

<>

<>

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


<>--

<>-

<>-

<>--

Zusammenfassung

https://angular.io/docs/ts/latest/guide/upgrade.html

https://github.com/angular/angular-phonecat

https://www.youtube.com/watch?v=4p1jG2QNc4U

https://github.com/codecraftpro/angularjs-migration-workshop

https://angular.io/docs/ts/latest/api/upgrade/index/UpgradeAdapter-class.html

Philipp [email protected]

Twitter: @philippburgmerGitHub: pburgmer

www.thecodecampus.de@theCodeCampus

mailto:[email protected]

https://twitter.com/philippburgmer

https://github.com/pburgmer

http://www.thecodecampus.de/

https://twitter.com/thecodecampus

ng1 zu ng2+ migrieren - Entwicklertag...Angular = Angular 2+ = ng2 = ng Kein Angular 3 Aktuell:...

Documents

Transcript of ng1 zu ng2+ migrieren - Entwicklertag...Angular = Angular 2+ = ng2 = ng Kein Angular 3 Aktuell:...