Indiamajones che fa il salto della fede

A leapof faith !?You need a Plan... to survivean ng1to Ng2migration

#angularconf16

http://2016.angularconf.it/

1

https://github.com/AGiorgetti/AngularConf2016.git

2

What this talkis NOT about

This is not an Angular 2 introduction.

Before any migration you should already know at least the basics of the new framework.

This talk is about things you might 'need' to consider in order to start the migration journey.

3

Do NOT migrate to learn

You should not start this process just to 'try out Angular 2.

Start a new pet project or a create a prototype (maybe something used internally).

Learn the framework, understand what you CAN andCANNOT do.

4

Ask yourself some questions

Do I want to migrate because ng2 is the hot new thing ?Whats the current state of my project ?For how long will I maintain this project ?Will vNext be a complete overhaul/rewrite ?What's my priority in maintaining the current code base and keep delivering values to my customers ?Do I have a S.L.A. ?

5

Morequestions...

Whats the size of my project ?How many external dependencies does my project have ?Do they have an Angular 2 implementation ?Do they play well with Angular 2 ?Should look for something different ?Whats the team skill level ?

6

Also...Am Iready to bring in new technologies (and new tools) ?Task RunnersModule Loaders Build Pipeline Angular CLIMaterial DesignAngular UniversalAngular Mobile ToolkitWTF are those ZONES ?!OMG! TypeScript ?!

7

Im not here to tell you

that Angular 2 is: New and Shiny, FASTER (way faster), built on modern web standards, supports many interesting features like Lazy Loading, Server Side RenderingYou already know that!

Im not here to tell you that you NEED Angular 2 at all.

Its up to you to decide if you want Angular 2 in your project, Im not taking any responsibility.

8

StrategiesYou'll have 3 options to migrate:

1) Don't do it.

2) Full rewrite (possibly keeping 2 codebases, or stopping the development of you previous one).

3) Embrace a minimize risk / potentially slow side by side migration process.

9

So...Option 3It turns out that a migration is doable andtheAngular teamoffers you atoolto do just that:

ngUpgrade

Technicallyit allows for the coexistence of Angular 1 and Angular 2in the same application.

Both the frameworks will be activeand will controlindependent portionsof the DOM with ngUpgrade being theglue between thetwo worlds, doing the heavy job of keeping things in sync.

10

How do ngUpgrade work?

Angular 1 directiveAngular 2 serviceAngular 2 componentAngular 2 serviceAngular 1 serviceAngular 1 serviceAngular 1 directiveAngular 1 directive

11

Cool! ....is it thateasy ?Kinda but there are some limitations:

The Outer node must be an Angular 1 application.

Only the services in Angular 2 Root Injector can be downgraded.

You need to use string tokens to inject Angular 1 services in Angular 2 components: @Inject()

The framework switch only happens inside the children of a Directive or Component DOM node.

12

Angular 1Angular 2ControllersComponentsDirectivesComponentsServicesServices

The upgrade-downgrade mapAngular 1Angular 2Structural DirectivesStructural DirectivesFiltersPipes

CAN UPGRADECANNOT UPGRADE (rewrite)

13

The big ball of mud effect!

There's avery high risk of confusion, with amixture of bothframeworks, different languages and coding styles thatwill hang around forever.

You should head towards a clean migration path that:Minimizes Risks.Allows for'small' changes over time, that can improve even yourcurrent Angular 1 code base.

14

Planning is the key!Youll want a plan that allows you to:

Keep developing and maintaining your application, deliverying value to your customers (which is always your n1 priority).

Gradually introduce mutations in the way you code your product.

In the meanwhile preparing the ground for the real migration.

Keep the code as clean as possible (following an internal styleguide).

15

A 2-phases plan: PreparationThis phase has almost nothing to do with Angular 2; its devoted to changing the way you build your Angular 1 application today:

Bring in some of the tools well extensively use in Angular 2.Say hi to TypeScript.(optional) Use a module loader and change your build pipeline.Upgrade to the latest version of ng1 (double check the libraries).Analyze and refactor the application: find and fix the weak points and anti-patterns.

16

A 2-phases plan: MigrationMigration

Add the new Angular 2 framework to the project.Setup up a mixed environment using ngUpgrade.Write your new code in Angular 2.Migrate Angular 1 code along the way.Replace the old Angular 1 Router and clean-up.

17

Phase 1 - Preparation

18

AssessmentReview your project and do a proper check-up:Angular version. External libraries.

Update to the latest version of Angular (anything from 1.3.x will be good).

Consider replacing unamaintained external libraries, look for libraries that will have Angular 2 support.

19

Look for whats forbiddenYou might have heard that: Angular 2 has no $scope!Everything works in isolation, so no more: ng-controller, ng-include or shared $scope, live with that!

Compile(): is not supported anymore, Angular 2 has its own way to deal with the DOM.

Some features were removed: no more replace, terminal, priority.

Filters are no more, we now have @pipe Be prepared to rewrite them.

20

(optional) Module LoadersConsider switching to a module loader to deliver your application instead of all those tags.

Some options are: SystemJS, WebPack, Browserify, etc

Main Drawbacks:It will require an overhaul of your building pipeline.It will probably require a massive refactoring in you JS files. You can delay this step and wait for Angular 2 migration to introduce a module loader.

21

Welcome TypeScript!

Some of you might think of it as a necessary evil.

But it has some benefits:Once you get accustomed to it, it can really increase your productivity helping you avoid trivial bugs (it also has very good tooling).Allows you to use ES2015 JavaScript Syntax.Will also force some structure in your code base.

22

Write ng1 code in a good way (with TypeScript)

Write your Controllers and Services as classes:It will help you to get rid of the $scope (controllerAs, bindToController).Take advantage of type checking, interfaces, intellisense, refctoring and all the other goodies.It will ease the code migration to Angular 2.

If you upgraded to angular 1.5.x consider using the new component api to define directives, its really very similar to how youll define components in Angular 2.

23

NG1 TS Service as class

The function becomes a class.Dependency injection is specified with a static property.Start using Type declarations.

24

NG1 TS Service as class

this to refererence the members of the class.

25

NG1 TS Service as class

Use the Arrow Syntax to define callback functions:So the this always refers to the instance of the class

26

The function becomes a class.Dependency injection is specified with a static property.Start using Type declarations.NG1 TS Controller as Class

27

NG1 TS Controller as Class

The initialization goes in the constructor

28

NG1 TS Controller as Class

this to refererence the members of the class.

Use the Arrow Syntax to define callback functions:So the this always refers to the instance of the class

29

NG1 TS Controller as Class

The this is really important when it comesto classes. You should know how it work!

30

TypeScript is your friend but

Rewriting your code might not be always straightfoward and it can be a process that require some time.

TypeScript hides some JavaScripts complexities (like the use of prototypes and the this management).

There are some special cases in which you need to know what the compiler does in order to avoid subtile bugs.

31

Fix / Refactor the existing codeFix your directives removing the incompatible features.Warning: NON TRIVIAL ACTIVITIES INVOLVED!!No more shared scope: everything should use an isolated scope (remove all the ng-include / ng-controller and create explicit directives).Use the controllerAs and bindToController syntax for your bindings.Remove all the non supported features: replace, terminal, etc. If you cannot do it, youll be forced to rethink the UI.It can also be a good idea change the project structure to a Folder by Feature approach.Take a look at the Angular 1 Style Guide for other anti-patterns.

32

Phase 2 - Migration

33

Angular 2 SetupYoull need to find a way to add Angular 2 that suits your project:

The Outermost element MUST be an Angular 1 application.

There are several options you can consider:The Angular quickstart guide.A seeding project.Code generators (like angular-cli, yeoman, etc).

All them involve the introduction of a module loader.

All of them will require some changes to your build pipeline process.

34

Angular 2 setup - do it simpleStart by following the quickstart guide.

Use SystemJS as your first module loader.

Keep your build pipeline simple at start (avoid bundling and minification in the early stage of the migration process).

Once the migration process is on its way, you can rework the build process adding the other stages and optionally replace the module loader.

35

Project ConfigurationAdd the ng2 libraries to the package.json.

Modify the Application template to load Angular 2 required libraries.

Add your SystemJS configuration file to load the new application entry point.

36

ngUpgrade finally!This module will handle the cooperation of Angular 1 and Angular 2:

It will take over the application bootstrap process.Will be used to downgrade Angular 2 Components and Services so they can be used in an Angular 1 controlled environment.Will be used to upgrade Angular 1 Directives and Services so they can be used in an Angular 2 controlled environment.Will take care of keeping the change detection mechanics in sync.

37

ngUpgrade Hybrid BootstrapYoull need to switch to the manual bootstrap and delegate the startup code do ngUpgrades UpgradeAdapter:Remove your old Angular 1 bootstrapping code.

In the main Angular 2 NgModule:Import the UpgradeAdapterimport { UpgradeAdapter } from '@angular/upgrade';Create a single instance of the adapterconst adapter = new UpgradeAdapter(forwardRef(() => AppModule));Bootstrap the application through the adapteradapter.bootstrap(document.body, ["app"], { strictDi: true });

38

Downgrade Angular 2 Components and ServicesIn the main NgModule file:

Downgrade a Componentangular.module('app').directive('ng2HeartbeatView', adapter.downgradeNg2Component(HeartbeatView));

Downgrade a Serviceangular.module('app').service('ng2LogService', adapter.downgradeNg2Provider(LogsService));

39

Upgrade ng1 directives and servicesIn the main NgModule file:

Upgrade a Directive (in the NgModule declaration list)@NgModule({ declarations: [ adapter.upgradeNg1Component("sidMonitoringHeartbeats") ]})

Upgrade a Service (not in the NgModule providers list, it will be included in the root injector anyway)adapter.upgradeNg1Provider('logsService');

40

Migrate Service ng1 -> ng2

Angular 1Angular 2

Service registration replaced by @Injectable() decorator.The service class need to be registered in the providers list of the root module.

41

Migrate Service ng1 -> ng2

Angular 1Angular 2Injection is made via constructor parameters and Type tokens.Optionally using the @Inject() attribute.

42

Migrate Service ng1 -> ng2

Angular 1Angular 2

Fight with the API changes.

43

Migrate directive ng1 -> ng2

The directive declaration is replaced by the @Component() decorator.The Component class need to be added to the declarations list of the NgModuleAngular 1Angular 2

44

Migrate directive ng1 -> ng2

Angular 1Angular 2

Injection is made via constructor parameters.Optionally using the @Inject() attribute.

45

Migrate directive ng1 -> ng2

Angular 1Angular 2

Initialization and cleanup code go in the lifecycle hooks.

With angular 1.5.x you have almost the same lifecycle hooks for the component api,migration would have been even easier!

46

Filters: rewrite as Pipes

You cannot Upgrade or Downgrade them: live with the duplicated code.

47

The Last Step: Routing, Bootstrap & Clean-upLets suppose you have migrated all your directives to components

The Router (and the application template) will be the last thing to be replaced!

Now you can get rid of the UpgradeAdapter and switch to the native Angular 2 bootstrap.

Finally you can wave goodbye to all the Angular 1 dependencies and libraries!

48

and here we are, on the path to the Holy Grail!

Alessandro GiorgettiSID s.r.l.member of: DotNetMarche / DevMarche

Facebook: https://www.facebook.com/giorgetti.alessandroTwitter: @a_giorgettiLinkedIn: https://it.linkedin.com/in/giorgettialessandroE-mail: alessandro.giorgetti@live.comBlog: www.primordialcode.com

49