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. 

Way before the current Frontend Team’s time, a lot of our projects were built on Ruby, in its day this was an elegant language which every developer wanted to work with but years after painstakingly spending our days in and out of legacy projects, we decided as a company we needed to bring the Frontend to a halt and try to bring our standards up to speed. The frontend team had all individually experimented with different Javascript frameworks from different client projects, We have watched the quick progression of these frameworks grow over a short period of time, so. it was obvious in order to build projects at the scale we needed to adapt to these frameworks.

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.

Angular Performance

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 Performance

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.