Choosing a front-end library we certainly come to a holy war between Angular and React. In fact, both of them were created by professionals and have been used in famous big projects and it would be weird if one was totally the best choice. Sure enough, each of them is good and useful, but they are different. You just need to choose one that fits your way of thinking and your tasks. Let’s go through the major differences between our “competitors” and look at the pros of cons of AngularJS and ReactJS.
State of Angular vs React in 2017 is hard to analyze because React community is solid and grows, while Angular community is migrating from one version to another. Old packages are being deprecated, new packages are not yet stable and there's not a lot of them yet. On the other hand Angular team has created this situation themselves, so it's a fair situation.
Library or framework
The main difference between Reactjs and Angularjs is that React is a library with limited set of features, while Angular is a complete framework.
ReactJS is a small JavaScript library used for rendering user interfaces. It has quite short documentation that can be reviewed just once to become familiar with the library. React builds views quite fast and doesn’t declare any requirements to model or controller – you can use any routing and ajax systems or don’t use them at all. The disadvantage of broad choice of additional libraries is the choice itself. Even if you just need to build an ajax request you need to choose a library first. Upon that if you have distributed development team, you colleagues definitely will choose different solutions and then will dispute and re-code, you bet!
In the meantime Angular is a complete framework with documentation as clear as mud, and you have to spend time to learn its terminology. To code something with Angular you have to read about its components, directives, controls, learn typescript, template design, etc. But there’s complete manual in documentation, step by step guides how to do routing, server requests, etc. Yes, it takes time to learn Angular and it will be quite complicated to replace framework parts you don’t like with more fitting tools, but first you have to explore original framework with all its stock components and documentation to see its functionality and applicability in your work.
Tracking changes or View rebuilding
Angular has two-way data binding so it tracks data changes and determinates what exactly should be updated in HTML. This is cool feature but it requires a handler for each element which should be updated. Whereas React just rebuilds complete DOM in memory and then compares it to current one to figure out what changes need to be made in it.
Please note, in Angular 1.x it was much easier to make your app slow by chance. For example when using ”$watch” and “ng-repeat” without “track by” and in some other cases.
Simple code or autocompiling
Angular tracks data changes and automatically updates liked view components or even interface at all. This causes a WOW effect and allows to write less of code. React requires from developer to code specified methods for user actions processing and data updating. Here we have a dilemma – develop a lot of code which is clear and understandable or write less code which behavior is not always clear.
JSX or HTML
Let’s look at the difference between ReactJS and AngularJS when it comes to the render. React uses JSX - JS with some HTML syntax inside. Angular in its turn offers to use HTML templates but add some JS inside using directives.
On the one hand it’s convenient to store layout next to logic and just add angle brackets in your JS code. On the other hand it’s good to have layout and logic separated from each other, so HTML developer can work with HTML as they used to instead of designing in JS. Just look at an example of coding same reusable element and choose your winner:
React
var createItem = function(itemText) {
return {itemText};
};
return {this.props.items.map(createItem)};Angular
<ul>
<li ng-repeat="item in items">{{item}}</li>
</ul>Debugging
Debugging part is worth to be described comparing ReactJS and Angular JS. Let’s take a look on errors handling. When you made a typo in JSX while building your app with React, it will not be compiled. JSX compiler catches the error, stops the compilation and shows you the error line. You can quickly figure out what’s the problem. This feature makes development faster. For debugging in Angular you can use external tools like Batarang, but clear original Angular will not tell you anything about errors (f.e like incorrect reference to variable) while compilation, instead it will get you app/website down while running. It should be noted that Angular team has implemented compilation-stage error-handling feature in Angular 2. So there’s no evident winner in this question if we compare last versions of products.
Stability and new release.
Angular team has almost released second version of the framework where downward compatibility is not supported and will not be. It definitely will cost you much time to rebuild existing projects from Angular 1 to Angular 2. Whole ecosystem of apps and libraries has to be coded again. In the meantime React got new major version, more stable API and keep getting new tools.
Moving to new version is a big issue and especially if we move to complete new framework and language. So Angular loses this battle, until at least stable AgularJS 2 version will be released and maintained. But we should keep in mind that this new Angular is designed and developed with paying big attention to current projects and their problems and aimed to fix weaknesses of the first version. Besides that, we are talking about new framework with set of various tools and all of them are upgraded.
Although React is stable itself, its ecosystem is far from this – new Flux implementations come every week. It’s still not clear what tool to use for next projects. We will be able to say more confidently after Angular 2 gets stable release and even an update, so it will be possible to compare moving apps to new version with latest React and Angular 2.
React vs Angular performance
Angular 1.x had issues and React was way faster. Angular 2.x was cleaned up and introduced ahead of time rendering (AoT), now raw benchmark numbers are very similar. There's no point in picking one over another for performance - now it's all about application architecture.
React vs Angular popularity
React is clearly winning at the time of writing this article. Angular's community is split between first and second version, both of which are less popular that React.
As Angular 2 adoption progresses, community will quickly grow as well. But React doesn't have this problem at all and will just continue growing as before.
Our choice
Our company also had to choose between ReactJS and AngularJS to become a standard tool for our business. We work in a distributed development team, usually in different time zones, with different responsibilities – some work with scripts, others design HTML/CSS, etc. It is very important for us to have standard structure and preferred solutions in our projects, so every team member could work separately but create unified code. Due this we chose Angular.
| Angular | React | |
| Server side rendering | Supported | Supported |
| Performance | High | High |
| MVC | MVC | V |
| Mobile | NativeScript, Ionic | ReactNative |
| JavaScript fatigue | Less fatigue | More fatigue |
| Learning curve | High | Low |
| Github stars | 22.7k | 63.4k |
| Author |
Our team has already created quite big and complicated applications using Angular 1.x and now we are running a project with use of Angular 2.
Subscribe for the news and updates
File upload works differently from simple form inputs, which can be somewhat troublesome for beginners. Here I'll show you how to handle uploads with ease.
In this article I'll show you how to deploy Django with Celery and Postgres to Heroku.
There are two most popular web frameworks in Python. There is the Django with lots of intelligent defaults and the Flask micro framework with complete freedom in the choice of modules. Let’s see, what django vs flask is in 2017.
Learn more about how to include jquery plugins in angular 2 running via webpack. Our tutorial is perfect for Angular beginners.
When we use css-sprites it's important to make browser cache them for longest period possible. On other hand, we need to refresh them when they are updated. This is especially visible when all icons are stored in single sprite. When it's outdated - entire site becomes ugly.
I've created this small sprite to create css sprites. It glues images from directory directory into single file and generates corresponding css.