Angular team are doing great in terms of reducing web bundle size and improving the application rendering time on the browser.

In Angular 11 also they have done all these great stuff but this time they also added HMR (Hot Module Replacement) feature which will now help everyone to save lots of development time.

This feature you can utilized using angular cli only.

What is the problem for now ?

When we write code in Angular and save then the whole code gets rebuild and whole view gets repainted.

That means Angular reloads JS/HTML/CSS even for every small change which frustrate developer.

Also since application gets reloaded…


A big sized javascript bundle is never good for the user experience. A major problem being the download time as it increases the wait time for the application to get ready.

The thing is, it’s easier than ever to add third party modules and tools to our projects, but this can come with a huge performance tradeoff.

When the project is big then it becomes even more difficult to analyze the bundle (which is also having many third part libraries) and further optimize it.

This article will help to understand how can we used webpack bundle analyzer with Angular to…


npm is the default package manager for Node.js projects.

You must have used either npm install or npm i to install dependencies if the project is npm based.

Now npm v6 has release new command : npm ci

npm ci command is similar to npm install, except it's meant to be used in automated environments such as test platforms, continuous integration (ci), and deployment (cd)-- or any situation where you want to make sure you're doing a clean install of your dependencies.

npm ci will be significantly faster when:

  • There is a package-lock.json or npm-shrinkwrap.json file.
  • The node_modules folder is…


What is Web Worker ?

Javascript is designed to run in a single threaded environment that means multiple scripts can’t be run at the same time.

Consider a situation where you need to handle multiple things like transform large amount of API data, manipulate DOM etc. in that cases Javascript will hang your web page where CPU utilization is very high.

To solve this critical issue Web Worker came into picture.

Web Worker is an asynchronous system for web pages that allows execution of task in the background, independently from main thread and website UI.

Let’s see the issue

In this example Javascript will go into big loop and…


User always enjoy faster and responsive user interface (UI). Unwanted page re-rendering is the key factor which makes web pages slower and less responsive which users never like.

To improve web page performance, React offers React.memo() HOC (high order component).

When React.memo() wraps a component, React memorizes the rendered output and then it skips the unwanted rendering.

In this article, we will see an example of unnecessary re-rendering and how then we can fix that using React.memo()

Below is an example of unwanted user interface re-rendering:


Many interesting features which we were waiting for, are now the part of ES2020/ES11 specifications.

Its time to understand those features and try to adopt them in our day to day coding activities.

1. Nullish Coalescing (??)

Earlier we had the “||” operator which was used to check falsey values and if one value is falsey then assign the other value.

But falsey value can be null or undefined or false or ‘’ or 0.

There was no operator which can be used to check nullish values.

ES2020 now added “??” operator to solve this problem. Now this operator can be used to check…


Making a component performance efficient irrespective which UI technology (React, Angular etc.) is used is always desired and every software engineer would like to do all the time.

In React, while creating a component and start binding a method to component’s template looks very easy but sometimes it could be very costly if method binding best technique is not used.

Let’s see what could be the issue if method binding is done with out implementing the best technique and how we could improve it.

In React, since a component can be created using Class or Functional approach so we will…


The more we add features to our software the more it grows in complexity. And as it grows in complexity, more time is required to manually test it. In fact, as we add new features to our applications, the time required to manually test them increases exponentially!
To prevent that we could take advantage of automated testing as it is the best way to increase the effectiveness, efficiency, and coverage of our applications testing.

In this article, we will explore testing components and we will cover the following:

  • What is a unit test?
  • Why write unit tests?
  • How to setup…


The biggest challenge in making any web application (SPA) is that how we can reduce the page loading time?

The larger application bundle size will take large time to load the application.

One solution is let’s we make lazy components which would not be the part of main bundle while it will be in a separate bundle and component bundle will only be loaded when that component is imported.

This feature can be implemented using dynamic import feature of webpack. And soon ECMAScript is going to make it as a javascript language standards as well.

Frameworks such as React and…


Do we need state management in every Angular application? Maybe not always, so how do we implement state management elegantly for the applications in which we do need it? NgRx is one of the libraries used for application state management. It is a Redux implementation for Angular.

First, let’s look at the problem we are trying to solve, and then understand the concepts behind the NgRx, and, finally, we’ll jump into the coding.

Want to read this story later? Save it in Journal.

Application State

What is application state? Theoretically, it is the entire memory of the application, but, typically, it is…

Suneet Bansal

Coder

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store