With so many web development frameworks available out there these days, it is quite common when starting a new project to be overwhelmed by one deceivingly simple question: Which one should I use?

In this article we’ll try to answer that question by having a look at two of the most popular frameworks out there, Angular (versions 2+; we will not be covering Angular.js in this article) and Vue.js.

First, a brief introduction to the two frameworks:

Angular was released in 2016. It is a complete rewrite of Angular.js and aims to solve many issues – mainly performance related – that Angular.js had. Angular is built using TypeScript (a superset of JavaScript) which features static typing, interfaces, classes and so forth. Angular also aims to enable developers to build modular, easily testable and maintainable projects. The framework itself is developed and maintained by a team at Google.

Vue.js was first released in 2014, being developed and maintained by a small team. The Core package is aimed specifically at the application’s view layer and does not offer support for much else, however it allows for integrating other libraries and tools that can accomplish the tasks required by complex single-page applications.

Criteria

Comparing web development frameworks is not a trivial task. There are many aspects that one needs to consider, and there is no one-size-fits-all answer. In this article, we’ll be covering the aspects that were most important to us while developing the SmartComponent Library, both web and mobile versions.

SPA Capabilities

At the risk of sounding biased, I’m going to go ahead and say that Angular is the clear winner here. Its primary focus are single-page applications. It provides routing and forms support straight out of the box. The CLI tool can easily perform optimizations required for fast load times automatically (bundling, Ahead of Time compilation, etc.). Angular is also highly modular by design, making separation of concerns quite easy to implement by leveraging services, components, directives and modules.

While developing complex single-page applications is also possible with Vue.js, it does not offer the same out-of-the-box support that Angular does. To even begin such a project, one needs to first spend time on installing the various packages that will be needed: routing, form validation, state management and so forth. Extra packages need to be installed for build optimizations as well (although there is a CLI tool than can scaffold projects that make use of some of these tools).

Code Maintainability

Another aspect that was important to us was code maintainability. We were looking to write code that could be easily and intuitively structured, was easy to test and that would allow for easy implementation of new features. Both frameworks offer the ability to split code into individual components. While this was a good start, we also required our code to be easily testable, which required even further code separation. We wanted our components to only handle UI logic, while code that handled anything else would have to be separated. Angular provides a great solution for this through the concept of services and its dependency injection system. Simply write a service that handles, for example, fetching and maintaining data from a backend, then inject it into your component via the constructor. This makes unit testing quite easy, as you can test services without having to also render components in a browser. Another aspect that made us favor Angular in this department was that it is built using TypeScript. TypeScript is like JavaScript, but better. It offers static typing, interfaces, classes, the whole shebang. The Angular CLI then takes care of compiling that code into JavaScript. Development is a lot easier if you are not constantly looking for method signatures and return types.

Reusability of Code

Since we are developing and maintaining both web and mobile (using NativeScript) flavors of the SmartComponent Library, code reusability was also a must for us. Reusing Vue.js code between the two is quite difficult because your Vue components cannot include code that touches the UI. This is because NativeScript does not rely on DOM manipulation. With Angular and its platform-agnostic nature, this is not an issue. With the concept of services, one can easily isolate code that performs UI operations within so-called “dumb” components. Dumb components only display data provided by a service, and maybe perform a few UI operations. All other code can be written as services. Since there is no code that touches the UI in services and/or other classes, one can easily reuse this code in a NativeScript app without any further changes.

The Verdict

So, which framework to choose? For us, the answer was a no-brainer, with Angular being the obvious choice to fit our needs because of its modular nature, out-of-the-box support for routing and forms, TypeScript, services and the very useful Angular CLI tool. Two years ago, we believed that it was the right choice for us. Now, having gained a lot of valuable experience with it on our journey, we believe that this is even more true.

However, with web development frameworks there is no single one-size-fits-all answer. You should carefully compare your options based on the criteria that matters to you and choose the framework that best fits your needs.

Vue.js is a great tool for building quick prototypes. It also does an OK job in small SPAs. However, with our tools we are targeting large, complex business applications where scalability is a must, and that’s where Angular really shines. That’s why, for us, it was and is the perfect fit.