Evolution from Web Sites to Web Apps — PWA

This is not about any old story of Internet or Arpanet.

Everyone might have experienced a YouTube video buffering more than 20 minutes which now loads in just seconds and this article is still not about that.

As the technologies advance over time, the way of using technologies and people mindset also changes over time. This includes the change of mindset from local tea shop to CCD, feature phone to smart phone, cash payments to UPI/Paytm cash, backend server to server less architecture, monolithic to micro services. The change is inevitable and woaahh!! it is very fast.

Let’s talk about the journey of the web, not the dates and years of invention but what we see in our daily usage and what we felt in terms of user experience in web world. Yes, I call web technology as “Web World”

Introduction

The internet usage began with desktop users and now mobile users play a vital role. The web has grown well matured to satisfy mobile users. The approach and the way of thinking have been changed dramatically.

While the web was invented, it was just static HTML pages and let’s move on to next phases ignoring these old stories.

When considering a dynamic page, the beauty is how we manage the below

• view and data - show dynamic information (always latest).
• action - need to perform some action on it (like a purchase).

1. Server Side Pages

Views: With the initial introduction of server side programming like PHP, JSP and others, the dynamic information you need to show will be fetched from database every time, HTML pages are prepared on basis of some templates and those HTML responses are sent.

Actions: Even for performing actions, in case of web mail like opening, sending and deleting a mail requires the server to process but the HTML response of the next page will be sent back which makes the entire page to reload.

Example: If you’re a Gmail user, you might have seen “basic HTML” (initial) version of Gmail.

2. AJAX

Actions: With the introduction of AJAX concepts in browser side, the actions are requested as asynchronous API calls without reloading where the data for actions are sent and received as XML or in JSON format.

Views: The views (pages) are still generated by server based on some templates and sent as HTML responses.

Example: Every pages in WordPress are generated by server (HTML data) where in actions like “like” and “comment” are done as AJAX calls (xml/json data)

3. Single Page Apps (SPA)

Still the user needs to wait till the entire page to loads for every next page in a place where just the data differs.

Here comes the blooming concept of decoupling the view and the data, or in other words decoupling the front-end and back-end.

All the view templates and the front-end logic are bundled and loaded (cached) at the front-end on initial load. Bringing in the concept of AJAX all over the application, Front-End renders the required pages providing the required data over API calls. Navigating to any pages happens without any delay but waits just for data and not for the view. This saves the time a lot.

In short, most of the views are loaded initially and upon navigation just the data loads.

Example: Gmail Web App — navigating to inbox, sent items and others just waits for the data to load, page never reloads.

Frameworks: React.js, Angular, Vue, Ember.

You can find the frameworks used by most popular websites/web apps here

Single Page Apps (MBaaS)

The data are retrieved from back-end APIs. The technology has now shifted a little by providing Mobile Back-End as a Service which allows the Front-End to interact with the data source just by their using their sdk. A Front-End developer need to worry neither about server side programming nor the database used. One among the popular MBaaS provider is Firebase.

Example: Firepad like socrates.io, Firechat (Chat Applications)

4. Progressive Web App (PWA)

Actions are already asynchronous since the introduction of AJAX and now loading time of Views are solved by SPA. So whats next? The left over is the data part. You might have wondered, “whats there to improve in data part, we always need to fetch to get latest data”

Consider a scenario in a web app having pagination, you navigate from page 1 to page 2. When you navigate back to page 1, just think, why do we need to fetch again and wait for data that is visited just few seconds back. Makes sense right? See whats interesting here.

Here comes the Progressive Web App (PWA), that makes user feel the web app as a real mobile app. PWA is a new way to deliver amazing user experiences on the web, which loads the app instantly, regardless of the network state even in offline. This is achieved by using “Service Worker” a proxy that sits between your application code and network.

When your application hits a request for first time (say page 1 request), Service Worker decides whether to cache the data or not. Upon next time hitting the same request, the Service Worker decides whether to serve the cached response or to hit fresh request and serve response.

Example: Filpkart web app and more here at https://pwa.rocks

PWA is not just about Service Worker but more than what you think. For more information refer here.

The Journey in precise

Isn’t cool that you can browse and do a window shopping in a Flipkart Web App even in offline.

It’s not just the technology but purely the approach and the way of thinking that evolved the web from a site into a perfect app.