Moving from Angular to Vue.js
First of all, this article is not intended to be another article comparing Vue.js against Angular, nor a comparison between Vue.js and React.
There are plenty of articles, videos, and threads in forums where you can get an overall idea of each framework/library and the pros/cons of using them. However, if you were looking for it, you can find a good comparison in the Vue.js guide.
The goal of this article is to explain our experience (so consider this as my personal subjective opinion) of refactoring an existing application developed in Angular into Vue.js.
As a summary, if you don’t want to read the whole story, we are about to finish the refactoring with very good results and nobody in my team has died and the manager nor the client have killed us :)
Background
Just to provide some background, the application we have migrated is a dashboard used by one of our main clients. This client is an e-commerce company with several applications in production, and thanks to this dashboard they can manage important parts of their business such as orders, customers, reporting and so on. You can view this dashboard as their back office application.
Digging into the technical part, the old stack uses Angular (1.5.x) on the frontend side. In the backend, a Node.js server (Express.js in particular) is serving as API to the frontend, while the data model and some e-commerce functionalities are provided by commercetools
If you haven’t heard about commercetools, it’s a Commerce as a Service cloud platform that exposes an API with several endpoints and actions for the main entities of an e-commerce platform (products, carts, customers, orders, discounts, etc…).
Thanks to it, you can have the core of your business centralised in commercetools and your applications (i.e an iOS app, a Node.js app, etc…) or FaaS (AWS Lambda function, Google Cloud function, etc…) are just clients of this API, allowing you a real omni-channel experience.
Why not Angular 2 or React?
And you can ask: why did you choose Vue.js instead of Angular 2 or React? and my answer is, why not? Well, they both are fantastic technologies, but for our particular case:
We didn’t choose Angular 2 because we didn’t need a full-blown framework for our needs. We preferred to start with a small core library and plugging in other libraries according to our necessities (i.e when we started the migration to Vue.js we thought that there was no need of using a state management library, but at the time we have developed several views with several components related to each other, we realised that we needed to include one, and thus, we easily included Vuex, which is the official state management library inspired by Flux and Redux).
So we could choose React, which is nowadays a safe bet, as you know: Nobody ever got fired for choosing IBM.
Vue.js templates are pretty similar to HTML but with the addition of the Vue.js magic, so not only developers but also someone familiar with HTML such as designers can understand the template code.
This is important for us because we have design-first projects where we have designers that create a UI according to the image that clients want to display for their brand. In these cases, we, the developers are responsible to give life to this UI adding the functionality and the business logic. Having a template system close to HTML, we can just use the designer HTML template as scaffold for our components.
Finally, what pushed us to Vue.js was the high amount of developers coming from Angular stating that the learning curve is insignificant and seamless (I can confirm this point).
For those familiar with Angular, just an example: ng-if, ng-show, ng-repeat directives have their corresponding v-if, v-show, v-for in Vue.js. The interpolation and filter syntax are exactly the same: double curly brackets “{{ }}” and pipe “|” respectively.
So we decided to move forward with it. At the end Vue.js has very good reviews and great momentum in the development community (more than 64k stars in Github), so everybody can’t be wrong ;).
The goal
The idea of the migration was to redevelop the frontend in Vue.js with Webpack, ES6, etc… while keeping the same backend. We took advantage of the migration and upgraded the Node.js and libraries version.
We also added more unit testing to our backend in those parts where we felt there wasn’t too much testing coverage… don’t blame us yet, we had tests but we wanted more!.
And finally, we changed the UI to a fancier one based on AdminLTE (Congrats guys for the project! it’s awesome).
The process
So once we had the approval from our client, we started the migration with a small team with no real experience in Vue.js (at that time I had started a personal project in Vue.js but most of us came from a solid Angular background).
We spent few days learning from the official guide and tutorials. One thing that I want to point out is how good is the documentation of the official libraries (Vue.js, Vuex, Vue-Router…).
The documentation is clear, easy to follow and get the main concepts.
Believe me, you notice that the documentation was written by developers for developers, and they know the concerns and questions you have when you start with a new technology.
After finishing the guide you have enough confidence to start developing something with some grade of complexity.
How was it?
Just one sentence: simple and with ease.
We never had the feeling that the technology was blocking us and we could focus on the functionality itself (I remember having that feeling a long time ago when I was developing in Java for years and I started a project in Ruby. — sorry, I had to say that even though Java have been my bread and butter for a long time).
Vue.js’ behaviour is consistent and behaves as you would expect. The error messages are clear, concise and easy to find out the root issue.
How many times have you wondered as a developer: why is it not working? why is it failing? you notice is a well-designed library.
I think one of the most important benefits of Vue.js (and React too) is that your mind changes and starts thinking in components.
- Components that you can develop once and reuse in your app. If you just need a particular behavior or UI for the component you can just change the props (for people not familiar, they are like params that you can pass to components). That means, that in the final stages of your project your speed of development increases because you can reuse components you already have.
- Components that you can test. I’m a big fan of TDD (test driven development) so I can think of a component as a unit that I can test isolated, and I can include testing in my development process with ease.
- Components where the scope is known and self-contained. It’s easy to track the state of each component in a particular moment. It’s more difficult to encounter unexpected behaviours within the components because an external component can only modify the state of a component via props or events.
Summary
After two months of development, we have achieved a 90% of the migration with fantastic results.
The developers are happy and feel really comfortable with the technology.
Developers coming from Angular or React can expect to have a good grasp of it in few days.
The client is also happy with the final result. After finishing this project, the idea is to move all their existing applications from Angular to Vue.js and all their upcoming new projects start with Vue.js from scratch.
Basically, they want Vue.js to be the frontend technology for all their projects.
If you are thinking about migrating from Angular to a new frontend technology or just starting a new project, give Vue.js a try, you won’t regret.
We liked Angular, we like Vue.js
In Devgurus, we always invest in technology and offer the most innovated technologies to our clients. If you are interested in knowing more success stories don’t hesitate to contact us: support@devgurus.io
