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.

Transcript

1. Finding the Right Path from AngularJS to Angular
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!