Progressive Web Apps —Introduction, Applications, Uses and thoughts / (Are native mobile apps irrelevant in 2019?) Also contains React Native VS Flutter
We’ve had a lot of innovation in the mobile application space in the past decade and there was an expected trend of users using more and more mobile applications and reducing their interaction with the web from a web browser. Time spent by users on their mobile phones soared and desktop / laptop use decreased very quickly. It was even forecasted that laptops will die and tabs will take over (which never actually happened). We now have mobile apps that do almost everything right from enabling you to control your home appliances to stalking people on the internet. Till about 2014 end, this was the trend, then something unexpected happened, users reached saturation, wherein they started limiting the number of applications they would download and keep only a few trusted ones (facebook, instagram, amazon etc.) The adoption of new applications became low, which is bad time and place to be in if you’re a new startup and revenues depend on downloads !
In 2015, one more thing happened, the developed markets and the urban markets in the developing nations saw a stagnated growth in usage and downloads, this meant that all the tech companies started turning their attention towards the emerging economies. The problem with emerging economies is — the users don’t have savvy phones with the latest android versions (we’re completely ignoring iOS as it doesn’t have any penetration in these regions simply due to the prohibitive price range), these users have something called as a “feature” phone and not a smart phone, these are phones with very low processing abilities. Another problem is the lack of fast internet connection in these regions, which is something required for the users to be able to access the play store and download heavy applications. The regions where 90% of the future business existed for the tech companies (the emerging markets), 90% of the applications weren’t relevant (they were either too big or required a lot of processing power hence raising incompatibility issues with the phones of the users). Since this is a tech article, we aren’t getting into the other problems such as language of the applications, we will only look at the problem and its solutions purely from a tech perspective.
For native applications, developers have used Android Studio for android and Objective C for iOS. There have been new innovations like Kotlin for android apps (instead of java) and swift for iOS (instead of objective c). There have been other innovations such as the introduction of some super awesome frameworks that allow developers to write native code for both operating systems in one go. We will not be talking about hybrid technologies which don’t produce native code such as ionic and phone gap, simply because as a serious developer, you can’t really take them seriously, right? Coming back to the frameworks that help us write native code, the two biggest ones are — React Native and Flutter.
React Native is an extension of the awesome react library that allows us to create single page applications by allowing us to create re-usable components and changing the states of these components based on user inputs or any events, but doing these things asynchronously so that the user gets a feeling that everything is happening real-time without any page refreshes, thereby making the applications super-fast. When React Native came out, it changed the approach followed by developers and it was a complete game changer as React Native works really well with NodeJS which is an awesome back-end technology and this allowed developers to create just one single back-end which could then be shared between your android, iOS and web application (sounds awesome right? there’s more information on how this works in my article titled “A new approach to web development”). This meant that your web team build the front end for the web app using react, and since react native is an extension of react, they could also build the android and ios apps and everything could be very well in sync as there was only a single back-end that they were all accessing ! React Native has been around for a few years now and it has matured as a platform, when it first came out, there were thousands of things which were easily available to developers in standard android but were not available in React Native and this led to loads of frustrations, but thanks to the awesome community support around React (it’s a facebook-backed product), they kept refining it and introducing node packages to enable developers to build easily build functionalities similar to what they would have been able to do in native android (java) or ios code (swift).
Last year, Google released the framework called Flutter and their language Dart. This new development had many developers excited as whenever google launches something, there is a lot of hype around it. Our developers at Myrl Tech (www.myrl.tech) were some of the first to adopt this framework and we started building a couple of projects on it, simply to see what’s new and the benefits it provides over React Native. Oh how naive were we!
We thought that since Flutter has been released after so many years of React Native being around, it would not only have all the features of React Native but would also improve upon it many folds and provide some shiny new features that will change the game completely and cut development time by half and other such optimistic thoughts. But we were wrong, very wrong. Flutter is now, what React Native was 4 years back, a new framework with a lot of issues such as lack of basic functionalities like automatically triggerable notifications, there are many other frustrating things about Flutter that you realize when you start building an application that would otherwise take a couple of days in Java and you’re trying to figure out how that functionality would work in Flutter and then search on their website and all that you see are answers from the guys at Flutter such as this — “we’re sorry, this feature is not currently there in Flutter”. Flutter clearly requires time to mature and is definitely not production ready, no matter what the people at Google would have you believe. For now, React Native would be the way to go if you were to try and reduce your development time by using a framework.
Fast forward to today’s time. Users’ discovery is mostly using web on the mobile browser, so, for example if you heard about a new e-commerce website, you’d go to their website and see what’s the hype about and if you like something, you will place an order on the website. Now, if you find yourself coming back to this website again and again and buying new stuff, you would consider going and downloading their mobile application. The problem is, majority of these e-commerce stores don’t end up getting downloaded as apps on the phone because user attention is low, memory is short termed and competition is high, another competitor has already moved into that space and taken away that customer till the time they think about you again. What if there was a way to approach the customer during the time of discovery itself and prompt them to put you on their home screen??
Now, let’s come back to the problem faced by the tech companies in emerging markets where the users are unable to use the applications due to outdated or low capability phones and low internet connectivity. Turns out, the earlier problem and this problem have a common solution — The PWA or the progressive web application. The PWA allows a user to add a shortcut of the website that he / she is visiting right to their home screen, this happens in the fraction of a second without the need to actually go to an app store and download the application and install it. How does it work? basically the user installs an instance of your web app and every time they use this PWA from their home screen, they are actually connected to your web server, but they never get the feeling that they are on a website, which means that there really is no browser, it feels native and even have some functions like push notifications and updates ! imagine being able to stick with a user right from the day of the discovery, living on his home screen and engaging him in the form of a native app (or almost a native app). This is what a PWA can do for you. Sort of mysterious, isn’t it?
The benefits or PWA are manifold, it’s faster, leaner, has a low footprint, it goes in quick, gets the job done and moves out. This opens a new playfield for tech companies and to say that companies are adopting it like hot cakes would be an understatement, everyone’s asking for a PWA now, ask us, we’re a product development company ! This allows companies to engage their users deeply and to kind of lock them in right from the day of the discovery. But how do you even build a PWA, or atleast, what’s the basic concept here?
You can build a PWA using React, there’s a sibling of React called Preact which is even more suited for this. So, Preact reduces the requests to the server and also has server side rendering built in (html pages are rendered on the server and sent out), you can do more advanced code splitting (you can decide which components load when). Preact also has a router built in, unlike React which uses an external package called react-router which hasn’t been built by the guys at React but by a different company. Preact is also about 1/10th the size of the React library and about 4 times as fast, unbelievable right? Preact is just 3KB in size and does the same job as React but much more elegantly. Since the whole point of PWA is light and fast, preact more than suffices for the job. If you already have a react app built, despair not, as there is something called as Preact Compat which allows you to make preact compatible with react. Google realised a 43% increase of sessions per user and a 100% increase in session duration on PWAs as opposed to a regular web app.
This brings us to the question that everyone seems to be asking — are native apps dead? and are PWA the only future? PWAs and native apps can’t co-exist?
In our opinion, PWAs will co-exist with native apps and native apps are here to stay. About 60% of the discovery is on app stores and people are looking for applications still on play stores, since PWAs can’t be launched on play stores, react apps will have to be there for a while. There are many functions that native apps can perform that PWAs can’t as of now. PWAs were never meant as a replacement for native apps but a bridge between web applications and native apps. So that even if the user doesn’t trust a brand enough to go to the play store and download an app, there is still a way to bind him or engage him using a PWA, not to mention the huge advantage that it offers to tap into the users in the emerging markets as PWAs reduce the amount of work load on the device and puts it on the browser instead. React Native can have compatibility issues as apps developed on it may work on recent phones but may not work on old phones, so in cases where you want to tap into the emerging markets, stick to PWA.
This article was originally written on — www.designandtech.co
We at Myrl Tech develop some of the most complex digital products and are at the cutting edge of technology. Get in touch with us if you have a requirement for the same :)
Follow for similar awesome articles.
