React vs Angular – a quick refresher

Angular is a framework, that is, it is an all-in-one solution that has all the necessary tools to build an application, which means that everything you have to do “in your way” but you don’t worry about having to find a way to implement various functionalities.

React is a library that only takes care of the view, which implies that the rest of the tools to make an application must define which ones to use (routing, state management, HTTP, etc.), but this achieves greater flexibility, Since to be able to define all the components separately you can change libraries that develop in the future and improve the application without major alterations.

A little history

React is a JavaScript library for the construction of user interfaces through components. React offers great flexibility and easy integration with other libraries. It was developed and is maintained by Facebook. Its launch for production occurred, initially, in March 2013. React is used by different companies such as Facebook, Uber, Netflix, Twitter, Udemy, Paypal, among others.

Angular, meanwhile, is a JavaScript framework based on TypeScript that provides a complete architecture with a set of additional utilities for creating applications. Also, it presents an interesting CLI tool to increase developer productivity. Its development and support are conceived by Google. The emergence of Angular occurred when the AngularJS version was rewritten (versions 1.x) and its introduction takes place on September 2016 (all versions from version 2 are considered as Angular). The latest version published to date is number 6. Angular is a framework widely used by companies such as Google, Forbes, WhatsApp, Wix, among others.

Architecture

Angular uses a basic MVC architecture, we have Components for the view, Router for the control layer and services for the backend layer. The paradigm used is component-oriented. 

React uses an architecture called Flux, which is similar to MVC as it also contains its model, view and controllers but is designed in a unidirectional data flow. The data travels from the view through actions and arrives at a Store from which the view will be updated again. The Store would be the closest thing to the application model. Save the data and application status. There are no methods in the Store that allow you to modify the data in it, that is done through dispatchers and actions. The implementation of this architecture is done by Flux / Redux

Performance

React has an advantage at this point since it implements the Virtual DOM, which is a representation of the DOM that allows you to compare the active DOM with the new resulting DOM. From this comparison arise the least number of instructions to transform a DOM into another, which makes it have a better performance than Angular.

Development language

Angular uses TypeScript which is a superset of ECMA2015 and uses a Transpiler to compile the .ts file to a normal .js file. TypeScript offers language extensions that are designed to make JavaScript writing easier, and associates type information with JavaScript entities to enforce type checking and improve development workflow. (The syntax of this language is very similar to Java or .Net).

React uses JSX that allows you to embed XML / HTML tags in the JavaScript file, this implies that JSX is a syntax extension for JavaScript. You have to use a compiler like Babel, which collects our JSX code and compiles it to generate JavaScript that browsers can understand.

Templates and themes

Angular centres its templates in HTML, that is, we write some logic in HTML, moving JavaScript to HTML, this implies that an HTML and JavaScript are maintained per component which gives more clarity of things but the detection of errors in a template occurs at runtime, also providing little determining information to find the error

React all the logic and view remains in JavaScript, that is, HTML is moved to JavaScript. This generates more centralized code, but they can be quite large files by components, error detection is generated in the compilation of the template, providing information about the error and the line that causes the error.

As for the themes (look and feel), both have a wide variety of themes available and very similar in look and feel and Bootstrap with Material Design can be implemented in both.

Developer support

Angular is supported by Google, React is supported by Facebook.

As Angular is maintained by Google and React is powered by Facebook, it is almost certain that both will continue to grow. Both offer major updates every six months and launch new versions frequently. Also, they establish depreciation periods with the required advance notice and the corresponding information to make the migrations. In the case of React, it is important to keep in mind that due to the versatility it presents and integration with other libraries for the development of joint functions, it is necessary to ensure in migrations the compatibility levels of these additional libraries with the new versions.

In general, both have so far maintained a good Community that provides support and support, in the workplace the demand for both frameworks/libraries is divided, although in general it is indicated that Angular is more used in large companies with stricter rules and React in start-ups due to its flexibility.

Conclusion

Angular is a robust framework, it includes everything you need to start an application but with little flexibility, its learning curve, in general, is not so short and can be a bit confusing at first if you do not have a view of languages ​​such as java and .net by the syntax that it manages, It manages a good support for its creators (Google) and the community in general.

React is a lightweight and flexible library, but it leaves the task of finding all the necessary parts (libraries) to generate applications, which at some time could be an inconvenience if the used complementary libraries are deprecated, although in general, this case is rare. Because its language is an extension of JavaScript, the learning curve is generally not that high. Maintains good support for Facebook and the community in general.