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
   

   View Slide

2. View Slide

3. View Slide

4. Upgrade Decision Tree
   

   View Slide

5. Your Code
   Your Team
   Upgrade Decision Tree
   

   View Slide

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

   View Slide

7. UpgradingAngularJS.com
   

   View Slide

8. GettingStartedInDevRel.com
   

   View Slide

9. Upgrade Decision Tree
   

   View Slide

10. Your Code
    Your Team
    Upgrade Decision Tree
    

    View Slide

11. Two Assumptions
    

    View Slide

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

    View Slide

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

    View Slide

14. Stable Insurance
    Noble Non-Profit
    

    View Slide

15. The Four Paths
    

    View Slide

16. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

17. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

18. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

19. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

20. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

21. Your Team
    

    View Slide

22. Size
    

    View Slide

23. Noble Stable
    4 devs
    2 medium apps
    Coordination
    No consulting
    70 devs
    8 big apps
    Autonomy
    Consulting
    

    View Slide

24. Capacity
    

    View Slide

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

    View Slide

26. Experience
    

    View Slide

27. Expertise
    Years of Experience
    

    View Slide

28. Expertise
    Years of Experience
    

    View Slide

29. Noble Stable
    - 2 seniors, 1 mid, 1
    junior
    - 1 Angular, 1 AngularJS,
    2 C#
    - Wide range of
    experience
    - Mostly AngularJS devs
    

    View Slide

30. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

31. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

32. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

33. Your Code
    

    View Slide

34. Architecture
    

    View Slide

35. How modern is your AngularJS app?
    

    View Slide

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");
    });
    }
    },
    ]);
    

    View Slide

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");
    });
    }
    },
    ]);
    

    View Slide

38. Noble Stable
    Aligned with the style guide
    Components
    AngularJS 1.6
    Lots of old practices
    1.2-1.4
    Shared libs
    

    View Slide

39. Build
    

    View Slide

40. Webpack or CLI?
    ES5/ES2015/TypeScript
    

    View Slide

41. Webpack or CLI?
    ES5/ES2015/TypeScript
    

    View Slide

42. Noble Stable
    Gulp
    ES2015 & Babel
    Standard
    Script tags and Grunt
    ES5
    Very complex
    

    View Slide

43. Testing
    

    View Slide

44. Protractor vs Cypress
    Unit Testing
    

    View Slide

45. Protractor vs Cypress
    Unit Testing
    

    View Slide

46. Noble Stable
    Unit tests, but not critical
    A few Protractor
    UAT potential
    Many critical unit tests
    Many critical Protractor
    Some UAT
    

    View Slide

47. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

48. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

49. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing
    

    View Slide

50. Your Code
    Your Team
    Upgrade Decision Tree
    

    View Slide

51. Your Team
    Capacity
    Experience
    Size
    

    View Slide

52. Your Code
    Your Team
    Upgrade Decision Tree
    

    View Slide

53. Build
    Testing
    Architecture
    Your Code
    

    View Slide

54. Your Code
    Your Team
    Upgrade Decision Tree
    

    View Slide

55. Thank you!
    

    View Slide

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

    View Slide