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.
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.
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.
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.
- https://devdocs.magento.com/guides/v2.4/graphql/ – GraphQl API
- http://pwastudio.io/ – PWA Studio
- https://www.abstract.com/ – Abstract
- storybook.js.org – Storybook
- https://developers.google.com/web/tools/lighthouse – Lighthouse
- https://reactjs.org/ – React
- http://prerender.io/ – Prerender
- https://developers.google.com/search/docs/guides/dynamic-rendering – Dynamic Rendering
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.
The past year has seen a massive change in the way we work and live, with disruption to events, travel, recruitment and new ways of […]
Matt Purt and Chris Griffin acquired Secret Sales in 2019 with a view to launching a unique proposition for the fashion industry, intended to disrupt […]
As we have been working from home for over a year now and onboarding remotely is still happening, we wanted to catch up with one […]