When Magento 2 was first released in 2015, there was a lot of excitement about the successor to the then undisputed king of eCommerce platforms. It was almost 8 years since the release of Magento 1 and developers were keen to see what benefits would be realised by the inclusion of the latest technology and standards in the new platform.
As devs began to deploy the first betas and then onto the first official releases, one thing became apparent: the frontend performance seemed a bit slow. Of course, at this time we were comparing against Magento 1, where solution providers had advanced caching systems in place and the general consensus was that things would improve with new releases. Overall though, the experience was a bit lacklustre.
The current default frontend was built using knockout.js around 2015, and today is showing its age. Sure it is responsive to a point, and recent additions including incorporating Magento Pagebuilder give brands some much-needed tools to help compete against some of the newer cloud-based content management systems. As it stands, the overall performance has improved markedly since 2.0, however, the rapid acceleration of coding standards and trends has outpaced Magento development and this calls for new solutions to address the issue of speed.
In eCommerce, world speed is the biggest single factor in conversion rate and overall site performance. Once a customer reaches your site, each second they have to wait will inevitably see a reduction in retention and a decline in the conversion rate for the site. Its a battle all site owners face and new methods of dealing with the problem are constantly emerging. For Magento there already exist some ways around the problem – modern caching solutions provide an effective way of delivering pages quickly to users, however, these require the cache to be filled and refilled when content is changed, and they don’t address the issue directly they act more like a safety net that can sometimes fail.
Enter the progressive web app. Progressive web apps help to address these issues by providing a framework and set of tools that allow developers to use the latest languages to deliver amazing new brand experiences directly from the browser. Sites developed with a PWA frontend can be made to look, feel and function like a modern phone application complete with persistent menus and options present in traditional apps as well as providing a more traditional desktop experience.
They are secure, requiring HTTPS via TLS to ensure the best methods are used for protection of customer data. They also utilise service workers to allow for the app to function even without connection to the net, meaning users with poor connections can still have a smooth and responsive experience. They can also be pinned on a mobile device and launched similar to a traditional app downloaded from the app store without the need to actually download anything. Most importantly though, they are fast, significantly reducing the time taken to load pages and display content to the user, and this is where Magento can benefit significantly.
Earlier this year, Magento announced the availability of Magento PWA studio, a set of tools developed in-house by the Adobe team with the specific goal of allowing Magento Solution providers to build frontends for Magento stores using PWA design philosophy and techniques. Importantly its been put together to compliment the overall Magento extensibility design philosophy, so the frontend can easily communicate with Magento via Graph QL API’s. It also includes peregrine – a set of UI components that can be utilised to help quickly assemble a storefront and even includes Venia a full-featured PWA storefront that can be initiated and use as a base for customisation if preferred. Finally, they have managed to incorporate native payment gateways directly to the solution via Braintree.
The PWA studio has seen heavy adoption by many solution providers since release, first to experiment with the tools and now increasingly to complete full-featured Magento frontend development. At the recent Magento Imagine conference, Eric Erway and James Zetlen – two leads in the PWA studio development efforts shared that there are already a number of Magento stores with PWA storefronts built using the studio, highlighting the ease with which storefronts can be developed using the tools given the short timeframe. Magento side there would be a team dedicated to the continuous improvement of the tools and incorporation of a number of improvements including server-side rendering, SEO improvements and further optimisation of the Venia theme.
All of this is exciting news for Magento solution providers as it enables us to catch up to other platforms and to start delivering amazing mobile experiences that are fast, secure and engaging for customers. Best of all, as with all things Magento, a significant community has arisen to support the tools and already many new options are available to accelerate the adoption of the new technology.
Adoption of PWA requires rethinking frontend development strategy. It requires learning new languages in order to utilise the tools correctly or recruiting new talent who are familiar with the languages. It requires a mobile-first approach to the design and adoption of persistent navigation options. Overall the implementation will be similar but the resulting experience for customers will be markedly smoother, and as mobile commerce sessions continue to raise the overall benefits and return for merchants should increase significantly as well. The race is on to master the tech so we can upgrade your performance, let us know if you want a new frontend.