July 2, 2018
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:
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:
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.
Move away from AngularJS
Work with JavaScript masterminds who will help you choose the right framework and deliver the best experience for your users.
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):
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.
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.
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.
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.
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!