The Future of Web Development: Progressive Web Apps

DEVELOPMENT: PROGRESSIVE WEB APPS

Let’s talk about the future of Web App Development. As tech has progressed, we’ve seen the evolution of site design – from text and .gif-heavy Geocities sites, to gorgeous websites optimized for usability. The next big shift is Progressive Web Apps (PWA). If you haven’t heard of these yet, you will over the next few years – Magento, popular Google tools like Google Maps and Google Photos, and others are making the transition. With more speed and functionality than anything we’ve seen online before, PWAs are the next huge advancement for web development – let’s get our foot in the door.

WHAT ARE PROGRESSIVE WEB APPS?

The difference between Native and Web apps

To define what a Progressive Web App is, we have to start by looking at the difference between Web apps and Native apps. Web apps are just that – they’re built for your browser. Web apps are great because they are not tied to a specific platform – since they run in your browser, they will run on about any computer or phone you might own. The functionality and behavior is largely the same across all devices. The downside is that most Web apps can’t make use of many device-specific features, like notifications and touch ID.

Native apps, on the other hand, are built specifically for a single platform which allows the developer to use the device to its full capabilities. For example, if you were writing a videogame app for a phone, you would want to use the hardware acceleration that is only available for a Native app. The downside is that if you want to have that app run on multiple devices, that means you actually have to create one app for each device which is more complicated, expensive and time consuming.

Progressive Web Apps have arrived

We’re finally at a convergence point: Progressive Web Apps – the best of both worlds. For desktop browser users, PWA’s will let websites look like their own programs that you open straight from the desktop. For mobile users, little will look different from the apps you’re familiar with, but the features added are more than notable. So what’s the difference, and where’s the advantage? PWAs deliver some of the benefits of Native apps, like being able to install and work offline, but still have the “write once, run anywhere” capabilities of web apps.

Google Maps using desktop

Google Maps using Android mobile app

What Progressive Web Apps can do for you

The future of online business

People who are viewing PWAs on their desktops and mobile devices are going to have have a similar experience as people using Native apps for most business applications. PWAs will still work even if you lose your wifi connection, which is especially important if you are mobile. Because of their ease of use and quick access, PWAs stand to become the go-to platform for most users, replacing a downloaded desktop app. PWAs are built with the common building blocks of the web but with many of the benefits of Native apps.

Going forward, we should expect that companies will be focusing on replacing older versions of their apps with PWAs to leverage lower development costs. This is twice as true if you run an eCommerce site. It’s important to remember that PWAs aren’t for specific uses, instead they stand as a present-day best practice for interactive websites. They offer customers faster shopping experiences and new ways to interact with products, driving repeat purchases. By committing to PWAs, you’ll position yourself to meet customer expectations and beat competitors.

IMPLEMENTING Progressive Web Apps ON MAGENTO

Magento Commerce is committed to a PWA-filled future. To help create and integrate apps for their platform, they’ve created a suite of tools called the Magento PWA Studio. It’ll help you create a speedy frontend for your site, and assist you with implementing extensions for further functionality. Because this is a new frontier, Magento has worked with input from Google in the development stack and feature set of the PWA Studio.

PWA Tools

API Layer

Magento REST API already offers great coverage, but PWAs require a new API to deliver the type of performance that users expect. This is why the Magento team is leveraging GraphQL, which makes querying data from Magento much more efficient.

React.

The React Javascript Framework from Facebook has been extremely popular amongst front-end developers ever since it was released. It offers a great developer experience, with instantaneous feedback to help the development process and allows for a wonderful user experience because it eliminates full page refreshes. The reliance on ReactJS is a major part of what makes PWAs feel Native.

The application shell

A key part of PWAs is that they’re installable. PWAs don’t rely on a user downloading it from an app store, they can be downloaded straight from a companies website. The application shell provides the installation capability as well as features like the icon which appear on the homescreen and loading images when the PWA is starting up.

WebAssembly: The next step

PWAs are great now, but they don’t have the speed of a Native app. This is where WebAssembly comes in. WebAssembly is a binary code that compiles site data before it reaches your browser, meaning your device will be less strained when parsing code, like it currently does with traditional websites. A huge perk is that developers don’t have to learn a new programming language. Instead, code written in C or C++ can be compiled to WebAssembly. In the future, we will see Javascript to WebAssembly compilers which will massively change the performance picture for PWAs.

Take a look at this WebAssembly demo and realize this is created in your browser just using JavaScript.

PWAs are here and chances are you might have been using one without even knowing it (We’re looking at you, Google Maps and Google Photos).

Are you interested in PWA development? Check out Google’s PWA checklist and development communities like Magento’s to explore new avenues on executing development and implementing extensions for your app. You can also partner with Kensium for all website development and Magento projects.

Email This Page
(Visited 189 times, 1 visits today)