Since I'm not very experienced with working with Vue, I decided to ditch it in this article and focus on the remaining two solutions that I’m much more familiar with. With that in mind, how about making a side-to-side Angular vs React comparison?
Angular vs React: how the two came about
Long ago, in the faraway land: the beginnings
However, because AngularJS was not a perfect tool, plenty of developers started to complain while digging deeper into the framework. One of the biggest disadvantages of AngularJS was its performance. The two-way data binding – the same concept that sounded so awesome when Angular was launched –turned out to be overkill at a certain level of app complexity.
Angular vs React: moving on
When the reign of hearts of thousands of Frontend Developers is at stake, it seems only reasonable to keep improving your solution until it reaches a certain level of perfection. As the competition between Angular vs React grew fiercer, both solutions did exactly that: evolved in the attempt to gain ground.
In response to Facebook’s moves, Google announced a new version of Angular, which was officially released by the end of 2016. It’s worth mentioning that from here on, every new version of Angular is just called "Angular", while the previous one is called "AngularJS". A lot of older concepts, such as dependency injection, remained in place but the framework gained some new abilities as well. Some of them were borrowed directly from React – for instance, component-based structure or one-way data binding – while others were completely new and unique to Angular.
React wasn’t loafing around either. Following the big launch, it undertook a series of actions aimed at earning trust and a fine reputation in the community. The first months of 2014 were marked by the onset of the series of conferences known as #ReactJSWorldTour, whose aim was to turn as many curious devs into the solution’s advocates as possible. The hard work paid off in 2015, React was adopted by Netflix and Airbnb. This very year, Facebook went a one step further by introducing to the world a React-based framework for building mobile apps: React Native (but since we’re focusing on web development today, let’s leave this topic aside for now).
In the following years, React continued to grow in popularity and functionalities – some of the most notable changes included improving error-handling, allowing devs to handle lazy loading independently from third-party libraries, or the release of react hooks that facilitate not only sharing logic inside components but also writing clean and reusable code in general.
Angular vs React: how the solutions compare today
Before we go any further with the comparison, let's just have a quick look at the current state of the Angular vs React popularity battle. As of April 2019, Angular boasts over 1100 contributors and 17,5k commits on Github. It’s been starred more than 60k times and, in the last 12 months, it was given 35 stars a day.
In terms of the number of contributors and commits, there doesn’t seem to be a glaring discrepancy between Angular and React – Facebook’s solution scores over 1,3k and 13k respectively. The main difference, however, lies in the number of GitHub stars. At the time of writing, React has been starred 147k times, receiving 54 stars a day on average.
Then, it’s worth taking a closer look at how Angular vs React compare in term of interest over time. As shown by Google Trends, the TypeScript-based framework was winning the popularity race until mid-2018, when Facebook’s child took the lead (and haven’t lost it since).
Another way to measure a given solution’s popularity is singling out prominent companies whose products it underpins. Currently, Angular fuels a number of Google’s and Microsoft’s products, as well as GitHub Community Forum, Indiegogo, or Forbes. When discussing the evolution of React, I’ve mentioned it caught the attention of Airbnb and Netflix in 2015 – today, the technology is used by the industry giants such as Instagram, Twitter, WhatsApp, or Dropbox.
Main differences between Angular and React
As befits any proper comparison, it’s time to discuss the differences between the two frontend solutions in question. And, as you may have already guessed, there’s plenty to talk about.
Framework vs library
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, the React community is huge, and devs can browse a variety of ready-to-use and often updated components that will help them build their apps faster.
Angular, on the other hand, is a framework and as such, it 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 much complexity. Facebook’s brainchild 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.
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 the 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.
At the same time, to make its elements reusable and to encapsulate views, Angular uses web components. Even when we operate on regular HTML files, we can include custom HTML tags and the whole application will still work fine across all modern browsers. This is made possible by Angular components being based on a Shadow DOM concept enables not only hiding the entire DOM logic and styling but also making them reachable only within a component.
In both cases, there are additional features that are strongly recommended by the solutions’ creators – although not necessary to use or understand during the development process. I'll describe them in the following 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
As you’ll see later on, what Angular and React have in common are large communities. What sets them apart, however, is the general attitude towards these two technologies. As indicated by the results of Stack Overflow Developer Survey 2019, React.js is the most loved and wanted web framework. Angular, on the other hand, is the ninth loved technology… and the fourth dreaded one, which might be attributed to the framework’s steep learning curve.
As for practical 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 on a button that fires a fake request for a movie directors list. Nothing special, but it gives you a basic overview and shows how to code in a React or Angular way. In this case, of course, I’m using neither RxJS nor Redux, so a real app would look much different.
Angular vs React: not that different after all
Since you know about the main differences between React and Angular, now it's time I told you a few words about 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 to users experiencing performance issues related to dealing with large amounts 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 the core concept of passing data within the entire app led to another problem – namely, that of proper management of the 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.
Theoretically, even if Angular provides you with everything necessary to build an application, you'll quickly find out that third-party libraries created by the community can come in handy. 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, so it is really easy to adopt the same layout in both ways. Fun fact: you can even use React components inside Angular! :)
Angular vs React: mobile solutions
Angular's claim, "one framework: mobile & desktop" is pretty straight-forward. Want to build a high-performing mobile app with access to native platform API? Match Angular with NativeScript, you’re good to go. Another option is Ionic which, since the release of Ionic 4 in 2019, has become “a modern, web-based Design System and app framework for every web developer no matter what tools and frameworks they choose to use on top”. As far as the mobile capabilities of React are concerned, the go-to solution is still React Native, which I discussed above.
As 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 fast and effective. The main difference in performance stems from Angular using Regular DOM, which can negatively impact the user experience in the event of the app handling a significant number of requests on the same page. Virtual DOM, used by React, on the other hand, is considered to be more efficient in this regard. Ultimately, however, the performance of a product made with either of the two technologies will depend on the size and content of the app itself.
Angular vs React: who’s the winner?
React and Angular were made to solve similar issues but in a quite different way. If you’d like to have a full-fledged framework (plus much more, even though you might not need it at all) right from the beginning of the app development process, choose Angular. If, on the other hand, you want to be more flexible in terms of what you use and how, choose React. This way, 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”. They are great tools for creating Single Page Applications, so I’d recommend trying both and sticking to what suits you best.
Not sure which will suit your project best, Angular or React? Get in touch with our software consultants to receive expert advice.