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 full-size slide

  2. Upgrade Decision Tree

    View full-size slide

  3. Your Code
    Your Team
    Upgrade Decision Tree

    View full-size slide

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

    View full-size slide

  5. UpgradingAngularJS.com

    View full-size slide

  6. GettingStartedInDevRel.com

    View full-size slide

  7. Upgrade Decision Tree

    View full-size slide

  8. Your Code
    Your Team
    Upgrade Decision Tree

    View full-size slide

  9. Two Assumptions

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  12. Stable Insurance
    Noble Non-Profit

    View full-size slide

  13. The Four Paths

    View full-size slide

  14. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  15. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  16. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  17. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  18. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

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

    View full-size slide

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

    View full-size slide

  21. Expertise
    Years of Experience

    View full-size slide

  22. Expertise
    Years of Experience

    View full-size slide

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

    View full-size slide

  24. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  25. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  26. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  27. Architecture

    View full-size slide

  28. How modern is your AngularJS app?

    View full-size slide

  29. 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 full-size slide

  30. 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 full-size slide

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

    View full-size slide

  32. Webpack or CLI?
    ES5/ES2015/TypeScript

    View full-size slide

  33. Webpack or CLI?
    ES5/ES2015/TypeScript

    View full-size slide

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

    View full-size slide

  35. Protractor vs Cypress
    Unit Testing

    View full-size slide

  36. Protractor vs Cypress
    Unit Testing

    View full-size slide

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

    View full-size slide

  38. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  39. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  40. Rewrite
    ngUpgrade
    Elements
    Hybrid Routing

    View full-size slide

  41. Your Code
    Your Team
    Upgrade Decision Tree

    View full-size slide

  42. Your Team
    Capacity
    Experience
    Size

    View full-size slide

  43. Your Code
    Your Team
    Upgrade Decision Tree

    View full-size slide

  44. Build
    Testing
    Architecture
    Your Code

    View full-size slide

  45. Your Code
    Your Team
    Upgrade Decision Tree

    View full-size slide

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

    View full-size slide