ng1 zu ng2+ migrieren Philipp Burgmer w11k / thecodecampus

Transkript

1 ng1 zu ng2+ migrieren Philipp Burgmer w11k / thecodecampus

2 Über mich Philipp Burgmer SoftwareEntwickler, Trainer WebTechnologien, Sicherheit TypeScript, Angular </> TheCodeCampus ng1 zu ng2+ migrieren 1

3 Über uns W11K GmbH The Web Engineers <> Gegründet 2000 AuftragsEntwicklung / Consulting Web / Java Esslingen / Siegburg </> thecodecampus.de Weiter.Entwickeln. <> Schulungen seit 2007 thecodecampus seit 2013 ProjektKickoffs & Unterstützung im Projekt </> TheCodeCampus ng1 zu ng2+ migrieren 2

4 Überblick <> Historie & Motivation <> Strategien <> Schritt für Schritt TheCodeCampus ng1 zu ng2+ migrieren 3

5 Historie AngularJS <> AngularJS = Angular 1 = ng1 <> Erstes Release: 2009 (IE8) Mehr für Designer als für Entwickler <> Probleme Performance bei großen Anwendungen Keine Struktur auf Code Ebene Schlechte Steuerung des Datenflusses TheCodeCampus ng1 zu ng2+ migrieren 4

6 Historie Angular <> Angular = Angular 2+ = ng2 = ng Kein Angular 3 Aktuell: Angular 4.1 <> Release 2.0 im September 2016 <> Moderne Konzepte umsetzten, aktuelle Standards nutzen Natives Modul System Komponentenorientiertes Design Vereinheitlichtes Templating Deutliche Steigerung der Performance Verbessertes Tooling TheCodeCampus ng1 zu ng2+ migrieren 5

7 Motivation <> Danach ist alles besser Sauberer Code Super Performance Zukunftssicher Nie wieder $scope.$apply() <> Während dessen ist aber auch manches schlimmer TheCodeCampus ng1 zu ng2+ migrieren 6

8 Konzepte <> Grundlegendes gleich SPA DataBinding DependencyInjection <> AngularJS Angular 2+ Service & Factory Service Filters Pipes Directive Template Directive Directive + Template Components Controllers Components Module NgModule Scope TheCodeCampus ng1 zu ng2+ migrieren 7

9 TheCodeCampus ng1 zu ng2+ migrieren Strategien

10 Big Bang <> Anwendung neu schreiben <> Fachliche Details bekannt Umsetzung deutlich schneller als Erstentwicklung <> Angular 2+ Wissen benötigt Keine Zeit für seichten Einstieg TheCodeCampus ng1 zu ng2+ migrieren 9

11 Big Bang Vorteile <> Danach kein LegacyCode mehr <> Chance technische Schulden abzubauen <> Kein zusätzlicher Aufwand für Schritweise Migration Upgrade & Downgrade Build <> Danach hoch optimierte Anwendung TheCodeCampus ng1 zu ng2+ migrieren 10

12 Big Bang Nachteile <> Oft zu aufwändig / zu teuer <> Weiterentwicklung stockt <> Paralelle Weiterentwicklung muss nachgezogen werden TheCodeCampus ng1 zu ng2+ migrieren 11

13 Adaptieren <> Anwendung bleibt rein AngularJS <> Konzepte und BestPractises aufgreifen Neuer Code mit neuen Konzeten Alter Code schrittweise angepasst z.b. SmartvsDumpComponents <> Little Bang am Ende Umstellung von AngularJS auf Angular TheCodeCampus ng1 zu ng2+ migrieren 12

14 Adaptieren Vorteile <> Schrittweise neue Konzepte lernen & einbauen <> Weiterentwicklung paralell möglich <> AngularJS kann auch sehr komfortabel sein TypeScript ES Module Komponenten TheCodeCampus ng1 zu ng2+ migrieren 13

15 Adaptieren Nachteile <> Tooling / Build <> Kein echtes Angular 2+ Performance Features (z.b. StyleEncapsulation) <> Little Bang: sämtlichen Code anfassen TheCodeCampus ng1 zu ng2+ migrieren 14

16 Hybrid <> Anwendung bleibt AngularJS Angular 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

17 Hybrid Vorteile <> 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

18 Hybrid Nachteile <> Angular wird als Bibliothek eingebunden Recht schwergewichtig (ohne Optimierungen des CLI) Für Mobile eher ungeeignet <> Tooling / Build <> Verstehen von Upgrade und Downgrade <> Nicht alles lässt sich up bzw. downgraden Pipes bzw. Filter NichtKomponentenDirektiven TheCodeCampus ng1 zu ng2+ migrieren 17

19 Die Wahrheit liegt irgendwo dazwischen TheCodeCampus ng1 zu ng2+ migrieren

20 Die Wahrheit <> Erst Adaptieren <> Dann Hybrid <> Kurz vor Ende vielleicht doch RestBigBang TheCodeCampus ng1 zu ng2+ migrieren 19

21 Schritt für Schritt zur Angular Anwendung TheCodeCampus ng1 zu ng2+ migrieren

22 TheCodeCampus ng1 zu ng2+ migrieren Schritt 1 AngularJS aktualisieren

23 AngularJS aktualisieren <> Für Adaptieren Neue Featues verwenden können Angular 2+ Konzepte aufgreifen können <> Für Hybrid UpgradeAdapter setzt AngularJS voraus <> Bugfixes <> Performance TheCodeCampus ng1 zu ng2+ migrieren 22

24 AngularJS 1.2 <> Animationen <> FeatureModule <> ngtouch TheCodeCampus ng1 zu ng2+ migrieren 23

25 AngularJS 1.3 <> Kein IE8 Support <> strictdi <> ngmodeloptions <> ngmodel Validator Pipeline <> ngmessages <> OneTimeBindings TheCodeCampus ng1 zu ng2+ migrieren 24

26 AngularJS 1.4 <> Keine neuen Features <> Viele DetailVerbesserungen Teilweise BreakingChanges Animationen, $http, jquery, Cookies, ngmessages <> Performance: ExpressionParser, Compiling, Watching TheCodeCampus ng1 zu ng2+ migrieren 25

27 AngularJS 1.5 <> MultiSlotTransclusion <> Annäherung an Angular 2 module.component als Alternative zu module.directive LifecycleHooks für Direktiven (ab 1.5.3) $oninit(), $onchanges(), $ondestroy() und $postlink() TheCodeCampus ng1 zu ng2+ migrieren 26

28 AngularJS 1.6 <> ngmodeloptions können vererbt werden <> <> Nicht standardisierte PromiseMethoden success und error an Rückgabe von $http entfernt Breaking Change für KomponentenBindings: keine Zuweisungen mehr vor ControllerInstanziierung TheCodeCampus ng1 zu ng2+ migrieren 27

29 TheCodeCampus ng1 zu ng2+ migrieren Schritt 2 TypeScript einführen

30 TypeScript einführen <> Warum? <> Wie? Typisierung CodeStrukturierung ES6+ Features *.js zu *.ts umbenennen Tooling einbauen (z.b. WebPack) TheCodeCampus ng1 zu ng2+ migrieren 29

31 ESModule <> TypeScript + ModuleLoader <> Wichtiges Feature für große Anwendungen <> Ein Einstiegspunkt, danach nur über importstatements Pro SoftwareKomponente eine Datei (ein Modul) Erleichtert Navigation im Code <> Bibliotheken müssen per NPM installiert werden TheCodeCampus ng1 zu ng2+ migrieren 30

32 AngularJS Module <> ModuleSystem von AngularJS ist Schrott Man kann aber nicht ohne <> Trotzdem: FeatureModule Erleichtert Wechsel zu Angular 2+ Modulen später OrdnerStruktur = FeatureStruktur <> AngularModule exportieren (eigene Datei) <> AngularModule importieren und über Name einbinden AppModule bindet FeatureModule ein TheCodeCampus ng1 zu ng2+ migrieren 31

33 Typen für AngularJS stellt Typisierung für JS Bibliotheken bereit AngularJS in JS entwickelt, keine statische Typisierung Community stellt DeclarationFiles bereit DeclarationFiles beinhalten nur TypInformationen <> Abhängigkeiten in package.json angular als als devdependency TheCodeCampus ng1 zu ng2+ migrieren 32

34 Schritt 3 An StyleGuide anpassen TheCodeCampus ng1 zu ng2+ migrieren

35 StyleGuide <> Versuchen sich an StyleGuide und Best Practices zu halten <> John Papa's StyleGuide FeatureModule und Ordner Direktiven mit isolated Scope Kein Zugriff auf fremde Daten (ControllerAs) Routing... <> Viele Angular 2+ Konzept und Best Practices bauen darauf auf TheCodeCampus ng1 zu ng2+ migrieren 34

36 ES6+ Features <> Service & Controller als Klassen Service mit module.service registrieren Controller wie gewohnt <> ES6+ Features nutzen Promise statt $q for..of statt angular.foreach let Variablen TheCodeCampus ng1 zu ng2+ migrieren 35

37 TheCodeCampus ng1 zu ng2+ migrieren Schritt 4 Angular 2+ einbinden

38 Bootstrapping <> AngularJS Bootstrapping Automatisch über ngapp Attribute im Markup Manuell über angular.bootstrap Aufruf im Code <> Bei Verwendung von UpgradeAdapter nur manuelles Bootstrapping möglich Angular 2+ Module anlegen Angular 2+ bootstrappen (zumindest fast) AngularJS bootstrappen <> Kompliziert, aber ein mal Copy & Paste TheCodeCampus ng1 zu ng2+ migrieren 37

39 Bootstrapping imports: [BrowserModule, UpgradeModule] }) export class AppModule { ngdobootstrap() {} } platformbrowserdynamic().bootstrapmodule(appmodule).then(platformref => { const upgrade = platformref.injector.get(upgrademodule) as UpgradeModule; upgrade.bootstrap(document.body, ['app'], {strictdi: true}); }); TheCodeCampus ng1 zu ng2+ migrieren 38

40 TheCodeCampus ng1 zu ng2+ migrieren Schritt 5 Service migrieren

41 Services migrieren <> Service schon als Klasse implementiert Kleine 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

42 Service downgraden import {downgradeinjectable} from '@angular/upgrade/static'; angular.module('app').factory('myservice', providers: [ MyService, otherserviceprovider ] }) export class AppModule {} TheCodeCampus ng1 zu ng2+ migrieren 41

43 Service upgraden import {OpaqueToken} from "@angular/core"; export const OtherService = new OpaqueToken("OtherService"); export function otherservicefactory(i: any) { return i.get('otherservice'); } export const otherserviceprovider = { provide: OtherService, usefactory: otherservicefactory, deps: ['$injector'] }; export class MyService { constructor(@inject(otherservice) private other) {} } TheCodeCampus ng1 zu ng2+ migrieren 42

44 Schritt 6 Komponenten migrieren TheCodeCampus ng1 zu ng2+ migrieren

45 Komponenten migrieren <> Controller schon als Klasse implementiert Kleine Anpassungen für DI Wird zu KomponentenKlasse <> Template muss Angular 2+ Expression Language verwenden <> Registrierung ändern: Angular 2+ UND AngularJS Module Downgrade wenn in AngularJS Code verwendet declaration und entrycomponent an Angular 2+ Module <> Verwendete Komponenten upgraden oder ersetzen TheCodeCampus ng1 zu ng2+ migrieren 44

46 Komponente downgraden import {downgradecomponent} from selector: 'applist', template: '<div></div>' }) export class ListComponent {} angular.module('app').directive('list', downgradecomponent({ component: ListComponent }) as angular.idirectivefactory); TheCodeCampus ng1 zu ng2+ migrieren 45

47 TheCodeCampus ng1 zu ng2+ migrieren Schritt 7 AngularJS entfernen

48 Routing <> Alle Komponenten auf Angular 2+ umgestellt <> Routen sind nur noch sehr dünne Wrapper Verweisen auf Komponente <> Einfach zu migrieren UIRouter zu Angular Router TheCodeCampus ng1 zu ng2+ migrieren 47

49 Bootstrapping <> Nur noch Angular 2+ starten <> Alle ImportStatements zu AngularJS entfernen <> EntryComponents kontrollieren TheCodeCampus ng1 zu ng2+ migrieren 48

50 Tooling <> Tooling auf Angular CLI umstellen Von hoch spezialisiertem Build profitieren AOT Compile Test Ausführung <> Neues Projekt mit CLI anlegen <> Projekte zusammenführen TheCodeCampus ng1 zu ng2+ migrieren 49

51 Zusammenfassung <> Migration mittlerweile sehr gut dokumentiert angular.io / Upgarding from AngularJS mit PhoneCat Tutorial NGConf 2017 Vortrag von Asim Hussain mit Contacts App <> UpgradeAdapter erspart Boilerplate Nicht gescheit dokumentiert <> Upgrade Pfad klar ersichtlich Code nicht immer ganz einfach <> Nicht immer Upgrade zwingend TypeScript, Module, RxJS gut ohne Angular 2+ möglich TheCodeCampus ng1 zu ng2+ migrieren 50

52 Philipp Burgmer GitHub: pburgmer