Article in Programmable Web category.
How To Migrate Your Frontend Stack From Angular To Vue
Our frontend development team has made amazing websites for top clients. We answered the age-old frontend development debate of Vue vs Angular.
Fueled's Frontend Development Background
In the past year, our Frontend Web Development Team moved on from using Ruby. So, we needed to test the question: which is better? Vue vs Angular? Find out which one we picked as our frontend language of choice.
Vue vs Angular: Our Requirements
As a small team, we needed something that was well documented, that we could pick up quickly. When testing Vue vs Angular, our biggest requirement was finding something that felt familiar, as we continue to work in an agile manner we needed a framework that would allow us to create working prototypes fast. Having done some internal projects with Angular before we decided between that and React, we wanted to steer towards using Angular as it was something that met our familiar requirement but also meant we could create prototypes in CodePen and easily import them into our codebase. This felt like a no-brainer to us.
The Issues We Faced with Angular
We managed to build some seriously big projects, like Omstars and Keetoo, with Angular applications that we scaled from a small working prototype to applications that had tens of thousands of monthly users. This is what we learned along the way.
Out of the box, Angular has performance issues and there are a lot of improvements you can make to your project to increase performance - however, these are improvements that we feel you should not have to sacrifice when creating apps, e.g avoid using the ng-repeat directive or limiting your use of binding.
Two-way Data binding
Two-way data binding is something I initially thought would be a game changer when creating apps. A continuous check for the $scope variable (a piece of data which can be used from anywhere in the project) and watcher in the DOM are made when users navigate through your application, this check is registered with user events (click, scroll, key etc). As nice as this sounds, this actually has an impact on page loading time.
Moving to Vue
After spending a few weeks researching and comparing frameworks (Angular2, React & Vue) and also building out some internal apps with React and Vue, we decided that Vue was the framework for us. Below is a breakdown of why we went for Vue.
Vue's performance is noticeably a lot better than Angular's, Vue renders the project in the virtual DOM which is drastically faster than the digest cycle in Angular (two-way data binding).
HTML And CSS Familiarity
Every Frontend Developer first gets to grips with HTML and CSS before tackling any other language or framework. Working with Vue gives you a sense of familiarity that no other framework has to offer. The lessons our team learned from HTML and CSS made the transition to Vue fairly seamless.
A Simple Learning Curve
The last reason but the most important is how easy Vue was for us to pick up, this is mostly down to the solid documentation and the community. When we created the internal applications with React, we found that it was really difficult to pick up the basics but with Vue, the documentation is full of small code examples to constantly walk you through each step of the way.
Vue vs Angular: Our Conclusion
We're going to continue with Vue, we as a team feel heavily invested in it - as we continue to make internal tools and client projects we want to share our progress along the way. We have a bunch of things we want to talk about regarding Vue. Next time we will be talking about how to set up a Vue project up for the first time.