Towards the end of 2019, we decided to choose the unknown path of Progressive Web App development(PWA). At the time, this was not a path many agencies in the UK had taken and we therefore saw an opportunity as a business to go after this space. Here at GPMD, we are a team that likes to reflect often on choices and decisions made, and so we had a first retrospective chat with our frontend team in 2020 to discuss their expectations and experiences on how the pwa projects were going for them at the time. The full blog interview of 2020 can be found here.
One year on, we thought it was a great time to check-in with the frontend team and report back. With a year’s worth of experience, four projects underway, and a slightly larger team than the first retrospective, it was time to sit down with our developers (Piotr, James, Dieter, Nick, Tomek and Tom) for a spotlight session on PWA and in particular how its been, working with Vue Storefront.
Well everyone, a year has passed since our last blog...what advice would you give to a dev getting into their first PWA/Vue Storefront project?
Dieter: To be honest, my advice would still be very similar to what I said last year, look up the code and get your head around it. The advice I wish I would have gotten - don’t assume that anything will work the way you thought it would.
Nick: I would say probably don't get overwhelmed by the code base because most of it, you don't really have touch. Of course it’s important to look up the whole project structure and see the full code base, but it’s more because I've got to understand how everything works together. It's kind of overwhelming, but once you start working on it, you realise that you're normally just working on an aspect like a theme or a certain directory, but not the full code base and if you have questions, you can always ask.
Tom: One good thing is that the community has now moved to Discord.io. Prior to this, it was on a free Slack account and they had a limit on how many messages could be stored in the archive. Now you'll be able to go way back in time to find out information, which will be really handy.
What do you feel are the most challenging things about learning to use, and work with, Vue Storefront?
James: It seems like Discord is more active as a community, but to be honest, I think there just isn’t as much information for Vue Storefront as there is for other ecommerce systems, i. e. more established systems in the space. We are spoiled with Magento - any problem you have, you search for it and there’s a Stack Overflow article for it.
I kind of almost view our previous projects as our documentation on how we handle different tasks. If I know something's been done before that, I go back and look at it. What also happens when you want to change something is that this overrides the whole stack as opposed to cherry picking what’s needed.
Nick: I think this has been the case since I started working on it as well. The documentation side hasn't really improved for the older Vue Storefront version(s), most likely because they are focusing on Vue Storefront Next. If you want to find the answers, you can check in a Slack channel, but the messages are deleted after a certain time. It’s just very new.
Tom: Sometimes I get overwhelmed by different tools I have to log into and areas to find documentation. It’s almost like you need one tool to remind you where all the other things are.
One of the biggest surprises that Piotr and I saw is payments. Vue Storefront is supposedly production ready for ecommerce and yet payments are not there and setting them up is not easy. Outside of payments, you also have to see how you can re-introduce anything you’ve fixed back into the system. Or you would upgrade to fix one element and another thing would break.
The saving grace in a sense is that for Vue Storefront Next, they are using composables and that the Shopware PWA documentation has largely improved.
Dieter: You have to look at the code, as It's the only place where you can learn. A lot of the core items are somewhat messy and the asynchronous elements are really hard to follow sometimes because you can't really see what's going on until you run it. Because it's asynchronous, you don't always get the whole idea. I'm comparing this on the basis that I come from a Magento PHP background where everything is nicely structured in classes and it’s extendable, this feels a lot messier. Every time you have to change something, you have to either completely change it in the code itself or completely rewrite the whole system to do your thing, which can be a pain.
We’ve covered the challenges, but what do you believe the benefits are to using Vue Storefront, as opposed to a traditional ecommerce front end framework?
Dieter: When it works, it’s fast because you only reload the parts that you need. This is because we're only reloading the actual parts of the page and the data that we need at that specific point. When you are going from CMS page one to CMS page two, you're not reloading everything. You're just reloading the content of that specific area, which means you only fetch a bit of data and update the dom with that data. That works a lot faster than a whole page refresh and reloading all assets again.
It is also easier to build your own components when you’re used to it. You just create a component with some HTML and some actions and it does work a lot faster than if you would have to do it on Magento with all the separate files and finding out where all the logic has to go. It does make it faster to create custom things and cuts down on the complexity.
Tomek: It's basically client side rendering versus server side rendering, which has its pros and cons. The cons are SEO, for example, because Vue doesn't render the entire HTML as a regular page, like header, body tags, and then H ones and all of that. It is just a div with JavaScript in it.
Client site rendering, which is Nuxt, kind of solves that problem because you get the HTML rendered on the server and then it gets fetched to the browser. Within the browser, you just update the bits that you need. It's slower than the pure client side rendering, but you get the SEO bonus for that.
When it’s set up correctly, the developer experience is better when you are used to it.
Nick: I think Vue’s benefit is that it is more accessible for a bigger pool of developers to work on. For instance, I wouldn't be able to build a site with just a Magento front end. When it’s Vue I can, and I guess there are a lot more people that know frontend frameworks vs individual ecommerce platforms and templating languages.
Were we still right to throw all our eggs into the PWA basket, does it have a future or is it just a fad?
Nick: My thought is maybe initially we were too optimistic since we started multiple PWA projects at the same time. I do think it’s the future, once you can get it working. I think a big problem we had is we had about three or four of these ongoing and we hadn't fixed the issues in the first one by the time we encountered the same issues in the third or fourth projects. Maybe we should have just tried with one. Once that was ironed out, then taken on several more.
Tomek: We also worked on two different platforms, so the other surprise we encountered is that we started with a few Magento projects and one Shopware 6 project (using their optional PWA frontend built largely by the Vue Storefront team I believe), and it turns out the two are totally different. We couldn't solve the issues that we'd encountered on Magento in the same way on Shopware and it didn’t help if we had already found great solutions. I agree with what Nick said in that we should have started with one project, polished it and when we were ready, taken on the next one because we’d already have the solutions.
Tom: Or we could have started with a smaller proof of concept rather than go try and do a whole site as such. For instance a product details page and we’d start with less, but could have completed more investigations upfront.
James: I think PWA as a concept is definitely a better user experience. Vue Storefront as an implementation of that, it's still very young, so it's more difficult to work with than the existing technologies.
Piotr: I think that PWA is the future, sooner or later because the whole community is moving that way. We had to take some steps towards it. As Nick said, I thought maybe we should have started with one or two projects, but not more than that. This is because as the technology is pretty much fresh, we are pioneers at this point. If I think about it, even if PWA and Vue Storefront were to disappear, then some other solution would exist and everything would still keep evolving in that direction. Maybe I am too optimistic, but thinking back to the early Magento days, it was similar in that they had to do a lot of work, but successfully built it out. So, maybe Vue Storefront will be able to remain the implementation tool for PWA, let’s see.
Closing Remarks: We’ll be launching our PWA projects soon, but if you are interested in working with PWA and Vue.js or Vue Storefront, here are some resources our frontend team recommends:
- VSF Discord.io
- Vue Storefront documentation
- Vue Storefront guide
- Vue Storefront Youtube channel
- Vue Mastery - some cost involved
- Scrimbr - Vue.js bootcamp
- Udemy - courses on Vue Storefront and Vue.js
- Fullstack Vue - book on Vue.js
Main image credit: Annie Spratt
