FrontEnd FrameWork Comparisons
By: Lillian Bitner
Tags: React, Vue, Framework, Angular, Front End Development

React vs. Angular vs. Vue

About 2 weeks ago, as part of our curriculum at the Flatiron School software engineering bootcamp, we graduated from vanilla JavaScript to using a frontend framework. The frontend framework that our instructors have chosen to teach us is React — which so far has presented me, and most of a cohort, with a steep learning curve. However, learning to implement it has simultaneously organized my previously jumbled mess of CSS, HTML, and JS files into laid out components that have defined relationships. Hearing the instructors jokingly bicker about which framework they prefer sparked an interest in understanding the fundamental and subtle differences between the three most popular ones: React, Angular, and Vue. Therefore, from the perspective of a frontend framework novice, we will explore the differences and similarities in this post.

React

Developed by Facebook and released in 2013, this framework relies on the use of components — components generally receive an input and changes the behavior of the component based on that input. The UI and behavior of the component are both dictated by the same code, that is written in JSX (JavaScript XML). In order to monitor state changes, React utilizes the concept of a ‘Virtual DOM’. This acts as an ‘in-between’ monitor that will ‘track’ changes, and efficiently make these changes to the real DOM, which is quicker and more efficient as it reduces the performance cost of completely updating the real DOM in reaction to each small change. It is a great first frontend framework to learn, as the documentation is extensive, is widely used in the industry, and just requires the understanding of JavaScript to get started. However, it requires the use of third-party libraries to implement, therefore is not considered as well-rounded and complete as Angular.

Angular

Developed by Google and released in 2010, Angular is the ‘oldest’ framework of the three, and utilizes components as well, but these components are called ‘directives’. Angular separates the UI of components into HTML attributes and the behavior of components into JavaScript code — making its methods different from React in this way. Angular utilizes a ‘change detector’ to monitor changes to components, and update the DOM when changes are made. Angular is perceived to have a steeper learning curve than React and Vue because it is independently a complete framework and solution — meaning it does not rely on third party libraries and also requires the understanding of associated concepts such as TypeScript.

Vue:

Vue is the newest addition, having been released in 2014, with its popularity on the rise. It is largely driven by the open source community and is considered a ‘progressive’ framework. Similar to React, it combines the UI and behavior into a component, and is also very customizable — great for developers that prefer less rigidity and more freedom. Vue allows styling to be declared in component files, therefore eliminating the need for CSS. Vue also utilizes a reactivity system that creates a ‘watcher instance’ for each component to track properties that are ‘touched’ during the components render. The watcher is notified when these properties are changed, and it re-renders the component. It is considered easier to pickup than both Angular and React.

They are all widely used frameworks, and I am especially excited to have the opportunity to learn their nuances as I continue in my coursework, as well as when I am inevitably faced with a new framework in the industry. The best part about this industry is that the learning possibilities are endless and the technologies are constantly evolving.