A question that I’m asked almost daily is that should I start with ReactJS or Angular? However, before I proceed any further, let me give you a disclaimer.

It’s not a blog where I’m gonna bash one or the other or say that you should always use one over the other. Every developer and every project are completely different and they have a different set of requirements so saying that you should always use ReactJS or always use Angular is pretty damn stupid.

The Logical Argument

You may argue Angular is a framework and React is technically a library by itself. I am not denying this fact, but this is the argument I don’t want to get into right now. There are packages you can add to React that will turn it into a framework that directly competes with Angular. We’re comparing the two ecosystems, not the exact framework versus the exact library.

The Learning Curve

Let’s start with Angular. Yet another disclaimer: when I say Angular I’m talking about Angular 4 not AngularJS.

Angular is a big framework which means that it’s powerful and it includes a lot. There’s a lot to learn. You’re gonna hear a lot of new intimidating vocabulary like dependency injection, directives decorators, pipes, etc. Then you have to deal with Typescript, which is JavaScript plus a bunch of other features including static typing.

Angular is more opinionated than React, which is one of the advantages in my opinion because with React you can do the same thing a million different ways. With Angular, there are generally one or two ways to do certain things, which makes it easier to follow, gives you much more clear instructions on what you’re supposed to do.

But then again, it comes down to preference. You might like the flexibility to do things in different ways. Like I mentioned, ReactJS is a library if we are talking about just the core library, it’s much smaller and much easier to learn than the Angular framework. You can say you’ll learn React in a shorter amount of time. React is a great view library itself but it is not even near as powerful for large applications. If you want routing, validation, HTTP requests in React, you’re gonna have to install other packages and that adds to the learning curve.

If you look at React code from two different developers they’ll probably look completely different whether they’re making HTTP Requests or handling State and Properties. All that stuff can be handled very differently and a lot of the times it can be in the wrong way.

You find the best practices and all the problems go away but that does add to the learning curve.

Unlike Angular React doesn’t use templates. It uses something called JSX or JavaScript extension or JavaScript syntax extension, which allows us to embed HTML in the JavaScript. At first this can seem a little quirky. Especially, when you were probably taught to separate your markup and your JavaScript.

Think of it like putting HTML inside JavaScript with a couple of different changes: you can’t use the class attribute and you have to use class name.

Lastly, we have Redux. React is often used with Redux or Flux which is application levels state managers. In my opinion, Redux is frigging hard just setting it up and learning the concepts of it is hard.

I think it’s overused. I think that a lot of developers use redux where it’s not needed. You don’t need it for smaller applications but many developers do insist on using it. That again comes down to preference. Redux is very powerful I don’t want to take that away. When talking about the learning curve it is damn difficult to grasp.

Winner: It’s a tie

Performance

It’s not fair to directly compare the performance of Angular to React. Angular is a complete front-to-back framework it includes routing, form tools, HTTP library, Reactive extensions, etc. All these features bloat the framework and make it slower. React however by itself is just a view library, which is much smaller and faster.

Once you start adding packages like the router, HTTP client, or whatever you’re gonna add to your React application then it starts to come up a little more to where Angular is and then you can start comparing them fairly but even after that React still wins the performance department. It is a very fast technology in general.

The change from Angular 2 to Angular 4under the hood they did quite a bit to increase the performance. Angular 4 is performs better than Angular 2. Nonetheless, React still wins in the performance Department.

Angular vs React. Source: Academind.com

Winner: React

Features

Both the frameworks have a lot of the same general features and advantages: they organize your code, they’re component-based, they offer dynamic markup, etc. They’re used to do a lot of the same things, and they share a lot of the same features.

We will look at some of the individual features. Angular obviously has a lot more features than React at its core. Let me remind you, we’re are talking about two ecosystems and common packages that are used with React.

Angular is an all-included framework. It comes with component router, Reactive extensions for observables, an HTTP client, a form’s module for validation and the list goes on. Moreover, it offers two-way data binding in a way that no other framework really does. Binding data from the view to the model is extremely easy using the ng model directive.

Angular also supports MVC (Model View controller) or at least different aspects from that design pattern. it also comes with features that allow you to easily implement testing: both the unit testing and end-to-end testing. Angular is packed with features to build enterprise level front-end applications. React on the other hand does not include much at its core. However, things can be added to give it the features that Angular includes out-of-the-box plus some additional ones.

React uses a virtual DOM which is very powerful. It creates its own lightweight version of the actual Dom and only includes and updates what’s needed rather than refreshing the entire thing. Virtual DOM is a major reason that React is blazingly fast.

React uses JSX which is more powerful than standard templates because you can put absolutely any type of JavaScript that you want in it. JSX is not required to use React but it makes things a hell of a lot easier. I can’t think of any reason why you would not use JSX with Angular too. React also does a really good job of managing component state and properties. It makes data really easy to work with and pass around between components. Passing data between components, Angular is much more difficult than doing it in React.

Core React is hard to maintain app level state. Component State is easy but if you want true app level state management then you’re gonna need Redux or Flux, which I said before is pretty damn confusing to learn. External packages that are often used like the new React router version 4 is a bit difficult to grasp but it’s also very powerful once learn to run and set it up. There are a lot of different ways to use it as well. React doesn’t have a core HTTP component like Angular does, but you can use Fetch or Axios, which is an external HTTP client and then Enzyme is popular for attesting React. There are some of the different packages that are commonly used with React even though they’re not part of the actual library.

While both technologies share a good number of features, if you’re just comparing the core technologies, then Angular is the winner.

Winner: Angular

Tooling

Angular and React have some pretty nice command-line interfaces. The Angular CLI and Create React App are both pretty great and they really allow us to streamline development. The Angular CLI is a bit more powerful because we can quickly generate things like components and services. Create React can’t do that. You have to create everything yourself as far as the files and the basic structure. Both systems use web pack, have their own auto loading dev servers and have compiling and build tools. Obviously, Angular has the additional task of transpiling Typescript. The CLI has a script for that when we run ng serve. All that happened behind the scenes. It uses something called TSC or Typescript Compiler for that and both have testing tools as well. Create React App uses Jest for testing and then one of the parts of these tools is the ability to build out your application into production into static assets that you can simply upload to a server or you can place it into your back-end client folder.

If it’s a full stack application so these are really important. You don’t need to use them. You can build a React application just from the ground up with web pack. These make it a lot easier to not just build the application but also compile and build it out for production.

They’re both pretty even in that department.

Winner: Angular

Ecosystem

As I said both of these technologies have their own ecosystems which now spread well beyond the web browser.

Ionic is a popular hybrid framework that is an Angular application that runs inside a native wrapper for mobile apps. You can create mobile apps using Angular. Hybrid apps can be a bit clunky compared to native applications. The user experience can be not so great at times–not as fast and responsive. Among the various hybrid frameworks, Ionic 3 is the best one. There is also NativeScript, which allows us to build true native apps iOS and Android apps with Angular as well as JavaScript.

Nonetheless, NativeScript does not seem to be as good as Facebook’s React Native at least at this point. Angular also has a material design component library if you’re a fan of material design. Angular Universal is a seed project that can be used to render Angular on the server side. There’s also NgRx store which is a state management library inspired by Reax redux. It’s based on state mutated by peer reducers. It also has integration with Reactive extensions.

You would have noticed. Once, one of them does something the other copies in a different way. React and Angular have become Microsoft and Apple of JavaScript frameworks.

React has quite the ecosystem. It has React native which is popular. It’s the best way to build mobile apps with web technologies. React Native is fast and a lot of the applications if built right, they’re right up there with native apps that are built on Swift or Java. React has a material design library called Material-UI which much like Angular’s material design component but more mature. JS is a framework for rendering server-side React applications. It aims to do this in the simplest way possible so this can kind of be compared to Angular Universal. MobX is another way to manage state. It works a bit different than redux does. It provides a set of decorators to define observables and observers and it introduces Reactive logic into your State.

Storybook is a development environment for React. It allows you to browse a component library, view different states of each component and interactively develop and test components. Reactive VR is getting React into virtual reality. React desktop is a JavaScript library built on top of Reacts library which supposedly brings a native desktop experience to the web, featuring many macOS and Windows 10 components. The React ecosystem is extremely large and powerful. React is making its way into every aspect of technology and it’s a clear winner.

Winner: React

The people in suits and ties are using Angular and the hipsters with the scruffy beards are using React.

Bottom line: It’s a tie

If you’re deciding between these frameworks, look at the different categories and see what interests you. Try them both out and see which one you pick up quicker. Do some more research more than this blog. You’re never gonna get all the info you need from one blog so read up some more.

If you are looking at a larger ecosystem which includes native mobile app development, pick React without thinking twice. If you’re after features, Angular is huge. There are more features than you need.