Angular2 Upgrade
- 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