React v/s Angular

 

Unless you’ve been living under a rock, you would have heard of two of the trending JS libraries/ frameworks – Angular and React.js. Having worked on both React and Angular, I can without doubt, be called as Jack of all trades… 

A step-by-step comparison of some of them may help you in judging on which path to choose, and start learning, if it interests you, and if you already know either of them, you can relate to the differences and similarities between the two. Like every programming language, frameworks and libraries have their own highly debatable lists of pros and cons!

In this post, you will get to read about how both these frameworks are different and same. First things first, what are Angular and React???

What is Angular?

Angular is a JavaScript framework written in TypeScript. It was developed and is maintained by Google, and is described as a “Superheroic JavaScript MVWFramework” on Angular’s webpage. Angular (version 2 and above), originally released in September 2016, is a complete rewrite of AngularJS (released in October 2010). Angular 9 is the latest version of Angular (at the time of writing this.

What is React.js?

React is a JavaScript library developed and maintained by Facebook. It was released in March 2013 and is described as “a JavaScript library for building user interfaces”.

Developed and maintained by Facebook, React.js is a popular JavaScript library that focuses on building and rendering components for a web page. With React.js, everything is built in JavaScript and I recommend using it with JSX, a JavaScript syntax extension, that “describes what the UI should look like” in your JavaScript code. 

Unlike Angular, it’s not a complete suite of tools, React.js is comprised of tools that help you build components to be dropped into a page. This allows React.js to be lean, but it does require developers to use additional libraries to include functionalities that React.js lacks. For example, routing is not included in React.js, so that would have to be added manually through third-party tools.

How are they similar?

Both React and Angular are both component-based. A component receives an input, and after some internal logic returns a rendered UI template (a sign-in form or a table for example) as output. Components should be easy to reuse within other components or even in other projects. For example, you could have a sign-in component consisting of two text inputs (user & password) and a “Login” button. This component may have various properties and underlying logic, but it should be generalized so that you can reuse the component with different data on another page or in another app.

How are they different?

Let’s compare these JavaScript frameworks and which might make the most sense for your project based on five criteria:

• Architecture of React vs. Angular

• TypeScript vs JavaScript/Flow

• Testing in React vs. Angular

• Learning Curve of React vs. Angular

• Bundle size

Architecture of React vs. Angular

Angular and React have many similarities and many differences. One of them is that Angular is a full-fledged MVC framework and React is merely a JavaScript Library (just the view). Let me elaborate. Angular is considered a framework because it offers strong opinions as to how your application should be structured. It also has much more functionality “out-of-the-box”. You don’t need to decide which routing libraries to use or other such considerations – you can just start coding. However, a drawback is that you have less flexibility – you must use what Angular provides.

Angular provides the following “out of the box”:

• Templates, based on an extended version of HTML

• XSS protection

• Dependency injection

• Ajax requests by @angular/HTTP

• Routing, provided by @angular/router

• Component CSS encapsulation

• Utilities for unit-testing components.

• @angular/forms for building forms

React, on the other hand, gives you much more freedom. It only provides the “view” in MVC – you need to solve the M and C on your own. Due to this, you can choose any of your own libraries as you see fit. You will end up using many independent, fast-moving libraries. Because of this, you will need to take care of the corresponding updates and migrations by yourself.

React provides the following “out of the box”:

• Instead of classic templates, it has JSX, an XML-like language built on top of JavaScript

• XSS protection

• No dependency injection

• Fetch for Ajax requests

• Utilities for unit-testing components

TypeScript vs JavaScript/Flow

React uses JavaScript, a dynamically-typed language (which means you don’t have to define the variable’s type). Because many developers already know and love JavaScript, this can be seen as a pro.

Conversely, if you want to use Angular you’ll need to get comfortable with TypeScript. which is a statically typed language.

Testing in React vs. Angular

Jest is used by Facebook to tests its React code. It is included in every React project and requires zero configuration to use. It also includes a powerful mocking library. Many times Jest is used in combination with Enzyme.

Jasmine is a testing framework that can be used in Angular. Karma and Mocha are the test runners that support running Jasmine test cases.

Learning Curve of React vs. Angular

An important decision you must make in choosing a new technology is its learning curve. The answer depends on your previous experience and familiarity with the related concepts. However, we can still try to assess the number of new things you’ll need to learn before you get started:

React:

The first thing you’ll learn in React is JSX. It may seem awkward to write at first, but it doesn’t add much complexity. You’ll also need to learn how to write components, manage internal state, and use props for configuration. You don’t need to learn any new logical structures or loops since all of this is plain JavaScript.

Once you’re done learning the basics, you’ll need to learn a routing library (since React doesn’t come with one). I recommend react router v4. Next comes state management with Redux or MobX. I’ve already touched upon this subject, so I’ll skip this. Once you’ve learned the basics, a routing library, and state management library, you’re ready to start building apps!

Angular:

Angular has many topics to learn, starting from basic ones such as directives, modules, decorators, components, services, dependency injection, pipes, and templates. After that, there are more advanced topics such as change detection, zones, AoT compilation, and Rx.js.

The entry barrier for Angular is clearly higher than for React. The sheer number of new concepts is confusing to newcomers. And even after you’ve started, the experience might be a bit rough since you need to keep in mind things like Rx.js subscription management and change detection performance.

It may seem like React has a lower barrier for entry, and I would most certainly have to agree. However, that doesn’t mean that React is “better”. I encourage you to try both React and Angular to see which one you personally prefer.

Bundle size

• Angular: 1200 KB

• React: 300 KB

When using gzip, the sizes go down to 275kb and 127kb respectively.

Conclusion

Choosing the right Javascript frameworks is a real confusion. Especially when you have a lot of options that are super resourceful and capable of facilitating the project requirements. But choosing the one for the right set of projects demands knowledge of several critical aspects. 

Reasons for Choosing Angular:

1. Is a full framework

2. Has a Regular DOM, which renders updates slower than React’s Virtual DOM

3. The rendered JavaScript and HTML maintains a physical separation

4. Utilizes Components: emerging web components standard

5. Data Binding: two-way

6. Testing:  Jasmine & Mocha

7. Learning Curve is higher, but once you understand it you have an entire MVC framework

8. Scalability: easy to scale

9. Popularity: dropped since AngularJS (Angular 1)

10. Open source: GitHub stars: 40,963 / Contributors: 732 / Issue: 2,162

11. Size: larger, resulting in longer load times and performance on mobile

12. Inbuilt features like Rxjs, AngularCLI which are more powerful to create channels of exchanging data and independent handling of events. 

13. It overall optimizes the developers’ efforts and saving lines of code by parallelly running the components 

14. Increases the overall performance 

15. Rapid rendering of server-side, supporting the views that lack browser-side rendering 

Reasons for Choosing React:

1. Just a small view library

2. Has a Virtual DOM, which renders updates faster than Angular’s Regular DOM

3. Uses JSX, which combines markup and logic in the same file (making components easier to read)

4. Data Binding: one-way

5. You Can use ES6/7 JavaScript, although you can use Typescript or Flow if you so choose

6. Mobile: React Native is faster than Angular’s solutions

7. Testing: Jest & Enzyme.

8. Scalability: is more testable, so also easy to scale

9. Popularity: has increased exponentially

10. Size: smaller than Angular, so a bit faster

11. Learning Curve is lower . Unlike Angular, developers have to integrate external entities for access specific functions of Reactjs and gain the fully interactive functionalities

12. It has state containers like Redux for faster development in scalable applications like using the dynamic elements and managing rendering 

13. Using the URL router library like ReactRouter