Luigi Iuliano, CTO at Corra, and Jay Smith, Founder and CTO at Webscale, recently caught up for a livestream to discuss the hot topic of Progressive Web Apps or PWAs. This is a summary of their conversation, but click here if you’d like to jump over to watch the recorded session.
Leading global digital agency, Corra, and the ecommerce segment’s safest cloud hosting provider, Webscale, have been deeply involved with PWAs since 2015. Corra actively works with merchants to design and build PWA storefronts, while Webscale is simplifying the deployment and hosting of PWAs with its highly automated SaaS platform, optimized for security, scalability and high performance.
What is a PWA?
PWAs create a mobile app-like user experience without the need to download or set up an app on a smartphone. It’s not software out of the box, nor is it packaged software that you can install like an app. It’s a separation of the front end-user experience from the monolithic back end platform, that allows merchants and their developers to conceive and manage their creative vision without being encumbered by the back end platform. You can also view it as a collection of connected tools, designed to load content smartly on a page, while improving performance, and providing a better user experience of browsing and navigation.
From a hosting perspective, when you disconnect the rendering function from the monolithic ecommerce application, it allows the web part of the storefront to run faster than the backend infrastructure integration points. The sites tend to be less noisy and deploy more quickly too.
Are PWAs more expensive to develop?
When it comes to the cost of development, PWAs are certainly cheaper than traditional mobile apps. If you’re going to develop an iOS and an Android app in their native languages, that’s at least twice the cost to start with, before you’ve added other items such as maintenance. But one point that merchants probably overlook is the value that PWAs deliver with regards to search engine marketing. Content is easily explorable and more discoverable on PWAs, whereas the content is buried deep in a mobile app. Deep linking can solve this issue, but still, one would have to employ paid search to expose the app’s content.
Another issue with mobile apps is that many are grossly underutilized once the initial buzz dies down. With web browsers becoming more potent, with much of the capability of a traditional app now built in, PWAs can deliver incredible user experiences.
Overtone Haircare: Custom CMS with React.js and Shopify Ecommerce Platform
Are PWAs for everyone? Are they for large, global brands that want to deliver a unique customer experience, or is it something that retailers of all sizes should be looking at?
The short answer is yes; everybody should be looking at a PWA, and not just retailers. News organizations and businesses in other sectors are also going the PWA route, away from traditional responsive sites.
“For retailers especially, PWA is the holy grail for driving optimal customer experiences with measurable business outcomes – increased conversion rates, faster page load times, more time spent on the site, and more items added to the cart,” said Lui.
We are increasingly seeing that merchants, making decisions on their long-term platform and technology strategy, are considering PWAs. If you’re looking at doing a new design, or implementing or moving to a different platform, exploring a PWA is a good idea.
One of the significant hurdles to PWA adoption is the concern that it’s a “new technology”. However, once they get into the details of developing a PWA, merchants quickly realize that a lot of the skills needed are those they already have in-house. JavaScript, CSS, and HTML, for example, can all be reused. In many cases, the front ends are built on common open-source JavaScript frameworks such as React, Angular, or Vue.
“We lean more towards React because it’s a robust open-source community that helps solve problems and drive innovation,” said Lui.
The other thing many see as a disadvantage is moving away from a templated system in a CMS, traditionally managed by a content team. But most new CMS solutions these days have content delivered through an API, so users are looking to solutions where the PWA is the container, through which a rich user experience can be created.
Before deciding to adopt a PWA strategy, it is critical to understand your customer base and how they interact with your site, so you can make the right decisions around client-side versus server-side rendering. Do your customers tend to have all the best and the latest devices? Older devices and poor networks can adversely impact the user experience.
Hosting a PWA is also an important decision. You need to find answers to questions like, can you run that Node app next to the hosted shopping cart, or should you have a dedicated cluster to service that node application? And then what layers of caching are you deploying to accelerate the delivery of that application to the internet?
“Decoupling the frontend and backend facilitates a better focus on development and deployment – the CI/CD process can move more aggressively on the frontend. It allows the frontend to run as fast as it wants without putting the backend at risk,” said Jay.
Does a PWA warrant more significant investments in security?
Not really. The protocols are much the same. In the case of Magento, for example, even though you may not be using Magento’s rendering capability, it’s still there and someone can target it. If you’re limiting the shopping cart to API access only or checkout paths only, it’s pertinent to have the right restrictions in place so you’re not accidentally releasing access to some part of your system. You’re not thinking about it because the typical user is coming in through your PWA, and they should only really be using APIs in the shopping cart. But that rendering capability may still be there, so you may want to lock that down and take a deny-first approach. In short, you have to understand your application, and what components need to be presented to the internet to restrict access, and prevent the unfortunate situation where you don’t think you’re vulnerable to an attack, but you are because that piece is buried in the shopping cart that you’re not using, because now your PWA is delivering that functionality. From Webscale’s perspective, it’s a lot of what we do already – good monitoring, good change control, and intrusion detection is a must.
What about implementation – how long does it take to develop and deploy a PWA?
A typical cycle shouldn’t be any longer than a traditional web application or responsive site – around three to six months. If you are retaining much of your creative, then three months is certainly achievable. Corra has built an accelerator called FWRD for developing a PWA. It offers a robust set of turnkey features, with integrations and the various sophisticated functionalities that ecommerce merchants need on their site. It allows merchants to get to market faster, cut costs, and scale their content team’s productivity.
“With FWRD, merchants can start with a mature, ready-made B2C PWA solution, and spend more time and money on innovation and creativity,” said Lui
Hosting a PWA doesn’t have to be more expensive either, and we’ll tell you why.
“Yes, now there are two hosting clusters, but their size has reduced as the implementations are very cacheable, and hence the clusters don’t come under extreme loads. Also, the shopping cart costs are optimized as they are focused on checkout primarily in the API calls and servicing them, and not wasting time using PHP to render HTML,” said Jay.
Watsco Carrier Enterprise: Magento PWA with Magento 2 Ecommerce Platform
So are you ready to get on to the PWA bandwagon? How should you kick things off?
- Create a “mobile vision” and agree on expectations regarding performance, optimizations, and budget.
- Find a strong development agency partner who understands the ecommerce segment, web app philosophy, and technologies to translate your vision.
- Find a reliable hosting provider who understands the PWA technology stack, how to cache the different layers, and optimize the solution.
Moving to a PWA is essentially a move to microservices, which in turn ushers in the single-responsibility principle, where each part focuses intensely on what they do best vs one giant monolith that has to do it all.
“This single-responsibility principle’s side effect is that because there’s a greater focus in each of the clusters and each of the microservices comprising the system, it is more cost-efficient, easier to deliver and manage from a hosting provider’s perspective,” said Jay.
The ongoing management and automation of a PWA involves a lot of moving parts, and identifying, diagnosing, and rectifying problems requires expertise. You need to pay close attention to this increased complexity, understand how deployments occur, how to handle the various clusters that are facilitating and delivering the system, and then understand how the the decisions you’ve made (for example, client-side rendering versus server-side rendering) will impact your user experience.
Traditionally, people are used to choosing server-side rendering to deliver a static page, and that’s going to be the fastest way because you are making use of caching one particular way. But these days, web browsers are much more sophisticated. Anybody who cares about SEO, which should be everyone, is going to push for server-side rendering, but that’s not really the case anymore.
“From a technology perspective, we want to provide as much flexibility to the client as possible to create that dynamic experience. So we’re pushing towards client-side rendering. Over the next 12-24 months, server-side rendering won’t be needed as much – after all, Googlebot can do dynamic rendering these days and produce good SEO outcomes,” said Lui.
This shift is particularly important when we consider that SEO, and the future of SEO, will be tightly coupled to the performance and the technical implementation of a site. Google’s Core Web Vitals, coming in 2021, will compel web developers to focus on the three key page performance metrics – Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID) – for ensuring good SEO rankings.
It all comes down to whether clients want a static or more dynamic site, how they want to represent their brand and what they’re trying to achieve. If they’re moving towards an authentic app-like feel however, they will probably going to want a bit more dynamism in the website.
Another big part of taking your PWA live is load testing, understanding how it performs at peak demand, and ensuring you’re not undersized anywhere for the expected load.
“Having a good model of how the internet can interact with your site, understanding what additional API calls the PWA is making, and how it’s changing or using the shopping cart within the app, is critical. Simulating all of those users on the site is very important to get a handle on,” said Jay.
In PWAs, since there’s a shift of computing power to different areas, the types of load tests you need to run are different. Now you’ve shifted the front end into a different infrastructure, and you’ve got other caching in the middle, the test results you gleaned from an existing load test suite may no longer be valid. As you move forward, whenever there is a new code release, application load testing must be conducted to ensure it has not degraded any server’s throughput in the system.
“The move to a PWA is a decision with far-reaching outcomes and impacting the team as a whole. Hence securing internal buy-in is very important. The most convincing sell to your team is that a PWA offers unmatched flexibility and control over the creative vision. It frees you up and you can explore and create what you want without being tied to the traditional back end,” said Lui.
SEO, and the future of SEO, will be tightly coupled to the performance and the technical implementation of a site. We’ve already seen Google’s Core Web Vitals 2021 update compelling web developers to focus on the three key page performance metrics – Largest Contentful Paint (LCP), Cumulative Layout Shift (CLS), and First Input Delay (FID) – for ensuring good SEO ranking.
Viva Wallet: Vue Storefront CMS and Magento 2 Ecommerce Platform
Another decision to make when deciding on a PWA is whether to stay on the current platform or evaluate others.
One advantage of a PWA is that you might not need to consider moving your whole platform. If you have an existing investment and all your backend infrastructure, then as long as your platform supports APIs, you can bolt a PWA on top of that and get your new user experience. You can also insert a layer, like some middleware or integration platform on top, and then you’ve got a PWA without actually ever having to touch your existing ecommerce infrastructure.
Why Corra for PWAs?
“We’re proud of our creative and development heritage especially in ecommerce space. We’ve been partnering with Magento for a long time, we have a strong leadership position there. And over the last 12 months, we’ve really focused on continuing that leadership and moving into the progressive web app space, with our FWRD Accelerator, which we think iss a mature and ready-made B2C progressive web app solution,” said Lui.
Why Webscale for PWAs?
Webscale is more than just a hosting provider – we’re technology creators in this space. We accelerate the delivery of your application and really provide you the tools necessary to integrate all these microservices, to a single URL space that presents the internet, and to deliver effective and compelling user experiences to your customer base. Beyond that, you should choose Webscale because of the skills and expertise that my 24×7 support team brings to the table – they’re just a committed bunch of professionals who are really focused on helping our customers succeed, no matter what the internet throws at them,” said Jay
To check out the whole livestream, click here, and if you’re interested in having a conversation around PWAs, drop us a line at sales@webscale.com and one of our experts will get in touch soon.
