Building exciting lightning fast Web Apps | The Why and How Guide to PWA.

Why ?

Why no to native ?

There were times when the world was crazy about Native apps. The excitement people use to have on having the best apps in there phone. Native apps provided developer the flexibility to reach the highest level of UI experience without comprising much on performance. Soon the apps got bulkier and people start loosing interest in downloading the apps or keeping up with them. A recent study showed that on an average a user installs 0 apps per month. That should not be surprising because you also have only the most frequently used apps. On top of it if you want to cover much larger audience you have to cater all platforms that means that long development and complicated DevOps. To make things worse, the requirement of app keeps changing and your features development can not keep up with user demands. So too much effort you spent on developing native app and not much engagement after-all can be demotivating.

Following are some other Con's of Native app development :

1. Takes download time and user can't see any preview before installation.
2. Longer Development time and huge learning curve for native frameworks.
3. Store listing requires different set of licensing, authentications and IDE + tools.
4. For starter apps low user base discourages users from downloading App.
5. Bug Fixing and new feature addition take too long development cycle to actually reach user as an update and most users don't even update apps frequently ( Especially in India).

But can web app match native apps ?

The absolute answer is Progressive Web Apps(PWA). They were made keeping in mind the promises of app and flexibility of web development.

This Site tells you the present capabilities of PWA.

On the downside web can be slow which is a nightmare and will loose lot of audience. According to Google 50 % users will leave your site if it doesn't load withing first 3 seconds.

The Solution to this is choosing the right web framework and good code practices.

How ?

How to setup PWA ?

Setting up PWA is not a daunting task at all. If you know some basic JavaScript, you are good to go. Also it doesn't depend upon the web framework you are working with. You just need to specify a manifest file and a service worker, that's it. My colleague at Twimbit Sidhant understood it very well and did a very good job, delivery us amazing results.

The web app manifest is a simple JSON file that tells the browser about your web application and how it should behave when 'installed' on the user's mobile device or desktop. Having a manifest is required by browser to show the Add to Home Screen prompt.

A typical manifest file includes information about the app name, icons it should use, the start_url it should start at when launched, and more.

A service worker, written in JavaScript, is like a client-side proxy and puts you in control of the cache and how to respond to resource requests. By pre-caching key resources you can eliminate the dependence on the network, ensuring an instant and reliable experience for your users.

This Guide tells how to create a PWA in 5 mins. You should definitely check it out.

How to make PWA behave like an App ?

1. Choosing the front-end framework -
   • Solution may vary from framework to framework. Most web framework these days come up with built in support for PWA. But it is preferred to go with light weight client side frameworks that results in greater performance and less server side rendering. Following are some popular options-
     1. ReactJS
     2. Angular
     3. Gatsby ( ReactJS based)
     4. VueJS
     5. Polymer
     6. AMP ❤️
     7. PWA + AMP (aka PWAMP) has a great advantage of being fast at first load and afterwards service worker caches the file in background. Also the learning curve with AMP is small so it makes a good choice for web app projects. (Do check my guide to AMP)
2. Keep the UX /UI feel like native but using few libraries -
   • As your app is hosted on web, you would want to avoid using too many libraries to add effect like swipes and animations. You should make efforts to make your UX/UI more close to native at the same time keeping fewer libraries that ensure performance with richness of fluidity ( I am also currently working on this)
3. Optimizing the cloud hosting and back-end architecture -
   • At the back-end also you need to take care that server response time is low and assets are being delivered at its best. This includes setting up a CDN, Compressing the assets, writing a good service worker, server side optimizations and other tweaks. ( Follow this complete 5 steps guide to cloud and hosting for web Apps.)

How to optimize and speed up?

To do this you can use the lighthouse tools that give a in-depth analysis of your PWA and tells everything you need to do in order to optimize your app.

Twimbit.com performance report ( frontend AMP + PWA , backend wordpress CMS, media hosted at S3 served using Cloudfront, Nginx Server and site content through Securi CDN

Ultimately, the better the score > lesser the load time > better User Experience

Conclusion

These question haunted my nights for a very long time. But I needed to be sure when I was responsible for leading tech team at Twimbit ( Our user app Twimbit.com ).

Following is a sample architecture for our web Apps.

I asked myself these questions and came up with quite good idea of developing web apps. There are many challenges on the way but as my coach says -

A good chef focuses on the process of cooking at very micro level, tries to perfect everything and the dish as outcome automatically becomes its best version. Ashish Passi

I will keep adding and updating this article as I get to know more and face more challenges. Contact me if you have other queries or ideas to make this project much better.

Here is the link to my original deck that I present at talk shows.