7 Reasons To Migrate Your AngularJS App To VueJS

Image result for vue

We’ve all been there, sitting and writing a great web app with the latest technology only to find ourselves later on, years if we’re lucky, facing an end of support, deprecation warnings, or just a lack of ability to do things in the now “modern” way.

This is why the web is so exciting and also why it can be so hectic sometimes, as can be seen in many articles here on Medium.

Sometimes the best motivation is not a reason why to do something but a reason why not to continue doing something. So here are 7 reasons to motivate you to switch your application off of AngularJS and onto VueJS!

1 — AngularJS is going out of support, and the clock is ticking

As of the time I’m writing this article, AngularJS has just under 60 days until active development ends and the support period of 3 years begins.

Image for post
Image for post

It was announced early in 2018 that AngularJS was going into support status later in the year. This did not come as a surprise to most people, but what surprised many was that it took so long to get to this point.

AngularJS has been around for a long time in terms of the web, and it did it’s job amazingly well, and still does to an extent. In many ways it is the Windows XP of web frameworks, with companies not wanting to give it up because it is reliable and gets the job done — it just works.

However, while three years may seem like a long time, for many companies that have a large enterprise application (or multiple) there are huge amounts of regression and functionality to move over. The sooner that process begins, the more reasonable of a pace can be maintained while upgrading to VueJS.

Plus, nobody wants to rush at the last minute… right?

2 — It is becoming increasingly hard to use AngularJS with tools like Webpack

Image for post
Image for post

Unless you started a new AngularJS project recently, there is a good chance you did not write your app entirely in proper ES6 modules. There is also a chance you are including script files, or using older build systems like gulp, maybe legacy package systems like bower, and concatenating scripts together.

I’m here to tell you a little secret, you’re missing out! Webpack’s tree shaking, lazy loading, hot reloading and Webpack dev server are great tools. They made tedious tasks and optimization an absolute breeze. And things like getting UglifyJS to work with AngularJS code can be tedious and hair pulling. Especially if you are using injections implicitly, but VueJS supports all these optimizations “out of the box”.

Change a file but don’t want to reload application state? HMR (Hot Module Replacement) is great for that!

Transferring a build system to Webpack for code written in an older AngularJS style is not a walk in the park. Especially if you have “global” code in the form of vendor scripts or something of this sort.

I plan to visit this subject in another article, as recently I was tasked with this (and surprisingly got it to work!).

3 — VueJS follows modern standards and design patterns currently being used

Image for post
Image for post

One of the big changes that has happened to the web application architecture in recent years has been the introduction of “Flux” design or state based architecture.

This is a large mindset shift for a lot of people, and has a bit of a learning curve, but has a large payoff in terms of synchronization of components and application state.

Chances are you’ve heard of Redux which is used in React, which is a great framework for managing state (I also recommend Redux-Saga) and can be used with AngularJS, but it is a bit of a hack.

Vue has Vuex which, to my knowledge, is only really used with VueJS. It follows the same design principals and logic as Redux but with some minor changes. One of the big announcements in the Vue “world” this year was improvements to Vuex and the observations of the state and mutations.

4— VueJS has good performance and supports async/await

AngularJS not written with care can have huge performance problems. A common one seen is the number of “watchers” that are on a page or component. These are the things watching properties and cause multiple loops of the digest cycle (when AngularJS re-renders the page).

Many times, if you are not careful you can end up with hundred and thousands of watchers. This can cause slowness when editing forms or changing data that is referenced in multiple places. Not to mention the impact on mobile devices!

VueJS takes a different approach and uses its own “watcher” but records changes based on the properties. This is very important to know when building VueJS apps as it is a common stumbling block for new to VueJS developers. However, this allows for a fast update cycle and less overhead.

Image for post
Image for post

Another key feature introduced in JavaScript is async/await. This is a very powerful and concise way to write code that previously required nasty callback chains or then blocks. AngularJS can use this but it requires an intimate knowledge of the $scope.$apply() to get this right without having issues. VueJS however, supports this out of the box, on everything from life-cycle hooks to Vuex actions.

5 — VueJS has easy to use debugging tools

It has been said that debugging is twice as hard as programming, so obviously tooling in this area can be critical.

Image for post
Image for post

AngularJS does have some decent tools like Batarang and others that assist in checking what is going on in the scope and viewing inheritance chains, but what if you need to change something in the scope? What if you need to change a property and observe its cascading effects through the DOM?

VueJS’s debugging tools have just what you need to solve these problems. It has the ability to “time travel”, which is extremely useful when debugging complex Vuex mutation chains. The interface is clean and simple and really helps you focus on what is important without sacrificing on advanced features.

Image for post
Image for post

As you can see in this example above, the user is recording the Vuex actions and inspecting the current state. You can clearly observe what the state is doing after any mutation.

Image for post
Image for post

Want to see how it affects the component tree? Just click on the component tab and it will show you a hierarchy of components.

The power and ease of use of these tools cannot be overstated. If you take nothing else from this article, please just try these tools. Honestly, every framework needs something like this nowadays.

6 — The community is growing and has an ecosystem for years to come

Image for post
Image for post

One of the things that made Perl so popular back in the early days of the web was CPAN, and this “community effect” is the exact same thing that made NodeJS so popular with NPM. But what about the community not just around a technology, but a framework itself?

The most common complaint I see with VueJS is usually a variant of the following; “VueJS was late to the party”, “VueJS is too small and niche”, “I’d rather use something with a bigger community like React or Angular”.

These are all false, in fact VueJS has a huge community, and it is growing every day. As of writing this article VueJS has 93.3k stars on GitHub, React has 95.1k, and Angular has just about 36k.

What does this mean? It means at least 93.3k people (note: almost 3x as much as Angular) who have GitHub accounts have marked VueJS as something important to them, and being an open source project, this is extremely important. It means that many people have a stake in this project and will keep it going for years to come.

Not only do many developers support the project directly or indirectly on GitHub but there is also a growing community of add-ons, plugins, components, styles/themes, and much more from the community. There’s a great compiled list here.

7 — Developers want to work with the newest technology, so recruiting will be easier

This applies equally to all of the new frameworks such as React or Angular (not to be confused with AngularJS) and even more “niche” ones like Aurelia, etc.

Image for post
Image for post

If there’s one thing developers like, its new technologies. Visa versa, if there’s one thing they really don’t like it is working with old technologies. Many of us self taught ourselves because of the joy of learning something new, and this keeps people engaged and happy.

Obviously it can be tempting to be caught on the bleeding edge, always trying the latest pre-beta releases of everything. Most companies do not want to be here, they want to be using safe and proven technology. To many managers, using something new is a risk, rightly or wrongly so.

However, there is the other side of the equation, that being recruitment and keeping developers (literally keeping them at the company) and also keeping them engaged. VueJS is safe and proven, they also don’t change versions too fast (looking at you Angular team), and have a clear road map and life cycle.

Let’s face it, recruiting is very hard. In most areas a good developer can easily go and get a few job offers in a matter of days or weeks, and this is very strenuous on companies, especially small to midsize companies that can’t compete on salary as much as the tech giants.

This can be mitigated by giving something many developers want more than money, the ability to work with something fun, rewarding and new.

That my friends, is VueJS.

But! Hey! But why didn’t I choose React or Angular?

Obviously we are all opinionated to one framework, technology or something of the sort. While I openly admit that I am biased towards VueJS, let me try and explain the reason I lean this way.

Image for post
Image for post

I have worked in many different fields of software development from programming FPGAs using VHDL and Verilog to writing iOS apps in Swift. In all the different areas and technologies I’ve used, VueJS has stuck out to me as having the easiest learning curve without being overly simple and sacrificing advanced features, but most importantly the ability to write clean code and be able to debug it.

I tried React and React Native and the biggest problem for me was the use of JSX. One of the biggest issues in software architecture is separation of concerns. By React using JSX all the logic, display and structure is mixed and it brings back memories of JavaScript woven into HTML with inline styles. Not to say VueJS is perfect in this regard but I strongly believe it handles this the best without being overly restrictive. VueJS in fact, lets you chose if you wish to use JSX or templates, something unique to VueJS (Angular only uses templates out of the box — a quick search on Google shows people’s frustration with getting it to work).

As far as the “new” Angular, what is most concerning is not the TypeScript, but the fact the API and versions keep changing at such a rapid pace. It is not unreasonable to think that the code you write for a large enterprise application may become deprecated by the time it is released because of the blazing pace at which they are upgrading versions and changing the API. If you can keep to this pace, the more power to you.

Architect at Tipalti living in Israel trying not to spill tahini on the keyboard

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store