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. Noble Stable 4 devs 2 medium apps Coordination No consulting

    70 devs 8 big apps Autonomy Consulting
  2. Noble Stable - 2 seniors, 1 mid, 1 junior -

    1 Angular, 1 AngularJS, 2 C# - Wide range of experience - Mostly AngularJS devs
  3. 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"); }); } }, ]);
  4. 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"); }); } }, ]);
  5. Noble Stable Aligned with the style guide Components AngularJS 1.6

    Lots of old practices 1.2-1.4 Shared libs
  6. Noble Stable Unit tests, but not critical A few Protractor

    UAT potential Many critical unit tests Many critical Protractor Some UAT