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…