Introduction
Today’s web apps are equally powerful and complex. A large portion of the business logic is also handled directly by the browser, as the server only provides raw data (JSON/XML) to be consumed by the client. Making sure everything runs like clockwork sometimes gets out of hand—However, there are popular JavaScript frameworks to save the day. In this article we will compare and contrast the most popular JavaScript frameworks out there—AngularJS, ReactJS and VueJS.
AngularJS
AngularJS is still one of the pioneers of Javascript frameworks, and it’s been available since 2010. Google created it and later open-sourced it to the public. Server apps like Gmail, YouTube, Telegram Web, and many other single-page applications run with Angular.
This framework follows the MVC architecture, where there’s a clear separation of the View portion, the Controller, and the data layer. Because of this, the application can be modified at any level with much less effort, since no part is dependant on the other. The framework is also built with Typescript as the syntax style, which forces a strict development environment, reducing run time errors and improving code consistency.
Scopes in AngularJS are used to maintain data state in both View and Controller. Since the data flow between View and Controller is bidirectional, it allows data to be modified anywhere and still stay consistent. AngularJS achieves this by comparing the old scope and the newly updated scope, and once the changes are found, the DOM is modified with the changes.
AngularJS also comes with a very powerful CLI tool with which you can generate boilerplate components, models and other modules with just simple commands.
If you’re building an enterprise-level application that involves a lot of developers, AngularJS can be one of the best solutions.
ReactJS
ReactJS is a Javascript library for building only the UI portion of an application. You can look at it as only the V part of an MVC framework. It was developed by Facebook in 2013, and is now supported by a very large open source community. The best part about the library is that it is now available for various environments like mobile (React Native), VR (ReactVR), and desktop as well.
ReactJS uses Javascript ES6 for its syntax styling. It also comes with a compiler for JSX. JSX is a combination of Javascript and XML, with which you can write HTML inside React code itself!
The entire framework is component-based, which means the functionality is broken down into various components with a single responsibility. The component hierarchy can be compared to that of a tree. So while you can write as many components as you want, communication between them follows a strict parent-child architecture. Because of this, each component has its own functionality and has its own data state which is presented to the View.
React uses a Virtual DOM, which is a representation of the actual DOM. Only the Virtual DOM is rendered every time there is a state change. React manages multiple state changes by changing the Virtual DOM until the entire modification chain is complete, and only then does it update the actual DOM. Even here, the previous version of the Virtual DOM is compared with the modified one, and only the changes are updated in the actual DOM. This makes React super fast.
The library, however, follows unidirectional data flow. Thus, while a parent component can delegate changes to child components, it becomes harder to do it the other way around, and even harder when two different parents need to talk to each other. This fortunately helps in debugging the application, as it becomes very clear where the modification has started and where it has progressed.
In order to use React as a full-fledged View (with routes), you’ll need additional library support like Redux and routers.
VueJS
VueJS is the new entry to the clan, and was launched only in 2016. It is a mix of AngularJS and React, but more heavily inspired by React. It has proven to be faster than both. Popular projects that are built with Vue include Laracasts, Grammarly and Laravel Spark.
Vue brings in several concepts from React—the most prominent being the Virtual DOM. They each also have similar performance measurements. But unlike React, Vue separates its HTML from JavaScript. It uses plain HTML for templating.
It also borrows bidirectional data binding from AngularJS. This in combination with React’s Virtual DOM offers a lot of performance improvements. Vue also supports server-side rendering, which removes the burden of rendering on the browser.
However, when you compare community support for Vue, it still has a long way to go. This is understandable since it just hit the open source world a year ago.
Vue also recently announced that it is entering the native applications space. That’s direct competition with React Native—hopefully with more features and better performance.
