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.
Building Block | Time | Disruption |
---|---|---|
File Structure | Low | Low |
Dependencies | Low to moderate | Low to moderate |
App Architecture | Moderate to high | Low |
Build Process | Moderate | High |
Phase 2: ngUpgrade
- Install and bootstrap Angular & ngUpgrade.
- 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.
- Repeat until everything is rewritten.
- Change to Angular router.
- Remove all AngularJS code and dependencies.
The Pragmatic Upgrade
Our Demo App
Downgrading Services
- Rewrite as Angular class
- Downgrade
- Remove from AngularJS module file
- Add to Angular module
Providing Angular services to AngularJS
Downgrading Services
- Don't feel obligated to use observables right away - you can use promises until you determine all dependencies.
- Convert each call to an observable once you're able to refactor any dependent components.
Providing Angular services to AngularJS
Tips:
Demo
Downgrading Components
- Rewrite as Angular class
- Downgrade
- Remove from AngularJS module file
- Add to Angular module (both entry and declarations)
- 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
- Create Angular directive.
- Import into Angular module.
- Use in component, adjust template syntax.
Using AngularJS components within Angular components
Demo
Upgrading Services
- Create factory and provider.
- Import into Angular module.
- 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
Thanks!
Sam Julien | @samjulien | samjulien.com
My ngUpgrade Course
Coming soon!
Pragmatic ngUpgrade
By Sam Julien
Pragmatic ngUpgrade
A talk about using ngUpgrade alongside AngularJS in a non-disruptive way.
- 763