DEV Community: Vinay Krishnan

Progressive Web Apps : An introduction

Vinay Krishnan — Mon, 09 Jan 2023 03:44:12 +0000

The core idea behind building a PWA is to deliver the best user experience for normal web applications across all devices. When we access web apps through a browser, the overall experience never catches up with that offered by a native application. Hence, with the help of the available open web technologies, PWAs provide an augmented web experience for users who use the most modern version of their browsers on par with the OS dependent applications like android, iOS or windows.

What makes it so cool…

It can be accessed from any device having modern browsers.
It can be visited, shared and bookmarked like a normal website.
It works offline.
It can be installed just like any other native app with home screen shortcuts.
It can handle push notifications.
It can access the hardware features of the device like camera, Bluetooth etc.
While developing native apps, we need to maintain a single codebase for each platform but developing PWA demands only a single codebase. Hence, it reduces the maintainability.
Native apps constantly remind users of new updates. While PWAs automatically updates the content in the background with a simple page refresh.
By applying proper SEO techniques, PWAs can be indexed by search engines and hence can widen the app’s visibility.
Compared to native apps, the time required for developing PWAs is very less. Hence, it reduces the developmental cost by large folds.

Relevance

Pinterest’s website was old and had poor web performance. From analytics, they realized the difficulty in elevating the user base especially as the number of unauthenticated web users were large. Hence, after 3 months they rebuilt the existing web app using React and converted into a PWA which saw a massive growth in their business. They were also successful in reducing the bundle size of the web app which led to a drastic change in the CPU performance as well.

As a result, the time spent by users on the platform increased by 40% and the revenue generated by advertisements shot up to 44%.

Building blocks of a PWA

Responsive : Since PWA offers cross device compatibility, it must be responsive across all devices.
Service worker : This is a script file that asynchronously runs tasks in the background without compromising on the page performance.
HTTPS : since PWA requires a service worker, it must be hosted from HTTPS endpoint.
Manifest : This is a json file where we can include all the metadata associated with our app.

Let’s dig a little deeper…

Service worker

The service worker is responsible for ensuring that the PWA is reliable and independent of the network status.

It can access the cache from the client side and can store data such as static assets that don't need to be fetched over and over again like stylesheets, html, images etc. This enables the PWA to load only the necessary data during offline mode. It can thereby reduce the page loading latency and can improve the overall performance as well.

We can also enable the service worker to listen for events that occur during network changes and can serve, modify or intercept the network requests within the application in a dynamic manner.

In short, the two main features of a PWA such as the one time installation and caching is done using the service worker script. It can also be used to handle push notifications when the user is not using the website.

HTTPS

PWAs must be served with HTTPS protocol because of the following reasons :

Service worker demands an HTTPS connection.
Secures privacy of the user
Assures the authenticity of the content

Manifest file

This is a json file that contains all the necessary metadata regarding the PWA. This file also makes the PWA installable across devices. This metadata includes the title of our app, theme color, manner in which it should be displayed, adding logos etc. Once we have created the manifest.json file, we can link it in the head tag of our html file.

Summary

To sum up, PWAs have shortened the gap between web apps and native apps. Without a doubt, we can say that PWAs are the future of web apps. Now that many companies across the world are converting their web apps to PWAs assures the fact that it is going to be a path breaker in the software industry.

3 ways to load a script file

Vinay Krishnan — Sun, 10 Apr 2022 12:28:19 +0000

There are 3 ways to add script files in our HTML page.

Using normal script tags without any attributes.
Using async keyword.
Using defer keyword.

In all of the above 3 cases, the script tags are placed inside the <head> of the HTML.

To start off, let’s create a boilerplate HTML code with a button inside the <body>.
Next, create a script file (say one.js) and link the external script on the <head> of HTML.

Inside the script file one.js,

Create a function (say display)
Inside the function add a console.log(“hello world”)
Declare a querySelector to access the <button> from the DOM.
Assign that to a variable (say button) and log it onto the console.
Now, try to modify the innerText of that button.
Last, call the function on top of the script.

Now, in the console we get the following error.

Why did we get the error?

Browser parses the HTML from top to bottom. Here, we have declared our script file on the <head> of HTML. When the parser hits the script tag, the HTML parsing is stopped. The control goes to the script file and the function gets invoked. After the console log gets printed, when it tries to access the button from the DOM, it fails to find it as it is still not rendered yet. Hence, it displays null. And the line for modifying the innerText also throws an error eventually.
In short, the script files block the rendering of the HTML because the parsing happens sequentially.

How to get rid of this error?

Place the script tag at the bottom of the HTML. Now, the script file is accessed and executed at the end after the browser has rendered the entire necessary HTML.

Using async attribute

Place the script tag at the head of the HTML itself. But, now add an attribute named ‘async’ along with the script tag.

Here, we don’t get any errors. This is because adding the async keyword asynchronously fetches the script files as and when the HTML parsing happens. But the HTML parsing resumes only after the script files have finished executing. We cannot predict the speed of execution of script files and rendering of HTML once we add the async keyword.

So when should we avoid using it?

When we want to load multiple script files that have dependency on each other, it might be better if we stay away from using async keywords because the order of execution of scripts is not guaranteed.

So when should we use it?

When we want to load a script which is independent from the rest of the script files added, its okay to use async because the order of execution does not matter.

Using the defer keyword

Place the script tag at the head of the HTML itself. But, now add an attribute named ‘defer’ along with the script tag.

This behaves exactly similar to the situation where we embed the script tag at the bottom of the HTML page.

When defer keyword is used, the script files are fetched parallely with the HTML parsing. And the scripts will be executed only when the HTML parsing is finished.

When should we use it?

We can use it when we want to add multiple script files that are dependent on each other. If we have the habit of embedding script tags at the head section of the HTML page, it would be better to use defer keyword.

Move zeroes

Vinay Krishnan — Sat, 26 Mar 2022 17:38:47 +0000

Leetcode problem : https://leetcode.com/problems/move-zeroes/

Brute force solution:

We can solve this question using two for loops.

Initialize a variable (say count) equal to 0.
Start a for loop from 0 to array.length
If we come across a non-zero element,
- Insert the current element to index = count of the array.
- Increment count.
Start the second loop from count to array.length
In the body, keep inserting 0 to each current location as it iterates.
Return array

Optimized solution :

Initialize a variable (say count) equal to 0.
Start a for loop from 0 to array.length
If we come across a non-zero element,
- Swap the current element with the element at index = count of the array.
- Increment count.
Return array

Two Sum

Vinay Krishnan — Sat, 26 Mar 2022 11:01:27 +0000

Leetcode problem : https://leetcode.com/problems/two-sum/

Brute force solution :

Fix the first pointer to the first element of the array.
We assume that this element is the first number in our output pair.
Now to find the next number of the pair, we can take the difference between the target and the element pointed by the first pointer (first element).
Now to find the location of the second element, take a second pointer and iterate from the second index of the array till its end.
If found, we can return the index of both the elements (values of both the pointers).
Else, we increment the first pointer and take its difference with the target.
Then we iterate the second pointer from the third index till the end of the array.
This can be implemented using two for loops and hence takes O(n^2).

Optimized solution:

We can use an object (or hash map). Why? Because we can fetch an item from objects at O(n) complexity which is more efficient.
Our aim is to implement this solution in a single for loop.

Intuition :

As we iterate through each element in the array,

We need to keep track of the elements that we previously iterated. Hence, we can store the previous elements along with their indices in an object.
We are simultaneously calculating the difference of that current element with the target. We then check whether the object(acts like a store) already has that difference (which is the second number in the output pair).
If yes, return the value corresponding to the difference in the object (first index) and the current pointer (second index) from the loop as an array.
If not found, store the current element and the pointer value(which is its index) as a key value pair in the object. As it had become a part of the previously tracked elements.