Our first PWA Accelerator

23/07/2021

Swoon’s PWA Magento website went live in July 2020. In Evan’s Tech Share, he tells us how we built and launched the platform in just 86 days, our fastest Accelerator yet.

Swoon was up against Magento 1 end of life and wanted to upgrade to Magento 2, so we saw this as a perfect opportunity to integrate a headless ecommerce solution using Magento’s PWA Studio and Magento’s GraphQl API into their business.

PWA Studio is written using React which touts itself as a declarative, component-based JavaScript framework. By using React instead of a traditional Magento Front End, it led us to look at how we could better approach design to fit the component-based model that React presents. Traditionally, we have looked at design using a top down approach, but utilising a component-based system created a new opportunity for increased collaboration between design and development. 

Design and Development

To achieve better design consistency we utilised Abstract as a design handoff tool. This allows the designer to use Sketch and export their components so they can be inspected by a developer. Using Abstract in combination with Storybook as the development environment, we are able to build the components in React, allowing the developer to build the components in isolation, while also making them more presentable for visual feedback from both the designer and QA. Storybook provides add-on tools: such as a11y to help with accessibility; docs so that our components are documented for easier hand-off between developers; and also an Abstract add-on so we have a side-by-side comparison of the components. This component-based feedback loop that we created led to more consistent designs across the application, as well as a way to make sure that changes were applied across the site. A practical example of this in action was through accessibility testing. We found that the primary button colour that had been used throughout the designs was failing contrast levels. In a collaboration between the design team, the developers and the client, we were able to agree on a colour that was both visually appealing and passed contrast thresholds. Once the colour was agreed upon, we were able to make the change in a single location and see the change applied across the site.

Performance

An area where the PWA excel is in performance. Since the application is headless, it is linked through a GraphQl API, creating a single source of truth between the front and back ends. This allows for page speed optimisations that are just not possible in a traditional Magento environment. Using Google’s Lighthouse tool we are able to use key metrics to determine the performance of a website. When testing the performance of Swoon’s Magento 1 website versus the Magento 2 PWA implementation we found that page speed performance was around 70% faster. A key metric we monitored was the time to first interaction. For the PWA we were able to achieve times around one second. In terms of customer engagement, that means that they can start interacting with the website in around one second, leading to customers staying on the website for longer, increasing the chance of conversion. 

Learning opportunities

However, with this being a client-side only application, as opposed to a traditional Magento server side rendered application, challenges arise specifically around SEO. For this we turned to Google’s Dynamic Rendering solution guide, and settled on using Prerender.io to render the application for crawlers. One concern we had would be the possibility of presenting content to the crawler that is potentially different also known as cloaking. This can have a negative effect on SEO, but Prerender.io uses Google Chrome’s headless rendering engine to run your JavaScript on demand before taking a snapshot and returning it to the crawler. This ensures consistency between the client-side rendered application and the server-side rendered application.

Finally, GraphQl’s developer experience has been a breath of fresh air to the development team. GraphQl creates an enforceable contract between the server and the PWA. From a planning point of view, this leads to better communication between Front and Back end developers. During planning they can agree on a schema for data, this allows the developers to work independently on tasks knowing that they have GraphQl to enforce the data being sent between the PWA and the server. This leads to quicker turn around times, and faster delivery to the client.

Resource Links:

If you have enjoyed this article and you’re interested in joining the team, head to our careers page to view all of our current engineering opportunities.