Adapting to the New Realities of Progressive Web Apps
February 26, 2018
These popular sessions from Imagine 2017 exemplify the unique content experience the event provides attendees. Join us at Imagine 2018 April 23-25 in Las Vegas for exclusive content from a range of industry experts and innovators.
Today's customer now expects the speed and innovative interactions of an app, but through their mobile browser. With responsive web design you can deliver device-specific experiences. Progressive Web Apps (PWAs) are an evolution in front-end web technologies that utilize response web design to deliver app-like, contextual experiences. In effect, revolutionizing mobile shopping for customers.
In this Imagine 2017 session, Adam Brown, Executive Creative Director at Gorilla Group, Peter McLachlan, CPO and Co-Founder at Mobify, and James Zetlen, Frontend Architect at Magento Commerce, share their expert insights on adapting to the new realities of Progressive Web Apps.
Progressive Web Apps are user experiences that use the full reach of the web to deliver app-like, contextual experiences.
They are reliable. PWAs load instantly, even in uncertain network conditions.
They are fast. PWAs respond quickly to user interactions (2-4 times faster) and scrolling is easy.
They are engaging. PWAs feel like a native app and have an immersive experience.
They are contextual. PWAs can be personalized for user location and browsing behavior.
And they are truly mobile-first. PWAs use mobile design patterns.
“Progressive web apps are the step towards really being mobile-first on the web.” Peter McLachlan, CPO & Co-Founder at Mobify
THE PWA SKILLSET
PWAs represent a group of new techniques and ways of thinking that refocuses on the fundamentals of the web. Frontend development is key. Instead of thinking about full-stack developers, think about full-frontend developers. Not just people who can write the CSS, but people who can understand the implications of layout, who know what makes browsers act agreeable and act poorly, and understand the platform and the critical render path concept that pervades PWAs.
The PWA skillset also requires understanding the risks: knowing what’s going to happen when you optimize your branding into a critical rendering path, and how your visual design and marketing teams will respond to first prototypes. The panel advises using a build process and familiarizing yourself with the prevailing web asset tools. You also need to build assets that recognize that the progressive loading nature of PWAs involves bundles that are calculated to load. Additionally, you’ll need to operate with data and run the numbers. Accept some adjustments will be necessary to the identity that you envisioned, but also to the time and the various new tasks needed now that you’re running your business on the web.
TIPS FOR PWA DEVELOPMENT
The PWA approach makes a lot of sense. The skillset is a natural extension of the languages we know, and we just need to do a couple of extra things to them:
Implement RAIL: RESPOND to the user; Prioritize smooth ANIMATION; Notice when the user is IDLE; Use that time to LOAD additional content and resources to do more calculations.
Lighthouse is also a helpful way to measure PWAs. And with everyone starting to get on board and testing each other’s projects with Lighthouse, it’s going to get a lot easier because of the competition.