An overview of the Angular 1.x -> 2.x upgrade experience using Angular 2 Beta and ngUpgrade. Talk given by Chris Nicola at the AngularJS Vancouver Meetup

1. Upgrading Angular
Chris Nicola
CTO @ WealthBar

3. • Much better architecture/design
compared with 1.x
• Performance improvements
• Still “Angular-like”, to keep much the same
code organization
Why are we doing this?‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…

4. What about React?
‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…

5. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…
Would I pick Angular Again?

6. ‣ Why A2?
‣ Experience
‣ ngForward
‣ ngUpgrade
‣ The Good
‣ The Bad
‣ Preparation
‣ Patterns
‣ The Future…
• Converted AngularD3 1.x -> 2.x (aka A2D3)
• Tested out ngForward and ngUpgrade
• Upgraded existing 1.x code using
ngUpgrade
• Proof of concept mobile apps with Ionic 2
and NativeScript
Experience So Far…

7. ‣ Why A2?
‣ Experience
‣ ngForward
‣ ngUpgrade
‣ The Good
‣ The Bad
‣ Preparation
‣ Patterns
‣ The Future…
• Write Angular 1.x components with 2.x
syntax
• If you don’t want to include Angular 2.x yet
• Templates and core directives are still 1.x
syntax
• Personally I do not find this approach useful

8. ‣ Why A2?
‣ Experience
‣ ngForward
‣ ngUpgrade
‣ The Good
‣ The Bad
‣ Preparation
‣ Patterns
‣ The Future…
• Upgrade Angular 1.x directives, components and
services to use with Angular 2.x
• Downgrade Angular 2.x directives, components and
services to use with Angular 1.x
• Does not work with Filters/Pipes (easy to
workaround)
• 100% Angular 2.x support
• My recommended approach to upgrading

9. ‣ Why A2?
‣ Experience
‣ ngForward
‣ ngUpgrade
‣ The Good
‣ The Bad
‣ Preparation
‣ Patterns
‣ The Future…
• Glad to be rid of `ctrl.`,`$scope` and even
Controllers
• Reactive Programming with RxJS
• LifeCycle events
• One directional data by default
• ngUpgrade works surprisingly well

10. ‣ Why A2?
‣ Experience
‣ ngForward
‣ ngUpgrade
‣ The Good
‣ The Bad
‣ Preparation
‣ Patterns
‣ The Future…
• Too Big! >100kb minified+gzip
• Beta is still unstable
• Error messages are still hopeless
• So. Much. Static. Typing. aka “React
Enterprise Edition”

11. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Webpack
‣ ES6 or TS
‣ Organize
‣ Refactor
‣ Patterns
‣ The Future…
• You’re going to need a module loader!
• Webpack is arguably best-in-class
• Wide support for assets TS, ES6, HTML,
CSS, images, etc., etc., etc.
• Flexible, extensible, relatively easy to use

12. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Webpack
‣ ES6 or TS
‣ Organize
‣ Refactor
‣ Patterns
‣ The Future…
• Use Babel or Typescript
• Better get used Types and annotations
• aka React Enterprise Edition™
• My recommendation: Typescript

13. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Webpack
‣ ES6 or TS
‣ Organize
‣ Refactor
‣ Patterns
‣ The Future…
• Angular Style Guide https://github.com/johnpapa/angular-
styleguide
• Organize by component/features
• /component/component-name
• index.(ts|js) is the component root
• Include templates, styles and component specific services
• Organize shared code under “core” or “lib”
• Core services (e.g. Data/API)
• Attribute Directives
• Filters/Pipes

14. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Webpack
‣ ES6 or TS
‣ Organize
‣ Refactor
‣ Patterns
‣ The Future…
- app
- index.ts
- services
- index.ts
- resources.ts
- geolocation.ts
- filters/pipes
- date.ts
- directives
- highlight.ts
- float_label.ts
- components
- calendar
- index.ts
- calendar.html
- calendar.scss
- calendar_service.ts
- calculator
- index.ts
- template.html
- styles.css
- calculation_engine.ts

15. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Webpack
‣ ES6 or TS
‣ Organize
‣ Refactor
‣ Patterns
‣ The Future…
• “Pre-Upgrade” components
• Prefer `module.component`
• Prefer element selectors
• Extract controller as an exported class and avoid linking functions
• Use getter/setters over `$scope.$watch`
• Identify “attribute directives”
• Template-less directives that often interact directly with the DOM
• Prefer attribute selectors
• “Pre-Upgrade” services
• Extract service code into an exported class
• Pass it to `module.service`
• Rewrite filters as Angular 2.x Pipes
• Use an Angular 2.x Pipe compatible interface and a Pipe class to inherit from it
• Use an instance (singleton) of the Pipe in a `module.filter` shim

16. Upgrade Angular 1.x Component‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ Adapter
‣ Components
‣ Providers
‣ Directives
‣ Pipes/Filters
‣ The Future…

17. Downgraded Angular 2.x Component
https://gist.github.com/chrisnicola/
ec0f45b2819f352c8100#file-
downgradedangular2component-ts
‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ Upgrade
‣ Components
‣ Providers
‣ Directives
‣ Pipes/Filters
‣ The Future…

18. Downgraded Angular 2.x Service
https://gist.github.com/chrisnicola/
ec0f45b2819f352c8100#file-
downgradedangular2provider-ts
‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ Adapter
‣ Components
‣ Providers
‣ Directives
‣ Pipes/Filters
‣ The Future…

19. Angular 2.x Attribute Directive
https://github.com/WealthBar/angular-d3/blob/
angular-2/src/angularD3/directives/bars.ts
‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ Adapter
‣ Components
‣ Providers
‣ Directives
‣ Pipes/Filters
‣ The Future…
https://github.com/WealthBar/angular-d3/blob/
angular-2/src/app/app.html

20. Pipe/Filter Shim
https://gist.github.com/chrisnicola/
ec0f45b2819f352c8100#file-pipefiltershim-ts
‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ Adapter
‣ Components
‣ Providers
‣ Directives
‣ Pipes/Filters
‣ Why A2?
‣ The Future…

21. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…
• Prefer converting 1.x services to 2.x
services and downgrade them (over
upgrading 1.x services)
• Refactor by component or route/page tree
• Adapters will temporarily support shared,
legacy or core dependencies
• Once you hit 80% 2.x code, freeze features
for a final push to remove remaining code.
More Tips

22. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…
‣ Impending
‣ “Soon”
‣ Maybe

23. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…
‣ Impending
‣ “Soon”
‣ Maybe

24. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…
‣ Impending
‣ “Soon”
‣ Maybe
• Much smaller size
• Improved error messages
• Animations
• i18n and l11n
• Ionic 2 and NativeScript

25. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…
‣ Impending
‣ “Soon”
‣ Maybe
• Isometric Support
• Hot code reloading
• Much more debugging tooling

26. ‣ Why A2?
‣ Experience
‣ Preparation
‣ Patterns
‣ The Future…
‣ Impending
‣ “Soon”
‣ Maybe
• Isometric support for other framework
(Rails, Django, .NET)
• AngularJS Native
• Virtual DOM plugin (doubtful)

27. ‣
• Official Docs https://angular.io/docs/ts/
latest/guide/upgrade.html
• Unofficial Guide http://
blog.thoughtram.io/angular/2015/10/24/
upgrading-apps-to-angular-2-using-
ngupgrade.html
Other Resources

28. Questions?
Thoughts?
Chris Nicola
CTO @ WealthBar