Two Approaches to Upgrading Angular Apps
Victor Savkin is a co-founder of nrwl.io, providing Angular consulting to enterprise teams. He was previously on the Angular core team at Google, and built the dependency injection, change detection, forms, and router modules.
Many organizations have large AngularJS 1.x applications deployed to production. These applications may be built by multiple teams from different lines of business. They may use different routers and state management strategies. Rewriting such applications all at once, or big bang migrations, is not just impractical, it is often impossible, and mainly for business reasons. We need to do gradually, and this is what this series of articles is about.
In this article we will look at two main ways to approach upgrade: Vertical Slicing and Horizontal Slicing.
Read the Series
This is the third post in the Upgrading Angular Applications series.
Vertical Slicing
Once we have wrapped our AngularJS app into a shell (see here), we can start upgrading the rest of the application. “Vertical Slicing” is one approach we can use.
Even though, it is not feasible to rewrite the whole application at once, it is often possible to do it route by route, screen by screen, or feature by feature. In which case the whole route is either written in AngularJS or in Angular.
In other words, everything we see on the screen is either written in AngularJS or in Angular.
We can visualize this strategy as follows:
As you can see, while upgrading the second route, we had to duplicate one of the components. For a while we had two copies of that component: one written in AngularJS and the other in Angular. Such duplication is one of this approach’s downside.
Horizontal Slicing
Horizontal slicing is the opposite strategy.
We start with upgrading reusable components like inputs and date pickers. Then we upgrade the components using those. And we keep doing it until we work our way up to the root.
One major implication of this approach is that is that no matter what screen we open, we will have two frameworks acting at the same time.
Comparing Horizontal and Vertical Slicing
The major upside of the Vertical Slicing strategy is that we deal with one framework at a time. This means that our application is easier to debug and easier to understand.
Second, when using Vertical Slicing our upgrade process is encapsulated to a single route. This can be extremely important in large organizations with multiple teams working on the same project. Being able to do your work independently means that we won’t have to coordinate our work with other teams.
Finally, Vertical Slicing allows us to load NgUpgrade and AngularJS lazily, only when we need to render legacy routes. This makes our applications smaller and faster.
On the other hand, the Horizontal Slicing approach has one major advantage: it is finer grained. We can upgrade a component and ship it to production in a day, whereas upgrading a route may take months.
Upgrading Angular Applications Book
This article is based on the Upgrading Angular Applications book, which you can find here https://leanpub.com/ngupgrade. If you enjoy the article, check out the book!
Victor Savkin is a co-founder of Nrwl — Enterprise Angular Consulting.
If you liked this, click the💚 below so other people will see this here on Medium. Follow @victorsavkin to read more about Angular.
