Why You Should Consider Migrating From AngularJS to Vue

This year, the popularity and usage of React, Angular, and Vue has refused to slow down. We see continuous and persistent adoption and usage of these frameworks and libraries in both the front-end and back-end JavaScript communities.

As AngularJS is faced with an uncertain future, many teams are searching for answers to the current hot topic: if you are using AngularJS, do you continue to maintain your AngularJS applications or do you migrate your applications to another framework? This is not an easy (or cheap) question to answer.

In this article, we’ll go over some of the reasons why you should consider migrating your AngularJS applications, and some ideas on how to plan and budget for a successful migration.

AngularJS vs Angular — The History Behind Angular 1.x and Angular 2.x

“Wait, isn’t AngularJS the same thing as Angular?”

Well, not exactly…

AngularJS is a front-end JavaScript framework that was first published by Google in 2010. AngularJS grew to be perhaps the most popular front-end JavaScript framework in web development.

In concert with technologies like Apache Cordova, AngularJS has been a huge force even in mobile application development. During its early lifespan, AngularJS was known colloquially to the community as simply “Angular”, which confuses many to this day.

In 2016 Google released a completely new framework that they called Angular 2.

While Angular 2 was in development, people distinguished the two frameworks, AngularJS and Angular, by calling the first Angular 1.X and the second Angular 2.

As the Angular team moved to a semantic versioning scheme (the current major version of Angular is 6.X at the time of this post), suddenly, calling Angular v6.0 “Angular 2” was confusing as well.

To reduce confusion, the Angular team launched the “It’s Just Angular” campaign, helping create guidelines about how to refer to the different frameworks. The original Angular framework should be referred to as AngularJS and the new Angular framework should be referred to as simply Angular.

A great way to figure out if applications are Angular or AngularJS is to look at the date the application was created. Applications that claim to use “Angular” and that were built in 2016 or before are likely using AngularJS (popular versions include 1.2, 1.5, 1.6, and 1.7).

Sunsetting AngularJS

The AngularJS team recently announced that starting on June 1st, 2018, AngularJS would enter a 3 year “long term support” phase.

As of July 1st, the AngularJS team has committed to only releasing new patches to address the following concerns:

• Security flaws in the 1.7.X release branch

• Incompatibility with a major browser release affecting production applications

• Incompatibility with a jQuery library release affecting production applications

Come July 2021, any applications that continue to use AngularJS are susceptible to any of the above issues going forward and any other issues with the framework.

Why Migrate Now?

There are a few reasons to begin migrating your AngularJS applications now:

• The cost to migrate increases over time as the deadline approaches

• Security and compatibility issues are your problem now

• Difficulty finding new hires with AngularJS experience

• Brain drain with current staff

• Hard technology constraints

Framework migrations can be difficult, expensive, and require significant planning and coordination. Waiting until the last minute or until major issues arise to start planning for a migration adds additional risks of issues affecting customers.

Waiting also drastically increases the costs of migration due to the possible need to pay for expedited consulting services.

Security or compatibility issues? If a security or compatibility issue is discovered in AngularJS after the Long Term Support phase ends, it could expose your customers to the effects of data theft or major product outages until the application can be re-platformed.

Hiring AngularJS developers to support your application is getting increasingly more expensive as expertise in the framework becomes ever more rare.

Newer developers entering the workforce are predominantly using frameworks like Angular, Vue, and React instead of AngularJS.

AngularJS developers within your organization will want to stay current and relevant in the job market. There will be a growing desire internally with your current staff to want to use newer frameworks that are dominating the marketplace and the conversations right now. Migrating now decreases the risk of a brain drain as your developers may start looking for opportunities to leave and join companies with a fresher technology stack.

Lastly, newer frameworks have features that cannot (easily) be supported by AngularJS. The newer frameworks such as Angular, Vue, and React were built on top of lessons learned from the era of AngularJS. These new technologies tend to be faster, more ergonomic, and provide better support for modern tooling such as webpack.

The features of modern frameworks help your developers deliver new features more quickly and efficiently while enabling them to effectively leverage new web APIs. The modern methods of development can help improve the experience of your customers, lead to more online engagement, and help increase revenue after a successful migration.

The need to migrate from AngularJS is no longer a matter of “if,” but is instead a matter of “when.” Therefore, it makes sense to start planning for the migration now, so your team can more quickly take advantage of the new features of these frameworks.

Which Framework Should We Use?

The three largest and most popular front-end JavaScript frameworks used today are Angular, Vue, and React.

Each framework has its own vast set of:

• Developer tooling and documentation

• Widespread adoption across small, medium, and enterprise-level applications

• Extensive third-party library support

• Comparable feature sets

In the choice of which framework to migrate to from AngularJS, there is no definitive right answer.

However, in our experience at This Dot Labs helping clients migrate AngularJS applications, Vue has on average provided the most natural fit for AngularJS development teams.

There are many reasons for this, but the most prominent ones are:

• Templating syntax — Vue’s templating syntax closely matches that of AngularJS, making AngularJS developers feel very comfortable in the new framework.

• Reactive model — Vue’s reactive model is very similar to that of AngularJS, which allows AngularJS developers to adopt the mental model of Vue much faster than comparative frameworks and libraries.

• No additional JavaScript syntax or additional libraries — Vue doesn’t rely on a lot of additional JavaScript syntax or additional libraries that also need to be taught to developers, which is helpful for ramping up quickly.

We’ve found it common for AngularJS developers to get fully up-to-speed on Vue development with less time and less direct training than a similar move to other popular frameworks.

Vue also provides a very clear, incremental migration strategy for AngularJS projects. Vue and AngularJS play nicely with each other side-by-side while features are ported over one at a time. AngularJS controllers and templates can be converted or translated into Vue components in a systematic and repeatable way.

It doesn’t matter whether you’re using the latest versions of AngularJS (1.5, 1.6, or 1.7) or older supported versions (such as 1.2); the path to upgrading from AngularJS to Vue can often be a straightforward, mechanical process.

Successfully Migrating to Vue from AngularJS

The key to every successful migration effort is having a solid plan. The goal should be to execute the migration while:

• Minimizing feature regressions

• Avoiding platform downtime

• Continuing to deliver new features to customers

Setting Up Your Application For Migration

To accomplish this, you should set up your AngularJS application so that it can simultaneously render both AngularJS and Vue components. This will let you build new features in Vue and port over existing features from AngularJS as you have time, budget, and resources.

How To Begin Vue and AngularJS Integration

Hosting Vue components in AngularJS can be surprisingly simple.

All you need to do is include a script tag pointing to the Vue framework. Then, create your Vue instances pointed to particular DOM nodes in your application.

Vue can be set to run alongside your existing AngularJS application in a parallel branch of your document OR Vue components can be included in existing AngularJS components and fully controlled by Vue. You can even do some data and event passing between layers.

A simple version of this approach can be seen in this CodePen from David Rogers:

Converting AngularJS Components to Vue Components

The next step is to begin converting your existing AngularJS components to Vue components. This means converting AngularJS controllers into Vue instances.

Then, any AngularJS lifecycle methods are converted directly to the equivalent Vue component lifecycle methods.

Lastly, the AngularJS templates are copied into the Vue component and the AngularJS template syntax is replaced with the equivalent Vue template syntax (ex: replacing ng-if with v-if, ng-repeat with v-for, etc.)

AngularJS to Vue Migration Code Example

In this example, we are taking the following (slightly altered) snippet of templating from the AngularJS implementation of Todo MVC and converting it to a Vue template.

<section class="main" ng-show="todos.length" ng-cloak>

<ul class="todo-list">
<li ng-repeat="todo in todos | filter:statusFilter track by $index"
    ng-class="{completed: todo.completed,
               editing: todo == editedTodo}">

<input class="toggle"
       type="checkbox"
       ng-model="todo.completed"
       ng-change="toggleCompleted(todo)">
<label ng-dblclick="editTodo(todo)">{todo.title}</label>

<button class="destroy" ng-click="removeTodo(todo)"></button>

<input class="edit"
       ng-trim="true"
       ng-model="todo.title"
       ng-blur="saveEdits(todo, 'blur')">

Below is a straightforward conversion of the AngularJS implementation to a Vue template:

<section class="main" v-show="todos.length" v-cloak>

<ul class="todo-list">

<li v-for="todo in filteredComputedTodos"

    v-bind:class="{completed: todo.completed,

                   editing: todo == editedTodo}">

<input class="toggle"

       type="checkbox"

       v-model="todo.completed"

       v-on:change="toggleCompleted(todo)">

<label v-on:dblclick="editTodo(todo)">{todo.title}</label>

<button class="destroy" v-on:click="removeTodo(todo)"></button>

<input class="edit"

       v-model.trim="todo.title"

       v-on:blur="saveEdits(todo, 'blur')">

Migrating AngularJS Services

One of the great things about migrating is that any AngularJS service can simply be converted to an ES6+ module. There is no need in Vue to register services as is done in AngularJS.

Using ES6 modules and import statements will help bundlers like Webpack minimize the footprint of your code by intelligently tracking the dependencies between your modules and optimizing what code is bundled together and delivered at run time.

If you still want to leverage the AngularJS dependency injection system for these services, you can wrap your now-converted services in thinner AngularJS service objects like you would wrap third-party libraries like lodash.

What’s Next?

Early on, there is no need to add a parallel build step during your migration, no need to immediately use Vue CLI, and no need to tinker with Webpack build configurations. You can begin using Vue code with your existing build tooling. When your team and product is ready, then you can start bringing in the more advanced and involved tooling. Successful migrations are ones where the pace of change and the introduction of new technologies is measured.

However, after the majority of your application is migrated to Vue, you can begin to invert your tooling from being a AngularJS application that hosts Vue, to a Vue application that perhaps hosts some of the remaining AngularJS code. This process allows you to begin leveraging the power of the Vue tooling ecosystem, set-up a build and bundling step, and start using Vue Single File Components.

Later, you can begin refactoring and optimizing some of the previously converted components from a strictly 1:1 translated format to formats that more naturally fit the Vue model, and leverage more advanced features in Vue.

You will also be able to begin incorporating additional Vue libraries and features such as Vuex.

Conclusion

With support for AngularJS set to end in the next three years, migrating to a newer framework will help you and your team avoid issues that may come from the lack of direct support and get your development team excited again about development.

You will be able to attract talent easier and improve the speed and performance of your application and developers.

But, committing to a system migration without a plan is a recipe for disaster and may slow or halter new feature development. Without an effective plan, you may experience defects, regressions, and excessive unplanned costs.

Vue is a natural and proven migration target for AngularJS teams. It is straightforward to learn and allows for incremental migration of any AngularJS application alongside a new Vue application.

We hope this article has helped guide your AngularJS migration efforts and wish you the best of luck in your migration journey.

This Dot and our mentors have extensive experience helping teams migrate AngularJS applications to Vue.

We can help you architect the right plan for your needs, help your team migrate your application to Vue, and mentor and train your AngularJS developers into becoming successful and experienced Vue developers.

For a free consult regarding your migration, send an email to [e-mail].

This post was written by Rob Ocel, a Senior Software Engineer at This Dot.

Need JavaScript consulting, mentoring, or training help? Check out our list of services at This Dot Labs.