New Javascript frameworks and libraries are created every day and generate the dilemma of which to use when we start a project. Angular 2 and React are clear examples of this. Which is the most appropriate for your project? Let’s see…
As these new frameworks and libraries are a common thing in the current IT context, a common problem is that when we learn to use one and get used to it, we consider it to be the “best”, meanwhile, new ones arise and the cycle begins again.
So, why does this happen? To answer this, we will analyze two common approaches in software development: React vs Angular2. The first one is from the revolution perspective and the second is from the point of view of evolution.
Revolutionary technologies (React) are the ones that have a strong impact on the market, tend to be more disruptive and set a new paradigm. On the other hand, you can find some other technologies that have an evolving approach like Angular 2: even when they seem to be accepted, the IT world evolves, and new paradigms and even problems appear. Therefore, it becomes necessary to take a different approach.
React Vs Angular: revolution and evolution
With all the given context, now we will analyze the two leading technologies in the market, React (revolution) and Angular2 (evolution), in order to have the pros and cons laid out when choosing between them.
React
React is a JavaScript open source library, declarative and flexible, launched in 2013 that lets us create user interfaces of great dimension which are fast and dynamic.
Combined with other libraries and frameworks, such as Redux, Flux, or InmutableJs, among others, we can create a technological stack that allows us to develop web applications of any type. Some examples of this are Facebook or Instagram.
One of React’s most important aspects is that it changes the approach of how to build a web application. The components are responsible for this. They are based on the software design principle of single responsibility, where ideally, a component should do only one thing, and if it grows and takes more responsibilities, it should be divided into smaller subcomponents.
Other principles taken into account for its creation were code readability and maintainability, keeping in mind that the code needs to be understood and maintained not only by its author, but by other developers. These features are essential when building large projects and appreciated when the system grows.
Another significant ReactJS feature is that it promotes one-way data binding rather than two-way data binding, making it easy to detect errors in highly complex applications while positively impacting performance.
Angular 2
AngularJS 2 is an open source JavaScript framework, launched in 2016, for creating web applications. From its conception, the creators began with the problems of Angular 1 and furthered the evolution of new technological concepts. Some items that were taken into account for its creation were the following:
- Improve Performance: When Angular 1 was introduced in 2009, it was intended as a framework for designers and simple applications. Over time, developers adopted it and used it to build more complex applications. Although the team from Angular worked hard to adapt it, the design decisions taken at the beginning limited its functionality, and in order to be able to overcome them, it was necessary to take a new approach: design a new framework from scratch, Angular 2.
- Make it simpler: It was necessary to make Angular more transparent and easy to use by the developer. While Angular 1 was a good framework, taking its first steps in the technology was not that simple.
- Improve dependency injection: This is needed not only to prevent run-time errors due to possible name collisions but also to decrease the framework learning curve and improve modules initialization.
- Web Component Friendly: This is about being able to create declarative and autonomous components that are easy to package and distribute to the community. This is the current trend in the industry.
- Server Side Rendering Support: The idea behind this is to improve SEO features of the Single Page Application (SPA) developed.
- Improve mobile compatibility: Although it is possible to use Angular 1 for mobile applications development, it was not designed for that purpose, which had caused inconveniences of a diverse nature. Although many of these have been corrected with new releases, other issues still needed attention, so this update was necessary.
Comparing Technologies
Now that we have gone through all the elements that the Angular creators focused on for developing this newer version, let’s compare our perspective of a good developing framework with the main product highlights to have a broader perspective in order to make the right decisions.
Performance
One of the main issues that React tackles is performance. In order to achieve this, one of the key points was in the Document Object Model (DOM), the API for HTML and XML documents, which represents the logical structure of the documents and the way it’s accessed and manipulated.
The DOM itself is relatively fast, but the process for the browsers to make changes on it is rather slow, since every time the DOM changes, the browser has to calculate the CSS and render the website. This is most noticeable in large applications where the structures represented by the DOM are enormous.
With this in mind, React followed the same strategy as the web browser developers, which consists of minimizing the time for decreasing and grouping the changes on the DOM. They created a Virtual DOM that allows calculating the differences between changes and impacting only those in the real DOM.
This approach is fast and efficient with the only consideration being the memory usage, as it always requires a copy of the DOM in memory.
On the other hand, Angular 1 is based on the “Dirty Checking” strategy where in each execution, it verifies any changes. The main concern is that as it is not known where the DOM change took place, all the watchers must be executed (a watcher is responsible for knowing if a particular variable has changed), and it can have a negative impact on performance if the UI is very large or if the changes are very frequent. In order to improve this, Angular 2 made the following changes:
- The Application was structured as a component tree.
- They had a reactive system approach, where each component has, as a collaborator, a change detector associated with its template, so as to know how and when the change was made. Thanks to this, it is possible to create a tree that aims to detect changes and contribute to a better performance.
- Immutable Objects were added: they minimize the components that should be analyzed in the structure, therefore increasing performance.
- They added Observable Objects that help reduce the complexity of the change-detection algorithm.
As a result, Angular 2 has managed to overcome and pair with React regarding performance. In the following benchmark, you can see the React vs Angular2 results of a performance analysis.
Learning Curve
React is a library designed to solve UI issues. This makes its size smaller than Angular and also simpler, so its learning curve is fast.
However, if we think of large applications, it is important to consider other topics such as architecture, business logic, routing, etc. For that purpose, we not only need to keep React in mind, but other libraries or frameworks such as React Router or Redux as well, which increase the level of the solution complexity.
On the other hand, the freedom to choose which technology to add has its own pros and cons. The good side of this is that it is possible to choose the most appropriate library for what is being solved, but as a counterpart, we will need time for analyzing and making decisions.
One of React’s differentials is the ability to use JSX. Although it is not required to use it, JSX is a very important element that contributes to the easy declaration and creation of components.
However, using JSX means that there is no HTML. Therefore, those configurations that are natural in HTML, like the styles (CSS), add some more concepts to learn. Also, since there is no clear separation of concerns (Js and HTML), as everything is in the JSX, the designers who don’t have development skills may need the help of a developer to organize their work, files, CSS, etc.
Angular 2 is a large framework, so there are several topics to consider. One of them is the new syntax made to support different types of bindings, expressions, events, etc.
On the other hand, TypeScript is an Open Source language that incorporates static typing in JavaScript. This can be positive or negative for the learning curve according to the professional profile. It is likely that if the person has knowledge in other typed languages such as Java or C #, it is going to be positive since most of the concepts are similar. However, if the developer’s knowledge is more related to JavaScript in its purest state, there may be some drawbacks on the learning curve.
One of the good things about TypeScript is its flexibility. With simple sentences, it is possible to avoid the typed language in those situations where it causes a problem rather than a benefit.
Unlike React, with Angular 2 it is not necessary to research other alternatives for particular situations as it is possible to create an end-to-end application in-the-box. However, you should spend time learning architectural concepts like MVC if you don’t know them in advance.
In the process of learning both React and Angular 2, it is highly recommended to know the best practices. Otherwise, the result may be difficult-to-maintain applications, with performance problems and levels of low-quality. In version 2, the Angular team made a strong emphasis on this aspect to provide greater transparency to the developer to make it as intuitive as possible.
Productivity
For this analysis, we will assume that the team went through the learning stage and is trying to use the best practices for each technology.
Both technologies give us the possibility to create components that aim at reuse since in the same system, or even in others, we can use generic and measurable components that can be exploited at different times. It also gives us maintainability, since all the changes are made in one place. The maintainability is enhanced in React by its feature of being declarative, which helps to better understand the code and thus make changes, regardless of the developer.
Thinking about lines of code, in certain cases, it is likely that React requires some more because it is a library and not a framework. ReactJs is designed to solve specific issues and for this reason, can leave aside certain functions or behaviors for which it was not designed.
When using TypeScript, Angular 2 has several advantages:
- Improves legibility.
- It takes advantage of the object-oriented paradigm, such as the definition of interfaces, classes, inheritance, etc., that favors the creation of object-oriented designs and adoption of patterns in a more natural and simpler way than what JavaScript itself permits.
- It helps to detect compilation errors early. However, if we apply best practices, such as unit tests, this argument loses strength because they will detect potential issues on their own.
ReactJs supports ECMAScript 6, which is the foundation for TypeScript development. This lets us have some of these advantages of TypeScript but not exactly in the same way.
Debugging in Angular 2 is not straightforward and involves adding additional code or development extensions to the browser. It impacts analysis times of potential problems and therefore, productivity. Quite the opposite happens with React, where performing debugging is simpler and more straightforward.
Community
In terms of community, both technologies are widely accepted, and the numbers speak for themselves, especially if we deal with equivalent technologies. If we look at the repositories in Github, we can see that React has a larger community:
Something similar happens when we analyze Stack Overflow and research both technologies.
If we do this same exercise with google trends, we can see the same pattern:
We can see that React has a bigger community, consultations, and trends, but Angular2 has a very important community with constant activity, which also gives us great confidence in the framework.
Documentation
In terms of documentation, both React and Angular 2 offer fairly complete tutorials that allow for understanding from basic principles to the most advanced tasks. For the case of Angular, there is well-structured documentation about its architecture and the different actors involved (Modules, Components, Templates, Data binding, Directives, Dependency injection, etc.) and how they interact with each other.
On the other hand, React offers a good tutorial, which although it is not so well-structured, there are additional links to other resources (conferences, videos, tools, and blogs) that provide enriching and complementary information.
REact vs Angular2: Who trusts them?
Both React and Angular2 are increasingly welcomed by large companies:
Angular 2
- NBC
- Intel
- ABC News
- PayPal
- Weather.com
React
- Airbnb
- Netflix
- American Express
- Dropbox
- eBay
More info about sites using react, here.
Due to its maturity and longer time in the market, React demonstrates wider use. In the case of Angular, there is a lot of evidence on sites developed with version 1, and it is a little more difficult to find concrete examples in Angular 2.
To summarize, the following table illustrates the differences between the two technologies:
| Feature | Angular 2 | React |
| Author | ||
| Language | JS/TypeScript | JS/JSX |
| Size | 563k | 132k |
| Launch Year | 2016 | 2013 |
| License | Open Source, MIT | Open Source, BSD |
| DOM | Regular DOM | Virtual DOM |
| Code Design | JS in HTML | JS Based |
| Learning Curve | Medium | Low |
| When it fails | Execution | Runtime |
| Binding | two-way data binding | one-way data binding |
| Templating | TypeScript | JSX |
| Mobile | Ionic Framework | React Native |
| MVC | Yes | View only |
| Rendering | Server | Server |
| CL debugger | No | Yes |
| Debugging | Good for HTML / Medium for JS | Bad for HTML / Good for JS |
| Packaging | Medium | Strong |
To Sum Up
The decision between React and Angular 2 is not easy, and there is probably no single answer or truth. There will be obvious differences between the “fans” of one world and the other. The most appropriate way is to make the decision for the dilemma in a more contextual scenario to make the right choice.
If the team has no experience in any technology, perhaps the best option is to use React. It will require learning some other frameworks and complementary libraries, but it will require less time than Angular to be productive and achieve good results with levels of high quality, thanks to the simplicity of this library.
If the team has experience in typified languages such as Java or C #, the most convenient choice is Angular2, since working with TypeScript will be more familiar to the developers.
If we already have a team that worked with Angular 1.x, it is best to go for Angular 2. While there are significant changes between both versions, the base concepts are still the same, so the learning curve will be short.
On the other hand, if we evaluate the technology according to the type of application to be developed, and we have to create an application whose difficulty is focused on the UI and requires high performance, the best candidate will be React because it is a library specialized in interfaces and designed for this purpose.
In contrast, if we have to create enterprise applications, where the guidelines and work structures are defined, the ideal option is Angular 2.
Comments? Concerns? Contact us for more information. We’ll quickly get back to you with the information you need.
