React, Angular, Vue — what’s the difference?
As someone who’s been using javaScript for only a matter of months I’ve doing a lot of research, and along the way I’ve encountered a lot of acronyms — MEAN, NPM and MVC and SPA — to name just a few. I’ve also encountered new libraries and frameworks such as Vue, Angular, React. As a student of React, I know a little about it as a library, however, I’m also keen to understand more about Angular and Vue.
The reason for my curiosity is simple — a lot of developers like to discuss the three in competitive terms, for example, which is most popular (amongst developers)? Which is most widely used and which one will provide developers with the most job opportunities? This blog post is a result of my own research to answer those three questions but, firstly, some basics about each.
- React, React.js, ReactJS, React Native
React is a javascript library for building online web interfaces/websites. It was created by Jordan Walke, a Facebook engineer in 2011 and is primarily used to build single-page applications or SPAs. It’s maintained by Facebook and a community of companies and individual developers.
It was first deployed on the FB newsfeed in 2011 and on Instagram in 2012. React Native for mobile operating systems was released in 2015 and React is firmly focused on front-end user experience development and is therefore commonly used in-conjunction with other tools in order to create apps. A few of it’s notable features include:
Criticism* — it has high memory (RAM) requirements, since it uses the concept of a “Virtual DOM”. This is where “a representation of a UI is kept in memory and synced with the ‘real’ DOM by a library such as ReactDOM”.
- Source— Wikipedia
ReactJS is a library and has a View, but lacks Model and Controller components.
2. Angular, AngularJS
AngularJS is a web framework originally developed in 2009 by Miško Hevery at Brat Tech LLC and is a front-end web framework mainly maintained by Google. Subsequent versions following AngularJS are simply known as Angular. Angular is a complete rewrite from the same team that built AngularJS.
Like React it was built to make it easier to create single-page applications. It also aims to make architectural patterns such as MVC and Model–view–viewmodel (MVVM) easier to produce. Unlike React it uses a direct DOM rendering system.
AngularJS is the frontend part of the MEAN stack, consisting of MongoDB database, Express.js web application server framework, Angular.js itself, and Node.js server runtime environment. Notable features include:
- One way and Two-way data binding — two-way data binding helps us write less boilerplate code to create interactions between components (the View and the Model). But Angular automatically creates a watcher for each binding and we may come to a point when an app is packed with too many watchers for bound elements.
- MVC and MVVM based architecture
- Code Splitting — Angular apps load quickly with the new Component Router, which delivers automatic code-splitting so users only load code required to render the view they request.
Criticism* “AngularJS sets out the paradigm of a digest cycle. This cycle can be considered a loop, during which AngularJS checks if there is any change to all the variables watched by all the $scopes. If $scope.myVar is defined in a controller and this variable was marked for watching, Angular will monitor the changes on myVar in each loop iteration.
This approach potentially leads to slow rendering when AngularJS checks on too many variables in the $scope every cycle. Miško Hevery suggests keeping fewer than 2000 watchers on any page.“
*Source — Wikipedia
3. Vue.js
Released in 2014, like React and Angular, Vue is designed as a front-end development framework for building single-page applications.
Vue was created by a Chinese Google employee named Evan You who after using Angular and wanted a lighter-weight version that just used the bits that he liked. Notable features include:
- Lightweight Virtual DOM — more efficient than React which is said to provide higher performance
- Two-way data binding — Vue.js automatically syncs the whole model with the DOM
- Pure JavaScript — Vue.js uses pure JavaScript, so there’s no need for JS developers to learn a new programming language
- HTML templates — like React, Vue has components, but by default they work with HTML templates, not with JSX. Main advantage of templates is that you are writing pure HTML. But if you want you can use JSX.
Many developers are of the opinion that Vue combines the best elements of React and Angular in a lightweight framework.
Developer Usage
Job Demand
Summary
Angular and React are completely different instruments, but both great for writing single-page applications. Which is better will probably boil down to a matter of preference.
Although it’s not supported by western tech giants Vue is often used by Chinese giants such as Alibaba, Baidu, Tencent and, therefore, whilst it is currently less popular, there are huge opportunities for growth.