Angular vs Vue - developer perspective

Before I start - a disclaimer: I may state this and that, Angular is good or bad, Angular pipes suck, I may say Vuejs is not good or it rocks in simplicity but you have to take into account this was written by a person who comes from a .NET background, working in PHP nowadays and has solid JavaScript background. In total I am a developer for more than 10 years. I played with these frameworks for 10 days, redoing a task I will explain below. Conclusions are mine and represent my opinion alone.

So I got a task to create control panel for CastIt using new JavaScript frameworks. This was an internal task, planned to be sort of a test for the 2 frameworks (Angular & Vue.js).

But what is CastIt? It’s a narrowcasting & digital signage platform, that overgrown it's initial purpose by also having touch applications, connections to hundreds of apps and loads of analytics in it. You can read more on it here, I will skip the intro of it and just jump to the part I was involved for sake of explaining the comparison of the JavaScript libraries.

In CastIt there are multiple channels you can control, with multiple players running even the same channel. You need a way to monitor all of this activity and that is what I was aiming to rebuild with the task. The control panel was already built using react. Great. What else? CastIt is mainly built in PHP but the part I am calling and pinging for information is node.js.

Ok start comparing

So I started with Angular 4, which I will refer as it is called - Angular. Now some intro about Angular. Its main purpose is to build SPA apps, unlike Vuejs which can be used for SPA but also for different application types too. Soon I realized it’s not enough to go through the official Angular documentation.

There is much more you need to learn in order to get started. After some reading I decided to move and change development environment. I started with Visual Studio Code as the new development environment from now on. There are many reasons for that. Its lighter, much faster and it has great TypeScript and Git support. Using Angular with VS Code required additional effort and learning. I had to install and learn a bit about Node.js, to use NPM, Webpack. First, you need to install Node.js and NPM. Also you need Webpack – module bundler which simplifies your work tremendously. Without it, it would be pure hell. So I started with Angular command line interface (cli) as Angular documentation suggested and installed a new application which in turn gave me a template that included built-in support for TypeScript, Webpack, Unit tests. TypeScript support seemed natural.

As for unit tests, template had Karma and Jasmine unit tests preset. Unit tests launch in chrome browser, with visual feedback for each test. So it was very useful and convenient to use. Visual Studio Code offers autocompletion, F12, “ctrl + .” support which is Visual Studio alike. So that’s really cool. And what is best, after a while or better said right from the start, I realized TypeScript has many similarities with .NET object oriented programming, which I found as a great feature. Its type safe and I find that as an important benefit (because of my .NET background). You can make and use interfaces, you have constructors. Another thing that I noticed was code separation, that is, Angular template initial setup structures files in a way that it separated html, css and TypeScript. I find that as a big plus as you keep away business logic from html / css part which should not be concerned of it.

Modularity is one of major Angular features. When coding with Angular it is all about organizing code into the buckets. Angular also introduces services, which are place where you can write reusable business logic, extract and encapsulate unique repeatable functionality. Also it is notable that Angular strongly relies on dependency injection. It is implemented in a simple way, which is nice. Another benefit of all modularity, components and services is that in terms of coding styles Angular guides developer how to and where to write code.

To sum it up, all the concepts seem nice but along the way I realized official support documentation is not that good. They are lacking a lot of stuff, not covering all the areas. Actually, I realized that Angular 4 in general is lacking articles and documentation all over the internet. This is partly because at the time I was working with it, it was rather fresh as it was officially released in April 2017 and I was working on it around August 2017. Partly it is because old Angular JavaScript was very popular too. But there we come to the point where I realized also that Angular 4 as a successor of Angular 2 probably lacks documentation also because of number of breaking changes introduced in rather short period. And it’s not easy to keep up with breaking changes that occur every now and then. Well, because of that and it’s outright complexity it takes some time to learn it, so be prepared. There are also a lot of important libraries that one should learn about. Essential ones are RxJS, NgZone, Routing, NgRx for state management. In the end, the result of the CP (CP4) implementation with Angular was that initially It took some time to startup, but apart from that it ran smoothly. Overall impression was that latest Angular is pretty cool.

Some notes and ramblings. To reflect on Angular complexity. For example, animations do not seem like a great implementation by Angular – code syntax and results were way too difficult compared to yielded results – so in the end I abandoned using Angular animations. Similar situation is with pipes. Pipes are used to manipulate and transform data. Pretty weird term for what is usually called filtering. Actually it takes in data as input and transforms it to a desired output. In my case I needed channels table to be able to be sortable. Should not be complex, right?

No. So Angular uses pipes and for me the concepts was kind of weird. It was like separate piece that will not fit into the puzzle at all. Another note that adds to confusion is that Angular documentation suggest to use impure pipes with great care. If pipe is set as impure then they track changes and can easily impact user experience so be careful when you use it. It’s like, why not have it simple when you can make it complex.

Syntax is also kinda inconsistent, you can write same thing on several different ways. But only one miss and it will not work, without any warnings. For example with pipes, arguments are separated with colons? Don’t know why. Syntax to do two way binding was unusual as well or transferring event data from one component to another parent/child component is not that natural as well. In the end I can’t escape the feeling that learning curve for Angular is just too long and not backed up with enough docs. So seems too much an effort in the end or better said an undocumented unfinished product yet at the time of writing this.

What about Vue.js

Then vue came. It relies on a component based approach too. That is a plus and in that sense it’s similar to Angular. But unlike Angular it does not have code separation, instead JavaScript and html by default reside in the same file with vue extension. One of the first impressions was that it is much more “pure” JavaScript compared to Angular. Vue support docs are much better, in fact, it’s better then Angular by a huge margin. In terms of complexity it seems much simpler than Angular, although Angular has much more object oriented approach which initially I liked more.

Regarding the syntax, some parts are pretty similar to Angular. I am referring to template syntax like v-for and *ngFor or v-if and *ngIf. One note though, Angular syntax is case sensitive. But there are some special cases with vue as well, like with html attributes, where camelCase property names are using its kebab-case html equivalent. With note that I spent no more than 2 weeks working with it so I would not be surprised if I missed many features and details and that many of them have their alternatives. It was only that I did not have enough time to learn more about them. For example later I discovered there is a vue template that adds support for TypeScript. That said, it means object oriented feeling I got with Angular, can be achieved with vue using that template.

Still we can say TypeScript is not there by default, so small advantage for Angular (in case you are into TypeScript as I am). I mean TypeScript is not 1st class citizen in vue. My final impression is still that Angular is more modular than vue. I also learned that, while Angular has all the functionalities you need within its framework, routing, state management, http, its validation, animations, … basically has everything under its umbrella, on the other hand, with vue I had to use some additional 3rd party libraries. For example, you don’t have built-in http/ajax support. Instead axios library is suggested as a 3rd party implementation. Even though it looks cool that you have all when using Angular I could not find many downsides because of it. I can imagine it may cause some breaking changes over the time but Angular was prone to breaking changes within its sole framework too.

Vue also has couple of important libraries that are part of vue framework. Most important one are Vuex used for centralised state management, like redux would be for react, and for routing vue-router. Very useful tool is to install vue devtools browser extension. With it you have much better debugging experience. In the end, once the control panel (my task) was completed with vue, first impression was that it seemed faster than Angular and lighter, in terms of all the JavaScript code bundle size. That is a really big plus for vue and probably is the reason why should vue prevail once you are in position to choose one framework over another.

Well, although in general it was positive experience while working with vue, there are some things normally I did not like. For example, at least on first try, vue project template uses mocha, karma and phantomjs as a browser for unit testing. And using phantomjs as a browser is not as nearly convenient as it is in case with default Angular setup. Also debugging and stepping through the code in console did not work well too. For example, setting a breakpoint would not work for some specific lines. It seems it is related to source-map setting, but I was unable to resolve it in the short time I had available.

Conclusion:

Which is the chosen one? On one side you have Angular backed up by Google. Still vuejs seems lighter and faster, not supported by giants but still has some notable implementations like for wizzair, euronews, alibaba, baidu, facebook newsfeed. Later I found out that vue is supported by the chinese retail giant Alibaba. Still, because Angular is powered by Google it has bigger influence on the job market. So if you consider to sell your expertise as a developer, Angular might be better option at the moment of writing this.

But as vue popularity is growing fast, it should be considered as real contender and alternative in future. While current popularity on the market might be on Angular side, in case of building new applications all the signs imply to use vue rather than Angular. In the end there is another important conclusion. There are number of new frameworks lately and they do update at such rapid pace that it’s hard to be up to date all the time. What is essential is to fundamentally learn JavaScript. That is the real knowledge which is the foundation of any new framework. Frameworks come and go. Knowing them is a +, truly knowing JavaScript is a true value, ++.