Mobile apps vs Mobile web: Progressive apps

Recently observed trends give us some hints that the leading names in the world of web as well as mobile technologies have started to push web a step up as they have unlocked it’s true potential. Perhaps, the mighty titans like Google, Apple and Microsoft have realized the amount of hitches the app developers suffer from and hits the business takes to keep up with mobile apps, has reached an alarming figure. So they are on to developing solutions for the future, and once again they are riding on web.

With that being said, we look forward to what Google is calling “progressive apps”. Progressive apps or progressive web apps use the modern capabilities of the web to deliver a mobile app like user experience. Isn’t that wonderful? An application that is running inside a web browser and has aesthetics of a mobile app, free of platform dependencies and all the problems discussed above. We were all aware of the “mobile” capabilities of the web, but just weren’t accepting it as it should be… working inside a web browser. There is plenty of evidence to support the same as we have been using web technologies to produce HTML5 hybrid mobile apps using platforms like Cordova. Frameworks like Phonegap and Ionic exploit the potential of web very well. Here’s are the salient features of progressive web apps:

• Reliable – Load almost instantly, even in uncertain network conditions

• Fast – Respond quickly to user interactions with silky smooth animation which is soothing to both eyes and hands, scrolling is a lot less sluggish than hybrid apps

• Engaging – Provide immersive native app like user experience

To understand the crux of awesomeness that progressive apps bring to the table, it’s important to dive into the concepts and APIs that work behind the scenes.

• Service worker – It’s like that silent and shy co-worker in your office who does the actual job. A service worker is a script that the browser runs in the background, essentially written using JavaScript, separate from the web page. It is responsible for all the rich offline experiences, features like background sync cycle and push notifications. The service worker installs in your web browser when you access the app for the first time.

• Background sync – Background sync is a new web API that allows deferring actions until the user has stable connectivity. This promotes developing an offline experience where a user does not feel a hick while on the go due to bad connectivity.

•Web Push Notifications – One thing that was missing from the web sometime ago was push notification which has been an important feature of mobile apps. Modern browsers use the Push API and Notification API which have opened a whole new set of possibilities for you to re-engage with your users. Users can opt in and out from timely updates from desired apps.

• Web App Manifest – Another feature of a typical Android app has been ported to web to work the progressive apps. The Web App Manifest is a JSON configuration file that gives the developers, the control over appearance behavior of the app for different users.

All these features cover mobile app aspects of an app, contributing to a solution that packs the best of both worlds, it is as smart and performant as a mobile app with development and support being simple, platform independent and hence cost effective like a website.

While the stage is all set, and carpets rolled out, it’s time we greet and welcome the celebs showing up front. We now talk about libraries and frameworks that promote development of progressive apps.

1. Polymer
Polymer or Polymer.js is UI library that provides a rich set of feature for crafting Polyfill (downloadable JavaScript which provides features that are not currently supported by browsers) based custom web components. These components work like standard DOM elements which ensures seamless support across different web browsers. Polymer components are not only reusable but also highly customizable as the accept configurable properties or attributes for actions and styling. With Polymer you can create a complex app which is composed of components, each of which is reusable and independently manageable.

2. React
Since the Facebook introduced a cool library by the name “React”, it has been rocking the chart of favorite open-source UI library of many web and mobile developers. React.js soon became a part of the technology stacks of many successful applications including Facebook itself, Instagram, Netflix, Airbnb, Feedly, Flipkart and the list goes on. React.js also has a sibling called React Native that allows cross-platform native mobile app development, which is music to many ears but it has some shortcomings and we’ll keep it out of the discussion. React preaches the component paradigm for building effective and performant solutions, while encouraging high code reuse and maintainability. React uses JSX, a superset of JavaScript to tightly couple the view and the actions. Pair React.js with an architecture like Redux or Relay, and you can expect a fast and responsive application. React community is strengthening and growing at remarkable rate.

3. Angular 2.0
The reputation of AngularJS precedes itself. Angular needs no introduction. It is perhaps the world’s favorite MVC framework for building single-page web application. Angular 2.0 is quite different from its predecessor in several ways. Like React, Angular 2.0 follows the component paradigm, once again the focus is on maximising the code reuse, not only within an app but also across different apps. Whereas React.js is only a UI library, Angular 2.0 is a completely mature framework, it offers high-level APIs for almost all features of a web app could have, making development effortless. Angular 2.0 has adopted mobile first strategy which makes it an attractive package for developing progressive web apps.

4. Material Design
Material design can simply be called “the new Bootstrap”. Similar to Bootstrap, a popular UI Library with pre-styled components using CSS3 and JavaScript, Google’s Material Design brings ready-to-use components to your app. Material Design as set of components is much more diverse that Bootstrap and Material components are a lot more vibrant. You get toggle switches, navigation drawers, drop-down lists, datepicker, themes and many more awesome components, all of which are customizable and programmable. The default styles of Material components for React and Angular match those of native Android equivalents. This simply means good news for those who try to imitate native Android APIs using CSS. You bet, there are many!

Spoiler alert! Apple, known for it’s remarkable mobile-centric innovations, is in pursuit to join the “web rising” with things like Swift 3.0. The latest version of Apple’s Swift, a programming language based out of Objective C for making iOS and Mac apps, looks just like a flavor of ECMAScript 6, a JavaScript standardization. Pretty much like what Microsoft did with Typescript. Clearly, it appears that Apple is preparing to adapt to web too, and why not.

To conclude, I would say that while kicking off a new venture, you would want to make sure that you are reaching the largest number of potential customers or users possible. Some might be sitting in front of a bulky desktop, while some equipped with really smart tech of different sorts. Web reaches all. Not much time ago, when mobile apps dominated, Myntra, one of the top fashion portals in India, went app only. Myntra soon had to ditch the app-only strategy as there were repercussions. At present date, you need to have both mobile app and web, although mobile apps are not so dominant as once they were. It’s a problem that will adhere to your business for some time, until the end users accept the transformation of their REST clients. However, you can make a bold move by investing a little more time and few more dimes to make your web app a progressive web app and make sure that your business stays in business.