Finding the Right Path from AngularJS to Angular

Finding the Right Path from AngularJS to Angular

There’s still a ton of AngularJS code out there, but long term support for AngularJS is ending soon. It can be really overwhelming to know how to approach the monumental task of migrating to Angular — and if you even should! How do you figure out where to start, which path to take, and whether it’s even worth it for your company to spend the time and money? Should you use ngUpgrade, Angular Elements, hybrid routing — or just rage-flip your desk in frustration and rewrite everything in Perl? Should you rewrite your architecture first or your build process? And how do you show the business side of things that spending hundreds of hours on technical debt is actually worth it — even if you’re not adding any functionality?

In this talk, you will learn the why and the how of each building block of the upgrade process and how to avoid the “upgrade pit of despair.” This is the meta-level talk I wish I had seen a few of years ago: a toolbox I could use to identify the gaps in our app’s architecture and tooling, but also how to balance upgrading against our budget and time constraints. You’ll walk away with the tools you need to build a solid, actionable game plan for migrating away from AngularJS and into the new world of Angular.

7beed3a6fa39e12c9e873b903e4d9244?s=128

Sam Julien

November 19, 2020
Tweet

Transcript

  1. Finding the Right Path from AngularJS to Angular

  2. None
  3. None
  4. Upgrade Decision Tree

  5. Your Code Your Team Upgrade Decision Tree

  6. Sam Julien @samjulien samjulien.com Dev Advocate at Auth0

  7. UpgradingAngularJS.com

  8. GettingStartedInDevRel.com

  9. Upgrade Decision Tree

  10. Your Code Your Team Upgrade Decision Tree

  11. Two Assumptions

  12. 2. You're using Angular. 1. You need to migrate.

  13. 2. You're using Angular. 1. You need to migrate.

  14. Stable Insurance Noble Non-Profit

  15. The Four Paths

  16. Rewrite ngUpgrade Elements Hybrid Routing

  17. Rewrite ngUpgrade Elements Hybrid Routing

  18. Rewrite ngUpgrade Elements Hybrid Routing

  19. Rewrite ngUpgrade Elements Hybrid Routing

  20. Rewrite ngUpgrade Elements Hybrid Routing

  21. Your Team

  22. Size

  23. Noble Stable 4 devs 2 medium apps Coordination No consulting

    70 devs 8 big apps Autonomy Consulting
  24. Capacity

  25. Noble Stable Lots of control 30% to TD Burnout Zero

    control 10% to TD Shared Work
  26. Experience

  27. Expertise Years of Experience

  28. Expertise Years of Experience

  29. Noble Stable - 2 seniors, 1 mid, 1 junior -

    1 Angular, 1 AngularJS, 2 C# - Wide range of experience - Mostly AngularJS devs
  30. Rewrite ngUpgrade Elements Hybrid Routing

  31. Rewrite ngUpgrade Elements Hybrid Routing

  32. Rewrite ngUpgrade Elements Hybrid Routing

  33. Your Code

  34. Architecture

  35. How modern is your AngularJS app?

  36. angular.module("app").controller("customerDetailController", [ "$scope", "customer", "addressFactory", "orderService", function ($scope, customer, addressFactory,

    orderService) { $scope.title = "Customer Detail"; $scope.discountTemplate = "../templates/discount.html"; $scope.customer = customer; $scope.address = addressFactory.getFullAddress(customer); activate(); function activate() { $scope.orders = orderService.getOrdersByCustomer($scope.customer.id); $scope.orders.forEach(function (order) { order.orderDate = moment(order.orderDate).format("MM/DD/YYYY"); }); } }, ]);
  37. angular.module("app").controller("customerDetailController", [ "$scope", "customer", "addressFactory", "orderService", function ($scope, customer, addressFactory,

    orderService) { $scope.title = "Customer Detail"; $scope.discountTemplate = "../templates/discount.html"; $scope.customer = customer; $scope.address = addressFactory.getFullAddress(customer); activate(); function activate() { $scope.orders = orderService.getOrdersByCustomer($scope.customer.id); $scope.orders.forEach(function (order) { order.orderDate = moment(order.orderDate).format("MM/DD/YYYY"); }); } }, ]);
  38. Noble Stable Aligned with the style guide Components AngularJS 1.6

    Lots of old practices 1.2-1.4 Shared libs
  39. Build

  40. Webpack or CLI? ES5/ES2015/TypeScript

  41. Webpack or CLI? ES5/ES2015/TypeScript

  42. Noble Stable Gulp ES2015 & Babel Standard Script tags and

    Grunt ES5 Very complex
  43. Testing

  44. Protractor vs Cypress Unit Testing

  45. Protractor vs Cypress Unit Testing

  46. Noble Stable Unit tests, but not critical A few Protractor

    UAT potential Many critical unit tests Many critical Protractor Some UAT
  47. Rewrite ngUpgrade Elements Hybrid Routing

  48. Rewrite ngUpgrade Elements Hybrid Routing

  49. Rewrite ngUpgrade Elements Hybrid Routing

  50. Your Code Your Team Upgrade Decision Tree

  51. Your Team Capacity Experience Size

  52. Your Code Your Team Upgrade Decision Tree

  53. Build Testing Architecture Your Code

  54. Your Code Your Team Upgrade Decision Tree

  55. Thank you!

  56. Sam Julien | @samjulien samj.im/path-to-angular Thank you!