A progressive web application is basically a website built using modern web technologies, but acts and feels like a normal app.

Why Progressive Web Apps

Progressive Web Apps have three key features that allows to provide better functionality and user experience for users around the world.

They make use of efficient utilization of disk and efficient utilization of network, and they don’t require too much installation steps, by just one click you have PWA installed quickly in your phone. By using Service workers we can accomplish all three of these things.

Service worker allow us to dynamically cache assets to user’s device so we…

service worker is a script that your browser runs in the background, separate from a web page, opening the door to features that don’t need a web page or user interaction.

Why Should I Use ServiceWorker

There are three main situations where the service will helpful Offline applications, Performance and Notifications.

Offline Applications

To build an offline application either we can use caching headers or app cache.

Caching headers allows you to how long the browser should hold content. …

Avoid unnecessary Rendering With ShouldComponentUpdate

When updates happen, React virtual DOM can determine the changes by diffing the original DOM with the re-computed one. React does wonders by maintaining a virtual DOM representation to avoid expensive DOM operations.

The maintenance of that virtual DOM can also be expensive. Imagine a very large, complicated render tree. If you update the props of any node, React needs to recompute the render tree from that node all the way down to the leaves, where it finally does its virtual DOM comparisons.

Fortunately, React provides a mechanism for avoiding this, namely shouldComponentUpdate

By default

shouldComponentUpdate(nextProps, nextState) {
return true…

In fact, these tools are not required to use React and but in order to get the most out of the features of ES6, JSX and bundling, we need them. In this blog post, we are going to see how to setup a React development environment.

Let’s start from scratch

Create a new folder ‘react-hello-world’ and initialize it with npm.

mkdir react
cd react
npm init

Installing and Configuring Webpack

Webpack is a module bundler which takes modules with dependencies and generates static assets by bundling them together based on some configuration.

Let’s start with installing webpack using npm

npm i webpack -S

Webpack requires some configuration settings…

Naga Durga

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