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

WHAT PROGRESSIVE WEB APPS CAN DO FOR YOU

People who are viewing PWAs on their desktops and mobile devices are going to 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 appears on the home screen 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.