Pragmatic ngUpgrade

Sam Julien | PDX | samjulien.com | @samjulien

ngHouston

September 26, 2017

What we'll cover:

• The Pragmatic Upgrade Strategy
• Downgrading Services
• Downgrading Components
• Upgrading Components
• Upgrading/Providing Services

MFW Large-Scale Refactoring

Pragmatic?

Upgrading often must be:

• Iterative
• Continuously deployable
• Continuously deliverable

Phase 1: The Four Building Blocks

• Your File Structure
• Your Dependencies
• Your App Architecture
• Your Build Process

The Pragmatic Upgrade

Your starting point matters.

Phase 2: ngUpgrade

1. Install and bootstrap Angular & ngUpgrade.
2. Work one route at a time.
   • Work from the bottom up.
   • Rewrite and downgrade services.
   • Rewrite and downgrade components.
   • Upgrade components as necessary.
   • Upgrade services as necessary.
3. Repeat until everything is rewritten.
4. Change to Angular router.
5. Remove all AngularJS code and dependencies.

The Pragmatic Upgrade

Our Demo App

Downgrading Services

1. Rewrite as Angular class
2. Downgrade
3. Remove from AngularJS module file
4. Add to Angular module

Providing Angular services to AngularJS

Downgrading Services

1. Don't feel obligated to use observables right away - you can use promises until you determine all dependencies.
2. Convert each call to an observable once you're able to refactor any dependent components.

Providing Angular services to AngularJS

Tips:

Demo

Downgrading Components

1. Rewrite as Angular class
2. Downgrade
3. Remove from AngularJS module file
4. Add to Angular module (both entry and declarations)
5. Update templates to Angular syntax

Using Angular components within AngularJS

Downgrading Components

• Rewrite filters like orderBy on the components.
• Work up the chain.

Using Angular components within AngularJS

Tips:

Demo

Upgrading Components

1. Create Angular directive.
2. Import into Angular module.
3. Use in component, adjust template syntax.

Using AngularJS components within Angular components

Demo

Upgrading Services

1. Create factory and provider.
2. Import into Angular module.
3. Use in component.

Providing AngularJS services to Angular

Upgrading Services

• Temporary stop-gap 
• Use InjectionToken for third party services

Providing AngularJS services to Angular

Tips:

Demo

ngSummarize:

• Pick a route.
• Work from the bottom up.
• Rewrite and downgrade services.
• Rewrite and downgrade components.
• Upgrade components as necessary.
• Upgrade services as necessary.
• Repeat until everything is rewritten.
• Change to Angular router.
• Remove all AngularJS code and dependencies.

Resources

• Official Upgrade Docs
• ng-conf 2017 talks:
  • When You Can't Use the Word "Big Bang"
  • Addicted to AngularJS? (Succinct Overview)
• Thoughtram on InjectionToken
• SurviveJS: Webpack
• Webpack Academy

Super Secret Alpha

kip@upgradingangularjs.com

My ngUpgrade Course

Coming soon!