Long Term Support for AngularJS: What Are Viable Alternatives?

Having an AngularJS app in 2018 probably means one of two things: either the app has been abandoned and isn’t really used or you’ve been thinking about migrating to another framework, but the time and costs that would entail have been prohibitive enough to have prevented you from drafting a roadmap for moving forward.

If you’re here, you’re probably struggling with the latter, particularly given that AngularJS has just entered Long Term Support, which means that the Google team no longer will be merging any new features or fixes that would require even a minor breaking change.

According to Pete Bacon Darwin, AngularJS Lead Developer: 

"We will release a couple more versions this summer that includes a few important features and fixes before we move into the mode of only making security and dependency related fixes, but that is all."

Pete Bacon Darwin AngularJS Lead Developer
at Google 

For three years from that time, they will focus exclusively on bugs that meet at least one of the following criteria, as outlined in the official announcement from January 2018:

• A security flaw is detected in the 1.7.x branch of the framework
• One of the major browsers releases a version that will cause current production applications using AngularJS 1.7.x to stop working
• The jQuery library releases a version that will cause current production applications using AngularJS 1.7.x to stop working.

The Time to Act is Now

For any working app, moving away from AngularJS to any other modern framework makes a lot of sense. That doesn’t necessarily mean you should do a big-bang migration or a rewrite. In most cases it’s not possible anyway, either technology- or business-wise.

Switching from AngularJS makes sense not just because Google will no longer develop the framework, but for a host of other reasons, too:

1. Performance. Modern frameworks address some of the major performance bottlenecks present in AngularJS. For example—in Angular, change detection is much faster, and its behavior can be optimized depending on the use case. New frameworks also focus on reducing the final size of the app, resulting in shorter startup time and less data usage.
2. Documentation. Once you transition to Angular or Vue, you will realize how difficult the AngularJS documentation is to cope with. And, obviously, the issue gets more painful once your app gets bigger.
3. Complexity. As the complexity of your components grows, code readability, maintainability, as well as performance all tend to become real nightmares.
4. Mobile. Modern frameworks let you build native apps. For example, you can go with either NativeScript for Vue and Angular or React Native for React.
5. Angular-way. AngularJS (as well as Angular 2) is highly opinionated. Although for many this a good thing, moving to Vue or React will, in turn, let you freely add libraries you need for the project so you don’t need to learn all the framework-specific concepts like controllers, templates, dependency injection, and more.

I understand, though, that for many businesses moving from AngularJS is much more complex due to app size and many other considerations. At some point, however, you will have to transition away from AngularJS and there’s no doubt about that. Don’t delay this.

Alternatives for AngularJS

Now this is the fun part—once you make the decision to upgrade/rewrite, it’s time to choose the right framework. There are multiple reasons for and opinions behind the popularity of different JS frameworks, but in most cases the choice boils down to one of the big three: React, Angular, and Vue.js. I asked my colleague and JavaScript mastermind, Szymon Korzeniowski, to share some of his insights regarding each of the three.

There are just too many ultimate comparisons of the three frameworks available online, so we’ll just skip those and and proceed directly to the part where we help you understand when moving away from AngularJS to any of them makes sense and what exactly that entails.

Upgrading/migrating can be accomplished in one of two ways (those methods apply to Angular, Vue, and React):

• Vertical slicing—here, you upgrade your app module by module. Different versions of Angular will coexist in different parts of your product, be it a feature or a screen. I recommend this approach for large applications, as it is much easier to test, maintain, and debug the code. Vertical slicing may result in duplicated code if, for example, two features use the same component.
• Horizontal slicing—in this approach, we start by rewriting reusable components and then we move to components using those. It’s a much better approach for small apps with small teams involved in their development. Here, both versions of Angular will be present in a single module which will make it much more difficult to manage.

To avoid incurring additional technical debt with the upgrade, you should not have a single AngularJS line of code left in your app. Freezing development for a few months to finish the rewrite makes little sense, so going for a hybrid state seems the best idea in most cases. However, you should later abandon the hybrid state as fast as possible.

Upgrading to Angular

Angular tries to maintain some similarity to AngularJS, primarily in terms of its templating language and built-in directives, which in turn can make it easier for your team to wrap their heads around the new framework. In addition, several concepts introduced from version 1.5 onwards—such as components (component directives) and controller lifecycle hooks—have nearly identical counterparts in Angular 2 and up. Even if this isn’t exactly your case, you can introduce these concepts as something of a stepping stone for further migration.

You can go with either AngularCLI or a custom Webpack config, whichever is your preference. For a smooth upgrade, you should check the official Angular step-by-step guide.

Angular comes with Typescript which prevents loose typing of variables and facilitates error detection early on in the development process. While migrating, you are likely to discover that some of your previous solutions are rather suboptimal and some bugs you didn’t even know existed.

I highly recommend you check out a talk from Victor Savkin about upgrading enterprise apps to Angular and an article by Etienne Talbot which offers a lot great advice on the upgrade process.

When you should choose Angular: If your AngularJS app is already written in a way that employs concepts like components (component directives) and controller lifecycle hooks, and your team wants to stick to the opinionated way of development.

Rewriting to Vue.js

Vue.js, often called a progressive framework, offers a clear, incremental way of transitioning that won’t disrupt your development roadmap for another few months. You can continue to work on new features while working on the migration.

Just like React, it’s component-based and offers a lot of support for a variety of build systems. Additionally, Vue resembles AngularJS in terms of the templating engine—it actually resembles it more than Angular and up—which is perfect if you have a lot of AngularJS templates. That means that in many places in your code the only thing you’ll be required to do is to change `ng-` to `v-`. At the same time, Vue introduces a number of good practices, such as one-way data flow through props, and does so in a way that is definitely easy to learn.

Vue.js has also an ah-mazing documentation with guides, examples, questions, and APIs covering probably all doubts one can have during the development process.

If you go with Vue, you will definitely note enhanced UI performance, increased code quality and programming productivity.

Check out great case studies from the Unbabel team and Holistics.io for multiple great tips you can implement in your process.

When you should choose Vue.js:

Similarly to Angular, if your team is familiar with AngularJS’s templating language, it might be easier for them to start using Vue out of the box. CSS migration might also be easier with Vue than with other frameworks, such as React and its CSS-in-JS approach.

Rewriting to React

React will provide you with all key features of modern Web regarding speed, code splitting, and testing. It solves AngularJS’s performance and complexity issues with features like virtual DOM, JSX, one-way data flow, and a well-defined component lifecycle.

Some of React’s features (eg. the use of JSX instead of HTML-based templates) are applauded by many developers out there, as everything is achieved with native JavaScript methods instead of a domain-specific template language. However, for those accustomed to AngularJS templates, this might be a bigger challenge than the more familiar templating syntax of Angular or Vue.

Despite having been recently surpassed by Vue with regard to the number of GitHub stars, React still remains the most popular framework in terms of breadth of usage. The React community is large, as is the choice of libraries. This can be a blessing and a curse, as it’s sometimes difficult to settle on a particular library, though it also allows for greater flexibility.

When you should choose React:

React enables rendering to targets other than the browser—such as native mobile UI with React Native, VR with ReactVR, or even Sketch with react-sketchapp—so if you are considering any of those, it might be useful in terms of code reuse.

Final Words

There is no one best technology that you should go with and we don’t really have a fave among the three either (however, if you heard about us, you probably know we love Vue.js!). Hope our recommendations here helped you make up your mind. Don’t hesitate to leave your comment or contact us if you need any further advice on the subject.

And welcome to the post-AngularJS reality!