Code Comparison: React vs Angular

Shriram — Sun, 16 Apr 2023 09:54:41 +0000

In this blog, I would like to compare and contrast two of the most popular ways to develop UI using JavaScript out there: React and Angular. I started web development using React three years ago and it was my go-to framework for building web apps. However, I had to learn and build apps using Angular for work. While there are a lot of articles out there for choosing a suitable one of these two for building your applications, I would like to compare them syntactically, which would be helpful for developers switching to Angular after learning React and vice versa. We will discuss the following key paradigms in this blog.

Writing markup
Dynamic markups
Sharing data between parent and child
Lifecycle management
Event handling

Writing markup

One of the key differences between React and Angular is the way HTML markup is written. In React, markup and logic are coupled in units called Components. React uses JSX, an extension to JavaScript, which can contain HTML markup and the associated rendering logic together.

export default function HelloWorld(){
    let name = "Arthur";

    return(
        <h1 className="heading">Welcome, {name}</h1>
    )
}
//Home.jsx

In Angular, markup and logic are written in separate files and there is a clearly defined separation of concern. Angular uses Typescript instead of JavaScript, where Typescript is a superset of JavaScript with optional static typing.

export class HelloWorldComponent {
    name:string="Arthur";
    constructor() { }
}
//home.component.ts

<h1 class="heading">Welcome, {{name}}</h1>
<!--home.component.html-->

Dynamic markups

The ability to render markups conditionally to show desired elements in the HTML layout and hide the remaining based on criteria defined in JavaScript code is necessary to create modern web applications. Markups must also be created dynamically in a loop to keep the html code dry. There may be many different ways to generate a desired markup in any given framework, and I have explored only one such way in the example below.

In React, for conditional rendering, the desired markup may be stored as jsx in a variable using the ternary operator. A function can also be written to return the desired jsx using the commonly used If…else condition. For looping over an array and generating markup, map function is commonly used.

export default function Home(){
    let name = "Arthur";
    let isSignedIn=true;
    let products=['Macbook Air','Ipad Air','Iphone SE'];
    const homeJSX=isSignedIn?(
        <div>
            <h1>Welcome, {name}</h1>
            <h2>Products</h2>
            <ul>
                {products.map((product)=><li key={product}>{product}</li>)}
            </ul>
        </div>
    ):(
        <h1>You are not signed in</h1>
    );

    return(
        <div>
            {homeJSX}
        </div>
    );
}
//Home.jsx

Angular takes a different approach when it comes to dynamic rendering, and it has built-in structural directives such as NgIf and NgFor. In Angular, the markup generated by React can be generated as follows.

export class HomeComponent {
    name:string="Arthur";
    isSignedIn:boolean=true;
    products:Array<string>=['Macbook Air','Ipad Air','Iphone SE']
  constructor() { }
}
//home.component.ts

<div>
    <div *ngIf="isSignedIn; else elseBlock">
        <h1>Welcome to the application</h1>
        <h2>Products</h2>
        <ul>
            <li *ngFor="let product of products">{{product}}</li>
        </ul>
    </div>
    <ng-template #elseBlock><h1>You are not signed in</h1></ng-template>
</div>
<!--home.component.html-->

Sharing data between parent and child

In React and Angular, parents and children can share data with each other using props. While the data flow from parent to child is straightforward by passing props to the child component, data flow from child to parent is achieved by passing a parent function that stores the data as a prop to the child. One such implementation in React will follow.

export default function Home(){
    const [count, setCount]=useState(0);

    return(
        <Child count={count} setCount={setCount}/>
    );
}
//Home.jsx

export default function Child({count,setCount}){

    return(
        <div>
            <input type="number" value={count} onChange={(e)=>setCount(e.target.value)} />
        </div>
    );
}
//Child.jsx

Angular provides input and output decorators that enable a child component to interact with its parent. The above data flow in React can be implemented in Angular as follows.

export class HomeComponent {
    count!:number;
  constructor() { }

    setCount(newCount:number){
        this.count=newCount;
    }
}
//home.component.ts

<div>
    <app-child [count]="count" (setCount)="setCount($event)"></app-child>
</div>
<!--home.component.html-->

export class ChildComponent {
    @Input() count!:number;
    @Output() setCount= new EventEmitter<number>();
  constructor() { }

}
//child.component.ts

<div>
    <input type="number" [value]="count" (change)="this.setCount.emit($event.target.value)" />
</div>
<!--child.component.html-->

Lifecycle management

Lifecycle management gives developers control over code to be executed during the creation, updation and deletion of a component. React uses several hooks to handle the lifecycle with the useEffect hook being the preferred way to handle common scenarios.

export default function Home({count}){

    useEffect(()=>{
        console.log("Component created");

        return () => {
      console.log('Component deleted');
    };
    },[]);

    useEffect(()=>{
        console.log("Count changed");
    },[count]);

}
//Home.jsx

Angular provides different hooks for lifecycle management. ngOnInit, ngOnChanges and ngOnDestroy are the most commonly used hooks. The above lifecycle behaviour in React can be implemented in Angular as follows.

export class HomeComponent {
    @Input() count!:number;

  constructor() { }

    ngOnInit(){
        console.log("Component created");
    }

    ngOnChanges(change:SimpleChanges){
        if(change["count"]){
            console.log("Count changed");
        }
    }

    ngOnDestroy(){
        console.log("Component deleted");
    }

}
//home.component.ts

Event handling

User interaction is critical for any web application and the associated events such as click, keypress has to be handled by the application. React has its synthetic events which are wrapper functions over native events implemented by browsers to provide cross-browser uniformity. One such event-handling scenario is discussed here.

export default function Home(){
    handleKeyDown=(event)=>{
        console.log("You pressed: ",event.key);
    }

    return(
        <div>
            <input onKeyDown={handleKeyDown}/>
        </div>
    )
}
//Home.jsx

In Angular, we have to create event bindings as follows to listen and respond to events.

export class HomeComponent {
  constructor() { }

    handleKeyDown(event){
        console.log('You pressed: ',event.key);
    }
}
//home.component.ts

<div>
    <input (keydown)='handleKeyDown($event)'/>
</div>
<!--home.component.html-->

We did a code comparison of the most common use cases of React and Angular. Both are amazing library/framework for creating a frontend application. There are other differences between them part from the ones mentioned here, which we can discuss in a different blog. Thank you for reading. Cheers!

Fixed Navbar using Chakra UI

Shriram — Sun, 24 Oct 2021 18:23:04 +0000

Chakra UI is a CSS-In-Js library that makes it really easy for React developers to code UI for their applications. It is easy to develop most of the common UI components with Chakra UI however it does get tricky sometimes.

One such scenario is creating a top fixed nav bar that enables users to access navigations in the header, while scrolling pages in the application that are longer than the viewport height.

Let's take a look at the steps to build one such fixed nav bar using Chakra UI.

Step 1

Firstly, we need to fix the nav bar at the top and make sure that it is removed from the regular document flow. If not, the header will disappear on scroll just like any normal element. To achieve this we can use position property.

The rest of the application will now overwrite the header as it
is not available in the document's flow.



<Flex as="header" position="fixed" w="100%">
  ...
</Flex>

Step 2

Let's add a top margin to the div that contains the rest of the document so that the application content starts after the header in the un-scrolled state. I have used Chakra UI components such as Flex for the header and Container for the rest of the application but any layout component can be used instead.



<>
 <Flex as="header" position="fixed" w="100%">
  ...
 </Flex>
 <Container as="main" mt="20">
  ...
 </Container>
</>

Note: The top margin value depends on the height of elements in the header.

Step 3

Next we can focus on making the nav bar stand out from rest of the page. For this we need to modify it's z-index to a value greater than other components in the application.
Note: A rational z-index value say 200 should do it for most use cases.

Step 4

Lastly, we need to make sure that the navbar is painted over any underlying component on scroll. There's two ways to achieve this.

Type 1

You can use an opaque background color for the header, which will hide the underlying elements completely on scroll. The final code for header, in this case, is as follows.



<>
 <Flex as="header" position="fixed" backgroundColor="white" 
  w="100%">
  ...
 </Flex>
 <Container as="main" mt="20">
  ...
 </Container>
</>

The final image of the header using the first approach is as follows.

Type 2

It is possible for the header to apply a blur effect to the underlying content on scroll, instead of hiding it completely. This can be achieved with the help of backdrop-filter and a translucent background color to the header like so.



<>
 <Flex as="header" position="fixed" backgroundColor="rgba(255, 
 255, 255, 0.8)" backdropFilter="saturate(180%) blur(5px)" 
 w="100%">
  ...
 </Flex>
 <Container as="main" mt="20">
  ...
 </Container>
</>

Disclaimer: I found out about the above approach through this website through induction.

Note: backdrop-filter property is not compatible with IE and Firefox at the time of writing this article. Hence do check out the Browser Compatibility section of the property in mdn docs before using it in production.

The final image of the header using the second approach is as follows.

The dark version of the above header is as follows.

That's it. We have created a top fixed nav bar using Chakra UI.

Thank you for reading and do follow me for more such articles.

Forem: Shriram