Additionally, this intensity was the reason behind the almost daily introduction of new frameworks, which forced Front-End Developers to start learning never ending list of technologies/preprocessors /compilers popular at this specific moment, however not always so practical nowadays, like Grunt, Bower, RequireJS, etc.
Since I'm not very experienced with working with Vue, I decided to ditch it in this article and focus on what I know best - React and Angular. With that in mind, how about making a side-to-side comparison?
The beginnings of Angular and React
One more thing. Before we go any further with the comparison, let's just have a quick look at how React and Angular popularity grew within past few years.
Source: Google Trends (July 18th, 2017)
Main differences between Angular and React
The first and most important thing to remember is the fact that React is not a framework. It's "just" a library that deals mainly with View layer of an MVC architecture and, without external packages, can't provide for example routing. Fortunately, React community is huge, and people can browse a variety of ready-to-use and often updated components that will help them build their apps faster. On the other hand, Angular is a framework and comes with a lot of built-in modules like an angular router, angular HTTP module, or angular forms. With that, you don't actually need anything more to start developing a fully functional app. This also means that React may suit you better if you're working on smaller projects that don't require a lot of options. It's also great if you like adding a lot of custom components and want to have more control over your code structure. Otherwise – choose Angular. If you want to know more about differences between a framework and a library, check out our article Framework vs. Library - differences in web development.
How Angular and React work with DOM
Another key difference is that React handles HTML using Virtual DOM - a virtual representation of Document Object Model (DOM defines logical structure of documents and is represented as a tree of objects). Virtual DOM is just a lightweight copy of a regular DOM that doesn’t have the ability to directly change what's on the screen. This way React updates real HTML elements only if it is absolutely necessary. On the other hand, to make its elements reusable and to encapsulate views Angular is using web components.Even when we are still operating on regular HTML files, we can include custom HTML tags and whole application will still work fine across all modern browsers. To achieve this, Angular components are based on a Shadow DOM concept where we can hide whole DOM logic and styling and make them reachable only within a component.
In both cases, there are additional features that are strongly recommended by their creators, but not necessary to use or understand during the development process. I'll describe them in next paragraphs.
|is a larger framework||is a smaller library|
|created by Google||created by Facebook|
|requires more tools but gives you fledged framework||easy to learn (on the basics level)|
|standardized project architecture||has a flexible architecture|
|uses Regular DOM + web components + additional Angular syntax||uses Virtual DOM|
|TypeScript + RxJS as an additional features to learn||JSX syntax to learn|
Angular vs. React - comparison
Below, you can see how Angular and React look in really basic apps that have the same functionalities. All they do is allow you to click a button, which fires a fake request for a movie directors list. Nothing special, but gives you a basic overview and shows how to code in a React or Angular way. (I'm, of course, not using either RxJS nor Redux, so a real app would look much different).
Similarities between Angular and React
Ok, so since we now know what are the main differences between React an Angular, now it's time to take a look at their similarities.
Say goodbye to Angular's old $scope and start thinking in a more modular way. Angular's 1.5 version has already attempted to take this approach, but since it was still based on a 'scope', it led users to performance issues that dealt with a large amount of data. To avoid these problems, Angular and React switched to unidirectional data flow and passing data from the top-level component (called container or 'smart component') down to the lower components (called 'dumb components' or 'presentational components').
However, changing core concept of passing data within entire app led to another problem - how to properly manage application state? So far the most popular solution in this instance is Redux. Adding one global store and dispatching actions to it "helps to write applications that behave consistently and run in different environments". That's why you can use Redux both in React and Angular. However, you can also skip Redux implementation and try to solve problems in a reactive way mentioned before - via Reactive Extensions and RxJS.
Every component has its own lifecycle methods fired when some particular action occurs. For example, you can use "ngOnInit" method in Angular, while in React we have "componentDidMount",. Both of them will execute code inside methods after the component is created. Similarly, before you delete any component, you may want to run some function. To do so, you would use "ngOnDestroy" method in Angular or "componentWillUnmount" in React.
Community and libraries
Theoretically, even if Angular provides you with everything necessary to build an application, you'll quickly find out that it 'd be good to implement some third party libraries created by the community. Here lies the true value of stars and numbers of unresolved issues on GitHub. Without the large community, even a great library or framework can be hard to implement. Fortunately, there are a lot of React and Angular supporters creating great tools that will resolve your problems during the development phase. Need help with something specific? On GitHub, you'll find catalogs of Components & Libraries for both Angular and React.
Since Angular and React are based on similar concepts, you can find the libraries created for both of them, such as UI-Router, the great external state-based routing library. There are also implementations of the most popular UI frameworks and concepts – Bootstrap or Material Design (note: the version of Material Design for Angular still might be missing some components), so it is really easy to adapt the same layout in both ways. You are even able to use React components inside Angular! :)
Like I've said before, SPA frameworks came a long way when it comes to performance. A lot of lessons were learned, a lot of things have changed. So far it's really hard to compare React and Angular regarding performance because they both are extremely fast and effective. However, the release of the next React may change a lot. It's going to be rewritten and, once version 16.0 is launched, React Fiber might be the ruler performance thanks to its incremental rendering.
React and Angular were made to solve similar issues but in a quite different way. If you like to have a full-fledged framework (plus much more, that you might not even use) right from the beginning of app development process - choose Angular. If you want to be more flexible in terms of what you use and how - choose React. With React you can start developing right after minimal configuration, so it might be a better choice for smaller projects.
It’s hard to say “Angular is better” or “React rules, forget Angular”. Those are great tools for creating Single Page Applications, so try both of them and stick to what suits you best.
To make memorizing all this knowledge about Angular and React a bit easier we've prepared an infographic - enjoy!