Choosing a frontend framework: Angular, React or Vue?

There is no good. There is no evil. There is only power and does who are to weak to seek it.—Lord Voldemort

 Disclaimer:  Opinions expressed by me are purely subjective with no malice towards  any framework listed here. They are all awesome testaments to the power  of purposefulness and innovation in challenging age-old conceptions in  achieving marvelous results. 

 Aside: I yielded easily to the temptation to put up the above quote. I guess the fantasy fan in me could not refuse the opportunity! 

 My Verdict: I cannot say, with a straight face, the ‘best’ framework among them. My personal preference at the moment is probably React (mostly cause all the cool kids: Twitter, Facebook, Netflix, AirBnB are using it) but I really enjoy the ease of Vue and I have personal attachments to Angular (being the first framework I successfully understood and all!) 

 Let’s get straight to it!

I’ve  had the pleasure of working with all three frameworks and to arrive at  the best among them, I’ll give you each framework with its strengths and  weaknesses. 

AngularJS

AngularJS  is a framework originally conceived by Google employee, Misko Hevery .  He was part of a team tasked with coming up with Google’s heavily used  Feedback application (The amazing little box on search results page that  answers everything from math equations to the possibility of the Knicks  coming out tops). The framework he developed helped speed up the  building process and helped to cut down the weight of the codebase for  the published Feedback app.These days, AngularJS goes by the name Angular.Angular has had three stable versions: Angular 1.x.x, Angular 2, and Angular 4.

Angular 1.x.x aka AngularJS

Strengths:

1. Low Entry Barrier:  Since frameworks like BackboneJS had helped to entrench the MVC  mindset, It was really easy to understand for anybody who had a  background with MVC frameworks.
2. Directives: Directives (introduced by Angular 1.x.x) came with the ability to instruct the browser and ‘teach it new behaviour’.
3. Data-Binding:  Two way data-binding provided an easier way to mirror data  relationships in web application effectively making building dynamic web  apps a breeze. Boy was it fun to see your pages change without any synchronous refreshes!

Weaknesses

1. Performance:  Angular 1.x.x was a performance headache. DOM updates were really buggy  (for large data sets) and any operations that led to the mutation of  data triggered expensive DOM updates.
2. Memory Management:  Two way data binding also made sure you could have memory leaks because  you had no control over watchers you were no longer using.
3. Internal Evaluation Mechanism:  AngularJS’s $digest cycles were hell. If you tried carrying out an  operation outside the $digest loop, you got crazy errors that could  shave a few hours off your life expectancy figuring how to just fix the  damn thing!

React

So,  while the Angular world had to put up with all this drama, in the  Facebook labs across town, a revolution was stirring — a revolution that  changed how we will come to build frontend web applications. That  revolution was ReactJS. Facebook had been toiling and devising better  ways to address the problems plaguing existing frameworks and came up  with some really fascinating solutions.I’ll address this solutions as React’s strengths.

Strengths

1. Performance:  React introduced impressive performance benchmarks. Thanks to its  diffing algorithm, inexpensive DOM updates could be carried out as the  framework stores a virtual representation of the DOM in-memory, so it  knows just what needs to change.
2. Component Oriented: React  introduced the concept of components as the core of every large  application. Components made code easier to reuse, maintain, and test.
3. Redux+Flux: Before  React, state management was a pain. You had to use crazy hacks just to  pass data around and God help you if you needed to communicate data  around different parts of the application you were building. With the  concept of flux, data simply flowed in one direction in the app making  data flow more predictable. Redux (REDucers + FlUX)  brought the concept of immutable data stores which came with lots of  cool stuff: time travelling, state dehydration and proper component  scoping.
4. Bubbling Community: React enjoyed almost  instantaneous adoption from the frontend community. Twitter recently  rewrote their mobile web product in React, AirBnB released a library  that could help in making React components out of Sketch components.

React’s merits are too numerous to sufficiently exhaust here. Let’s keep it moving!

Weaknesses

1. Steep Learning Curve: Challenging  traditional ideas comes with a price. React has a steep learning curve  because it represents a break away from everything we were accustomed  to. JSX? What is that? Writing CSS in JavaScript? What kind of sorcery  is that? Don’t even get me started on declaring props and exports in my  code!
2. Code Weight: React is pretty heavy without compression and gZipping. It can have an impact on load times compared to other frameworks.
3. Freedom of Expression: Don’t get me wrong, freedom is a good thing!  But sometimes, it’s easier to have someone do all your thinking for  you. React is simple a library for handling DOM updates. If you want  state management, asynchronous communication and other essentials, you  have to find an NPM package that handles that. Can be a snag if you need  quick, fast out-of-the-box-solutions.

Angular 2

React’s  strengths far outweighed its weaknesses and soon React was the rage.  However, the Angular team over at Google were studying AngularJS  weaknesses and working to remedy them. The result was Angular 2 or just Angular henceforth. Angular  2 was a completely different framework from AngularJS and adopted the  components architecture from React. However, It maintained its  templating engine and made its components modular so you could load them  at any given point in time.Strengths

1. Tooling: Angular  2 was written in Microsoft’s Typescript statically typed Javascript  transpiler. This made it easier to to get extended IDE support for  Typescript Angular apps
2. Large community: Angular has an extensive community. You will always get help if you are stuck.
3. Familiar concepts:  Angular retained some of its core concepts like its template engine and  directives. This helped smoothen any transitions from Angular 1.x.x to Angular 2.

Weaknesses

1. Code Weight:  Angular is a pretty heavy framework. A simple hello world application  could easily be 1MB plus in size. Tree Shaking and AOT (Ahead-Of-Time)  compilation could easily reduce the weight by 30% but, still, that’s a  lot of code for friggin’ two words. Don’t even get me started about the  time and memory a browser will use to parse all that Javascript!
2. Over-Engineering Much?: Angular  2 is great and awesome — but, face it — Angular has been criticized for  requiring too many lines of code for seemingly mundane functions. Visit  the Angular Tour of Heroes page and you’ll need twenty-something odd  lines of code for the first lesson — the penultimate masochist’s dream.

Vue

Evan  You, a former Google employee started working on a framework to solve  existing problems bedeviling the Javascript frontend ecosystem. Vue  sought to combine the best parts of React (Shadow DOM rendering,  component encapsulation e.t.c) and AngularJS (Templating, Directives,  Reactivity) into one stable system.

Strengths

1. Beginner Friendly: Vue, so  far, happens to be the most beginner friendly framework. It’s easy to  understand, provides good documentation and should be a cinch for anyone  with a little Javascript knowledge.
2. Performance: It is a  highly performant framework. The benchmarks for the latest Vue version  seem to imply higher scores in performance levels for operations like  DOM updates.
3. Easy to setup: If you enjoy tinkering with webpack or you are just a drop-it-in-like-its-hot jQuery aficionado, Vue has just what you need.
4. Light Code Weight: Weighs in at less than 500KB once minified. Still heavy compared to Knockout but light compared to React & 
5. Angular.

Weaknesses: None I can find so far. Maybe server-side rendering support could be a little patchy.

Last Bullet: They are three interesting frameworks.Use React:

1. If you have mobile app ambitions. React native is a godsend.
2. If  you’d like to take advantage of open-source releases from the stables  of Twitter, AirBnB, Facebook and all the guys doing badass stuff.

Use Angular:

1. If you are building apps that will be maintained for a long time.
2. If you also have mobile apps in your plans.

Use Vue:

1. If you are new to this.
2. If you have time constraints.