My First Post      My Facebook Profile      My MeOnShow Profile      W3LC Facebook Page      Learners Consortium Group      Job Portal      Shopping


Wednesday, July 25, 2018

React Vs Angular in SPA: What they are, differences and the end of debate

As soon as you decide upon being SPA, the Single Page Application, the question pops up which Library. Here, I discuss between what I have learnt so far in this area,as a developer, tester and UX designer.

Let's start with a basic introduction. Angular is a TypeScript-based Javascript framework, developed and maintained by Google. Angular 1 released in 2010 is now called AngularJS. Angular 2 and above release after 2016 is simply called Angular. The latest version is Angular 7. It is being used by Google, Wix,, and Forbes etc. React is described as “a JavaScript library for building user interfaces”. Released in March 2013, developed and is maintained by Facebook.
Facebook uses React components on several pages. It is said that React is used far more at Facebook than Angular is at Google. Anyways, React has also a good range of supporters cum users likeReact
Airbnb, Uber, Netflix, Twitter, Pinterest, Reddit, Udemy, Wix, Paypal, Imgur, Feedly, Stripe, Tumblr, Walmart etc. Additionally, Facebook is working on the release of React Fiber. Rendering is supposed to be much faster as a result.

The frameworks are component-based. A component gets an input, and after some internal behavior / computing, it returns a rendered UI template as output. Much appears like an MVC design pattern. The defined components should be easy to reuse on the webpage or within other components.

The differences start from the fact React focuses on the use of Javascript ES5 or ES6. Angular relies on TypeScript. Because of this Angular has more consistency. Also, Angular has hence, concepts like decorators and static types. Static types are useful for code intelligence tools, like automatic refactoring, jump to definitions, etc. However there is catch also that TypeScript may disappear over time. Additionally, TypeScript adds a lot of learning overhead to projects. And, for the type checking enthusiasts, there is something called Flow to enable type-checking within React. It’s a static type-checker developed by Facebook for JavaScript.

Then, lets remember that Angular is a full framework with all the tooling and best practices designed on top of it. React on the other hand is just a small view library that you
would need while making an app. React uses abstractions over simple Javascript. But learning Angular is bit time consuming as you should know everything else associated to it eg typescript, MVC. Plus Angular library in itself is huge. The Angular templates are enhanced HTML with special Angular language (Things like ngIf or ngFor). While React requires knowledge of JavaScript, Angular forces you to learn Angular-specific syntax.

On the Scalability issue, Angular is good at this time, 2018. However React is going to comeup with more in future. However, as of now Angular is easy to scale thanks to its design as well as a powerful CLI. React also claims to be good and testable and scalable. So, it won't be a bad idea to choose React.

Coming back to the programming style, I should assert here that Angular includes dependency injection, a pattern in which one object supplies the dependencies (a service) to another object (a client). This leads to more flexibility and cleaner code. Plus, the code becomes more testable. Angular's model-view-controller pattern (MVC) splits a project into three components: model, view and controller. Angular as an MVC-framework has MVC out of the box. React only has the V i.e View. You need to solve the M and C on your own.

But, there also lies a problem with Angular. This is already discussed above but the following idea will give you a new perspective as well. We’re now moving more towards microservices and microapps. React gives you more control to size an application by selecting only the things which are really necessary. They offer more flexibility to shift from an SPA to microservices using parts of a former application. Angular is too bloated to be used for microservices.

And, last but not the least, let me take you to a short discussion around native Apps creation. React with react native, react sketchapp and next.js, it is the best choice. Angular comes with ionic 2 and nativescript, but neither of those mobile frameworks allow angular to reach the performance of react native. React and Angular both support native development. Angular has NativeScript (backed by Telerik) for native apps and Ionic Framework for hybrid apps. With React, you can check out react-native-renderer to build cross-plattform iOS and Android apps, or react-native for native apps. A lot of apps (including Facebook; check the Showcase for more) are built with react-native.

Lets remember that definitely React has been the most popular when it comes to English frontend and full stack communities in 2016. It is also becoming a good choice for native JavaScript mobile and even desktop apps. React is fairly simple to understand. Angular is not so simple and code setup takes time. Also, Angular is way bigger, causing longer load times and performance issues on mobiles.

So, what I conclude that you should use Angular if you work at Google, if you love TypeScript, if you love object-orientated-programming (OOP), or if you work in a large team where there are guides, collaborators, scalability issues. You should use React if you work at Facebook, if you like flexibility, if you love big ecosystems and you like choosing among dozens of packages, or if you love JS & the “everything-is-Javascript-approach”.

Cheers ;)
Mohd Anwar Jamal Faiz

No comments:

Post a Comment