Angular vs/and React
JavaScript being the language of the web, has new frameworks and libraries developed frequently, take it or not there has always been an influence on web developers to be in the race to learn, innovate and contribute to this wonderful growing community.
If you are an Angular developer and want to explore React or vice versa, you are at the right place. We will be here using our knowledge of Angular or React, whichever you are comfortable with, to learn the equal other.
In this blog, we will take up a few fundamental concepts, and understand how Angular/React can be used to achieve them, through flowcharts/diagrams. Compare these flowcharts, derive a basic understanding about the idea that these JavaScript products are trying to promote, then, discover more, open an online IDE (codeSandbox etc,) start experimenting!
Angular is a framework, a complete solution in itself providing us an environment where we can jump in and start building our application, developed and maintained by Google.
React is a library, where you start raw and keep adding the tools as and when or how you need them, developed and maintained by Facebook.
1. Component
A typical angular application is made of modules, which act like containers to hold related code/functionality, a module in turn consists of components, services etc.
An angular application has at least one module. In a given module file we can declare components which are a part of that module or import/export components from other modules. So basically modules organise our application code and determine the scope of our components.
As shown an angular component usually consists of a typescript file where all the businesses logic goes, also taking a config object which defines the .html and .css files in its scope, on which the business logic is applied.
However, as shown below, a react component is simply a JS file and react uses a syntactic sugar JSX that allows us to write HTML code in our JS files. If you want to use one component in another just import the corresponding JS file that exports the component as a class or a simple function.
2. Parent child component communication
In both Angular and React we design web pages in terms of components which often have a parent child relation, communicating between these components is important.
Angular provides @Input() to pass data from parent to child as a simple property and data from child to parent is communicated via a @Output() event emitter, the diagram shows how a property ‘value’ is passed from parent to child and how a button click in child component triggers the ‘onClickHandler()’ method in the parent.
Where as react simply stores all the data exposed as properties/attributes by the parent component in a variable called ‘props’, the diagram shows how a child can access the parent data using props.
Child to parent communication is usually achieved by passing a call back method from the parent that the child will call when a user interaction happens, the diagram below also shows how on clicking a button in child the method ‘onClickHandler()’ is called in the parent.
3. Conditional DOM elements
Conditional DOM manipulation, which includes adding, removing, manipulating elements in the DOM is a very important feature in just any app.
Angular makes this very simple by providing us structural directives such as *ngIf , *ngFor etc, as shown, which when applied on the host element performs the necessary operations on the element itself and its descendants.
React on the other hand simply achieves this using JS, as shown below a simple ‘if’ can be performed using a ternary operator and an iterative loop can be achieved using JS array operators like map on the HTML elements. Again, this is possible because react allows us to write our HTML code with JS using JSX.
4. Data binding
Data binding is a method of exchanging the data between the view(HTML) and the data model.
Angular uses a two-way binding approach, this is easily made possible using the [(ngModel)] directive as shown, any change in the view is immediately updated in the data model and vice versa.
Where as, React follows a one-way approach, which means changes from the data model are immediately updated in the view using { } braces, while the changes from the view should be manually updated in the data model by using callbacks or state management libraries as shown below.
Of course there is more code in React compared to Angular for achieving two way data binding, but by doing this react provides us more control over our data, HTML here as you see in the above diagram can only raise events, any change in data model has to be done in a React component method, the main idea here is to have a single source of change and follow the changes as it happens in the component hierarchy, making the application less error prone and debugging easy.
5. State management
As our application grows, be it Angular or React, the components need an organised method to access and alter the data flow in the application, that is when state management becomes very important.
In Angular, components with parent-child relationship can communicate using @Input() @Output(), as discussed earlier. Service providers, NgRx stores are some of the other useful component communication methods available. Refer to state management options in Angular for a detailed explanation.
React components on the other hand can mainly use props or state features available internally to manage the component communication/state within the application. However, also check how Redux, a very popular and an efficient state management library, can be easily connected with React, to manage the complex state as the application grows.
Remember,
Having a knowledge on both of these JavaScript advancements, Angular and React, and adapting to the one which suits our requirement is what we should aim at doing. Where as, trying to conclude which one of these is an ultimate efficient JavaScript product, is a myth!
