Angular vs. ReactJS vs. VueJS - A high level overview of popular reactive frameworks
Reactive frameworks and libraries have taken web and mobile application development to a whole new plateau. Leveraging advanced browser DOM manipulation where conventional frameworks and libraries fall short, here we take a brief look into three popular frameworks. So why reactive frameworks/libraries?
Unlike traditional Server side scripting languages, reactive frameworks and libraries are focused more on building rich interfaces based on reusable/pure components which are perfectly capable of powering sophisticated SPA (Single-Page Applications) and PWA (Progressive Web Applications). They can also empower backends or perform server side operations by using NodeJS. While not limited to building SPA and PWA, you can even build native mobile applications with these frameworks and libraries.
Angular (formerly AngularJS)
Backed by Google, Angular is a full blown framework based on MVVM (Model, View, View-Modal) architecture to build highly interactive applications. From Angular 1.x to 3.x it has gone through major rework and rebranding. This led to considerable confusion and controversy among developers which led to drop in Angular market share and popularity. Despite these shortcomings, Angular has seen major improvements since then, starting with complete core rewrite supporting PWA, Material Design, CLI workspaces, accessibility, animations, RxJS and Typescript.
Pros & Cons of Angular
- MVVM Architecture
- Server side rendering
- Support for Typescript (strict type checking)
- Two way data binding, less risk of errors
- Dependency injection
- Directives and Templates
- RxJS support
- Steep learning curve
- Scalability and performance issues
- Complex syntax
- Variety of different structures(Injectables, Components, Pipes, Modules etc.)
- Bit harder to learn in comparison with ReactJS and Vue.js, which work purely on “Component” principle
- Lack of native mobile application development support but scalable with NativeScript
ReactJS/React Native
Backed by Facebook having biggest market share and popularity, ReactJS outshines Angular and VueJS. ReactJS introduced JSX syntax to write templates, components, CSS and core logic within one syntactic format which at times could confuse developers. ReactJS is not based on MVVM (Model, View, View-Modal) but a chunk (V) of developing stateful, interactive and dynamic user interfaces. ReactJS has additional advantage of optimized speed and DOM manipulation using Virtual DOM instead of Real DOM compared to Angular. ReactJS applications scale faster, it’s easier to learn, supports functional programming, backward compatibility and portable code base for web and native mobile applications with pure functional components.
Pros and Cons of ReactJS
- Easy to learn and scale
- Server side rendering
- Super fast rendering due to Virtual DOM
- Quick prototyping for PWA
- Extensive backward version compatibility
- One way data binding, fewer unnecessary DOM updates
- Transferable learning experience from web to mobile applications
- Requires well researched architecture and refined process due to overwhelming choices
- Functional programming deviates an average developer from core OOP principles
- Mixing template and logic in one syntactic format
- Not a full blown MVC or MVVM framework but a library adding extra learning curve and dependencies
- Confusing syntax with JSX
VueJS/Vue Native
VueJS is approachable, performant and versatile. Developed by former Google protégé - Evan You, it’s the best of all worlds. Taking early influences from AngularJS, ReactJS and PolymerJS - VueJS is the new Elvis in town minus the noise and complexities of steep learning curve or scalability. VueJS is lightweight yet powerful, adaptive, plug and play for building quick prototypes using HTML like syntax which is easier to read, developer friendly with minimal dependencies on Babel or Webpack. From building enterprise SPA, or complex PWA or Native mobile application, VueJS can do it all. Though not backed by industry leads, VueJS has gained more traction every month with 140k stars on Github.
Pros and Cons of VueJS
- Smooth learning curve, in-depth documentation
- Supports server side rendering using NuxtJS
- Lightning fast rendering using Virtual DOM
- Plug and play architecture, minimal dependencies on Babel or Webpack
- HTML-based templates makes easier to progressively migrate existing applications
- Precision reactive component updates
- Support for native mobile applications
- Speed and flexibility - core VueJS weighs under 20KB
- Limited learning resources with smaller market share and popularity
- Risk over flexibility
- Native mobile application support is still not mature
- Lack of support for Large scale projects
- Geographic barrier (Great China Firewall)
- Moderate Plugin ecosystem compared to Angular or ReactJS
The Takeaway?
Frameworks and libraries come with their own taste, style, backing and industry standards. Conforming with each can often lead to new challenges, one solution can lead to dozens of new problems. Though it’s easy to formulate an opinion but when push comes to shove there couldn't be an ideal framework or library unless you're fully attuned with their shortcomings.