Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Finding the Right Path from AngularJS to Angular

Sam Julien
November 19, 2020

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.

Sam Julien

November 19, 2020
Tweet

More Decks by Sam Julien

Other Decks in Programming

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