MageCONF 2020: The Story Behind GoMage PWA Theme

MageCONF 2020, the biggest tech event in the world of Magento, took place on October 24, 2020.
Thirty-two speakers from different organizations and countries talked about Magento, its future, and innovative solutions.

Roman Tsehynka, PWA team lead at GoMage with 8+ years of experience in Magento development, presented his speech “Extending & Customizing Magento PWA Studio” during the conference. Roman talked about GoMage PWA Theme and the road our team took to deliver the solution to the market.

Over 80 participants joined Roman to learn about this innovative solution, how we chose our path and how eCommerce businesses can benefit from PWA implementation. Below, you can find key takeaways from the speech.

GoMage PWA Theme - Origins

Progressive Web Applications is a relatively new technology that combines the benefits of traditional websites and native mobile applications. PWAs can be installed on devices just like native apps, providing a lot of advantages.

PWAs have a lot of benefits, including fast page loading speed thanks to optimized caching, offline mode, lightweight, SEO optimization, and much more. That’s why our clients love PWAs so much.

When our company started working on our theme, we immediately chose Magento PWA Studio. Even though at the time there were some other alternatives, our PWA team decided to go with the Studio. We had a higher goal – to make the use of our PWA theme as simple as Magento itself.

We started development with PWA Studio 4.0. This version had a lot of problems, so we couldn’t just take it and use it. We used it as a basis so that we wouldn’t have to develop everything from scratch.

In the beginning, we set three main goals:

MageCONF 2020: GoMage PWA Theme Goals

After the goals were set, we moved on to their implementation.

PWA Studio Features Expansion

Our main goal was to expand the features of the Venia storefront. We didn’t want to override the basic functionality but didn’t know how to do that. Thanks to the method shared by Jordan Eisenburger we learned how to overlap the basic features of PWA Studio at the level of webpack.config.js.

Even though the approach proposed by Jordan was a good starting point, we strove for automation. Our team didn’t want to replace a file, write a path from the parent to the overlapping component, and define all the dependencies.

GoMage PWA Theme Automation Approach

We wrote functionality that parsed those basic components and searched for analogs of the same basic components in our theme. If such components were found, we overlapped PWA Studio where it was needed. Our own approach allowed us to name the component directly within our theme with the same name as it was called in a basic component of PWA Studio and that’s how we reached the overlapping.

Even though the solution seemed fine at the beginning, we encountered a lot of problems, especially after the release of PWA Studio version 5.

To resolve the problem, we went even further and wrote a separate module, which allowed us to move on to our second task – the creation of a turnkey and fully customizable solution.

Creating a Turnkey PWA theme

In the development of a separate module responsible for all dependencies, we created an interface and a fairly simple method of extending and supplementing these components from the admin panel.

We divided our custom functionality into output blocks, which in the future turned in the widgets. As a result, store owners can now control the position of each block on the page right from the Magento Admin Panel.

GoMage PWA Theme: Page Builder

We have only one plugin connected to the overlapped files, namely the one we called Widgets, and it builds all the dependencies that need to be displayed on a page in a particular section. And this allowed us to fully generate the structure of the page, to fully control the entire flow of dependencies that come to us.

In order to rearrange page components, add, change, expand, discard, or add something new, you just need to go to the admin panel, and drag the needed component to the desired section or switch it.

Making GoMage PWA Theme Lightning Fast

Turns out, Magento PWA is not a magic technology that optimizes itself. After we ran our theme through a number of measurement tools and understood that the speed indicators were not perfect because of the build’s high weight.

We used chunks to solve the problem. Chunk is a component that allows you to connect a plugin. And it gave us great opportunities in building our profiling. So, the chunk connection allowed us to optimize our code from one point five (1.5) MB to six hundred fifty (650) KB. This, of course, raised our performance well in measurement systems and so we began to move in the direction of optimization.

GoMage PWA Theme: Profiling & Optimization

We’ll also provide images optimization, which is currently in the development process.

Contact Us
Submit a request and we’ll get in touch within a day.
Thank You for Your Request!
We will contact you shortly.
Share
Subscribe to Newsletter Learn the main secrets of creating a successful eCommerce project