ScandiPWA Toolkit — Jegors Batovs ScandiPWA Spring Meetup

ScandiPWA
3 min readMay 28, 2021

Jegors Batovs is Technical Architect at ScandiPWA

I will tell you about the most recent advancements in our development toolkit and a little bit about the technologies around it.

First of all, I will tell you a little bit about the things that have been around for a while, but not many people actually know about them and use them.

ScandiPWA functionality

Plugins for functions

You can assign a namespace to a function, to a simple function, or to an error function, and then create a plugin around that function.

Internationalization mechanism

The old one that we used to have before, version 4.01, used to make you compile your project several times for several bundles, which increased the building times. For example, if you have four low locales, you needed to compile your project four times. That would take 10 minutes, 20 minutes, depends on the size of your project.

Now we have absolutely a different situation. The translation packages are supplied as chunks, that can be switched and fetched in run time and operate absolutely autonomically. That is great because it improves the building time and it enhances the experience of working with internationalization.

Template plugins

This thing is pretty new. Template plugins are great technology.

Why do we need it? To modify templates, of course. Usually, we have either PHP or HTML template for our project, that is not accessible by the plugin system because how can we modify it with a plugin system? And there is no way to add something to that template without overriding the previous template of your parent theme. The only API to interact with templates until now was overriding. Now, we have a plugin system that allows inserting some PHP directives.

We can interact with a template in PHP terms, we can add some extra nodes, PHP nodes, HTML notes, basically anything that is complying with the DOM specification.

Development tools

What are they? They are CLI and VS Code extensions. These development tools allow you to create and override resources in the blink of an eye. You can forget about writing any kind of template code manually because they will handle it for you completely. Don’t forget anything, just use our development tools and you will be good to go.

Let’s proceed to the other interesting topics of our presentation. Of course, as I mentioned, VS Code on the right and VM on the left. Pick the one you like more, use it.

What is next?

Plug.js package

What is it? Basically, ScandiPWA extension.

I think that we don’t have a name for it yet. For now, we call it plug.js. Currently, it is kept private and under its development, but it is planned to be released anytime soon.

GraphQL

The next thing that we’ve been working on recently is the better GraphQL client. We in ScandiPWA don’t really enjoy using third-party technologies, that’s why we have so much stuff implemented ourselves.

And this will be one of the tools that we use in future versions of ScandiPWA. That’s our new approach to GraphQL, basically, it’s the same approach to GraphQL, but a bit better.

ScandiPWA is a free and open-source PWA theme for Magento. You can learn more about it on its official website scandipwa.com.

ScandiPWA is a free and open-source PWA theme for Magento —

https://scandipwa.com/?utm_source=medium&utm_medium=article&utm_campaign=spring_meetup

Follow our social media accounts to be the first to know about any news and updates:

https://twitter.com/ScandiPWA

https://www.facebook.com/ScandiPWA/

--

--