Angular vs. React: A Side-By-Side Comparison
Follow this cold hard comparison of Angular vs React from the perspective of a developer with little to no prior knowledge of either platform. When chosing React or Angular, THIS is the guide you need to read.
Jan 10, 2019 • 8 Minute Read
Introduction
When starting out with front-end programming, you will run across Angular and React pretty quickly. Currently, the JavaScript scene is changing at a very rapid pace and, it seems like, new technology is coming out every day. While some may think this is a good thing and others a bad thing, that is beside the point. At this point in time, it seems that Angular and React are the two big players that everyone is using. In 6 months or a year that could all change and as a programmer you should be able to adapt to that change easily.
There are many articles out there about Angular vs. React, and a lot of them tend to take a biased side to either one or the other. We can argue that Angular is more popular and that React makes you a better JavaScript programmer all day long. However, I am not interested in that. I am interested in the cold, hard comparisons of what makes each platform different. I will simply report on what I find and do a side by side comparison of the two frameworks.
I went out and compiled the information I could find on the two frameworks (And Angular 1.0). Below you will see what the results of this research show.
The Basics
| Attribute | AngularJS | Angular 2 | React |
|---|---|---|---|
| Version | 1.5.0-rc1 / 1.49 | 2.0.0 - In Beta | 0.14.6 |
| Author | |||
| Language | JavaScript/HTML | TypeScript | JSX |
| Size | 143k | 764k | 151k |
| Github Stars | 46.4k | 8.4k | 34.4k |
| Github Contributors | 1,386 | 189 | 604 |
This table is pretty straight forward, Angular is created by Google and React is created by Facebook.
The Meta Stuff
| Attribute | AngularJS | Angular 2 | React |
|---|---|---|---|
| Churn | Reduced | Reduced | High |
| Tooling | Low | High | High |
| Code Design | JS into HTML | JS into HTML | JavaScript Centric |
| JavaScript “Fatigue” | Less | Less | More |
These tend to be high conversation areas that get started on Reddit and Hacker News.
The Other Information
| Attribute | AngularJS | Angular 2 | React |
|---|---|---|---|
| DOM | Regular DOM | Regular DOM | Virtual DOM |
| Learning Curve | High | Medium | Low |
| Packaging | Weak | Medium | Strong |
| Abstraction | Weak | Strong | Strong |
| Debugging General | Good HTML / Bad JS | Good JS/Good HTML | Good JS / Bad HTML |
| Debug Line NO | No | No | Yes |
| Unclosed Tag Mentioned? | No | No | Yes |
| Fails When? | Runtime | Runtime | Compile-Time |
| Binding | 2 Way | 2 Way | Uni-Directional |
| Templating | In HTML | In TypeScript Files | In JSX Files |
| Component Model | Weak | Strong | Medium |
| Building Mobile? | Ionic Framework | Ionic Framework | React Native |
| MVC | Yes | Yes | View Layer Only |
| Rendering | Client Side | Server Side | Server Side |
Most topics I have seen on Reddit, Hacker News, and other social media sites tend to only cover and talk about the first two tables. People get stuck on the thought of JavaScript Fatigue, JSX, TypeScript, Churn, and Size. I hope I have helped to break this mold, so to speak. I've included all of the other information that is frequently overshadowed and that shows some holes in both frameworks.
Some of the most interesting differences between Angular and React are the size, community, debugging, DOM, and mobile. When talking about mobile, React has its own way of building mobile apps through React Native. Angular doesn’t try to tackle it’s own mobile and allows others, like Ionic Framework, to do this instead.
While the AngularJS 1 community is very large, the Angular 2 community is just gaining ground. This is, in part, due to Angular 2 still being in beta but the traction it has already gotten is pretty outstanding. React’s community continues to grow and become more diverse as well.
When looking at sizes, there are some distinct differences between React and Angular. While Angular 2 is currently about 764k in size, they are going to be trimming a lot of that off in the coming months. React also does not use as much of the MVC model as Angular, so it can get away with having a much smaller size. However, if you include the add-ons to React that make it fully MVC, then you will still come out with a smaller framework size than Angular 2.
Debugging is sometimes the hardest thing to do. I think it is interesting how each framework handles debugging. Angular 2 uses runtime debugging which tends to give you less information than React, which uses compile time debugging.
Finally, I wanted to talk for a moment about the Virtual DOM that React uses. This was a new concept to me and I looked at it more in depth. The Virtual DOM seems to be much faster because you don’t have to work with the heavyweight parts that the real DOM has. Manipulating and changing a virtual copy of your DOM, which is lightweight, and then only pushing the changes that are shown when doing a diff on the DOM, is pretty awesome.
After spending a few days researching and reading other articles on these two frameworks, I have found that there is a lot of give and take when it comes to comparing the two. Angular is the better choice for some projects while, for others, React is better. As always you should asses the project that you are working on to find out what best suits your needs. Hopefully these comparison charts can help you with that decision.
For more information, check out Pluralsight's library of courses that pertain to this.
The Other Guy
Those courses should get you started on the right track. If you really want to throw a wrench in and learn something new then check out RiotJS
About The Author
Shannon Duncan is the Founder and Author at Unrestricted Coding. He mentors and teaches people of all ages how to code and enjoy the art of programming. Find him on twitter, linked-in, and github.