How to pick the right PWA solution for Magento

PWA is the next big thing and you want to get in on it while it’s still new and stay ahead of the competition. Being still somewhat early in the adoption cycle, the market for PWA solutions isn’t yet oversaturated. To help you pick the right choice for your Magento store we’ll compare the two biggest contenders on the market – ScandiPWA and Venia.

Magento PWA studio vs ScandiPWA

On January 15, 2019, Magento announced the release of PWA studio, which is a suite of tools for building PWA stores. If you’re unfamiliar with what Progressive Web Applications are read this intro to what PWA is now, and to find out why they will change the internet, check out this comprehensive article by Scandiweb’s CEO, Antons Sapriko. If you aren’t a believer yet, you will be.

PWA studio has already been met with mixed reviews, however, it is important to keep in mind that it’s a nascent project with ongoing development and a bright future. Similarly, ScandiPWA is also a work in progress that shows great promise and the bonkers fast and sleek demo store has caught the attention of the PWA community.

In this article, ScandiPWA and Venia-concept will be compared in terms of starting the project, extending the theme, the project structure, and the global style guide. The Venia Storefront(concept) is a demo theme built on PWA studio and is essentially an implementation of PWA studio ideas.

Starting a PWA project

Venia Concept allows for an independent “Storefront” setup — you give it a link to BE and it works, however, it is more complex to integrate and setup in production — adjustments to infrastructure are needed (front-end servers need to be reconfigured). The Vagrant setup is advised for hosting M2 on the local machine, but this could mean differences and, concurrently, the potential for bugs due to differences in the production/development environments.

ScandiPWA allows for an easy installation as a composer dependency, which means it is installable on top of any M2.3 project without changes to infrastructure. It is NOT A STOREFRONT, it is a theme. Which means actions needed to setup ScandiPWA are simple and familiar to any developer — take your project, add composer dependency, build theme (unusual to default theme installation, but common for any PWA app).

ScandiPWA also supplies a development environment for project initial setup based on Docker. Being tightly coupled with the M2 backend, ScandiPWA is able to supply and support an M2 Docker setup (allows for an easy scaling in production, and quick setup on local) along with the ScandiPWA theme core.

Extending the theme

Venia Concept advises teams to Fork initial repo and build your customization on top of it. This solution does not fit ScandiPWA, because the project plans to release updates to its core theme.

ScandiPWA is initially installed as composer dependency, and is available from the get-go for customization. To customize the theme, developers must simply follow the Magento way of doing rewrites: create a file with the same name by desired path, and voilà — functional is rewritten. It also allows to release updates, which won’t conflict with existing rewrites, which, in turn, allows continuous support of the theme’s core.

PWA Project structure

Venia Concept has a valid project structure. However, it is created without any extensibility in mind, nor ease of development.

ScandiPWA initially took a similar approach as Venia in the file structure, but quickly realized it does not follow the necessary requirements of being: easy-extendable (rewritable), easy-navigable (no files with the same name, etc.), easy-understandable. The file structure groups files by “True Frontend” (content display only — mostly React components) and “Backend of Frontend” (working with data, global states, etc. — mostly Redux related).

This allows teams working on the project to be divided in a familiar (BE, FE developer) schema similar to usual M2 development. This means less time required to switch to a new stack, and improves development speed by initially separating things in BE/FE streams.

PWA Global style guide

Venia Concept uses nice concepts like CSS custom properties, gives a nice deep-dive into animation speeds, fonts, borders, etc. But what it does not do — it does not follow any class organization pattern, which causes the usual style bugs — things break in some place on the site all the time due to developers miss-checking them.

ScandiPWA uses BEM (Block-Element-Modifier) concept in style organization, allowing for better extendability and stability. Stability is achieved by allowing the maximum nesting level of styles (3) and having very specific class names, which are problem solvers for constant frontend bugs.

Also, class name organization allows faster development, because it is a very strict standard. ScandiPWA successfully got rid of any direct “class” setting in their components. The class name organization allows for better navigation because B — block in BEM is a direct reference to a file where styles should be located. This means no more searching through all project files in order to find some declared class, which simply saves time.

Conclusion

Venia — is a concept meant to show that M2 is PWA integratable. It was not, unlike ScandiPWA, meant for any continuous development and has poor architecture. However, the basic ideas of it are nice, and plenty of them are fundamentally shared between the two projects.

ScandiPWA follows the concepts of PWA Studio but has worked hard to improve the implementation of them, in order to achieve greater stability, performance, extendibility, and reliability. ScandiPWA takes a more native (to existing M2 developers and merchants) approach to development using old, well-formed concepts, but implementing them with new, up-to-date tools.

Here’s a deep-dive into the world of technologies and purposes behind the ScandiPWA presented in the simplest way possible:

To summarize, ScandiPWA brings the following improvements over PWA Studio:

• Broader extendibility
• Quicker stack-switch for developers
• Faster development
• Core long-term support
• Simple project setup
• Production-ready scalability
• Better frontend stability
• Tighter M2 integration

If you have any questions, we’ll be happy to answer!

Get in touch directly with the guys and girls behind ScandiPWA through our slack channel where you can stay up-to-date with our work, the latest technical progress, ask questions and engage other enthusiasts! Join the first Magento PWA community! To learn all about PWA, check our complete PWA guide.

Share on: