As we start to embrace the world of PWA and look at where retailers are going, the GPMD team has been working on its first PWA project. It’s been a learning curve which we wanted to document and share with others who may also be in the same boat.
We sat down with James, Piotr and Dieter from our frontend team and asked them to share their experiences working with Vue and their first PWA project so far.
What advice would you give a dev getting into their first PWA/Vue Storefront project?
Piotr: Keep referring to the documentation - Vue Storefront is changing all the time, so it’s always a good idea to stick with the documentation. Then, you can keep referring back as you learn more. If possible, especially if you are new to this like we are, it’s good to document certain things like installation processes or customisations yourself to help with referring back and keeping track. Click here for Vue Storefront documentation and Vue Storefront guide.
James: If you can find a buddy in the VSF community who already knows Vue that will also help! There is a community slack group - click here for the invitation.
Dieter: Set up a VSF site, install Capybara (theme) and check out the code to see how things work. If you’re new to VueJS then you could do some online courses to get you up-to-speed - everything is Vue based so you need to know it. If you want to set up modules with VueX then you should find a crash course on Typescript.
What is the developer community like for Vue Storefront?
James: It’s fairly new so not as active as Magento was. However, from what we can see, more and more people are joining everyday so we expect it to get more traction over this year, worth joining! There is also a regular Youtube Live feed where you can watch the Vue Storefront team host Q&A sessions. You can chat to them directly as well if you need to. Click on link here to subscribe.
Piotr: There is also a Vue Storefront Forum, and Storefront UI Discord server that you can join as other sources for connecting with other devs.
Have you come across any really good resources for learning VueJS, PWA and/or Vue Storefront?
James: There is some cost involved, but Vue Mastery is very good. If your company can support it as part of your training, it’s worth getting your employer to invest in it. And don’t forget about Udemy they have 100s of courses available on Vue Storefront, and not too pricey as well as Vue.js.
Piotr: There are also some free resources on there as well to get you started. Also, I’d recommend checking out Scrimba for a Vue JS bootcamp - this is coming soon but worth keeping an eye on - and there’s a couple of free courses on there too.
Dieter: For VueJS I recommend a book called Fullstack Vue. This massively helped me with what I’m doing now - without it I would have really struggled.
Have there been any technical limitations learning to use Vue Storefront? What have you found most challenging in learning to work with Vue Storefront?
James: Connecting with Magento has been challenging, if you come from a Magento background (or any different framework) this is a very different way of working. The architecture was very different and so coming from a different frontend framework, we had a bit of an adjustment period. Also, conventions in Vue are a bit problematic. For example, take the case of single file components: so you’ve got your templates, and advanced logic and sometimes you’ll be testing in the same file , that is a bit different to what I’m used to and this then does cause difficulties in overriding things. You can of course separate things out into separate files, however people don’t seem to do that in practice. Essentially, it’s modular on a component level but not modular on an atomic level.
Piotr: I still don’t know, for example, how to pull PHTML from Magento 2 into Vue Storefront.
Dieter: The setup is much more complex than working with, for example, only Magento, because there are many more steps to consider. With VSF you have a number of different repos that you have to work with - For example, there’s the Magento repo, the VSF one, and then the VSF API one which works with Elastic Search. So to connect to Magento you have to build a module in Magento that indexes the data and passes it via Elastic Search to the VSF API etc.
What are your feelings, so far, on Capybara (the new Storefront UI based theme)?
James: I like how they are trying to be modular with it, however it’s very new and changing everyday and that can be hard to keep up with.
Piotr: Lack of theme inheritance is a bit of a problem as it makes things difficult. You can’t, for example, just style a theme and then modify the few bits that you want, you have to clone the entire thing and then modify that and then try to keep that up-to-date. And then if you want variations on different stores, it’s not yet clear how to do that but hopefully there is a way we are still learning as well.
Dieter: I don’t have experience with any other VSF themes so I have nothing to compare it to. However, something I’m not keen on is there’s no theme inheritance, which makes things complicated when we need to update the theme from the original source (which is updated frequently as it’s so new and changing constantly). Other than that I like how it’s using custom CSS properties, although it takes a bit of getting used to where everything is and the right way of working.
Are there already things you would do differently now that you are part-way into your first Vue Storefront/Magento 2 project?
Piotr: Follow the documentation better!
James: We started tracking all the pitfalls better, so hopefully the next person doesn’t have them.
Dieter: Possibly. We are migrating a theme from Magento 1 to Magento 2/VSF, and it’s been hard to know exactly what to migrate and what to leave behind. We’ve probably copied over more CSS from the old project than is needed, but it’s hard to tell for sure. There is obviously room for improvement in everything we do.
In your opinion, what are the pros and cons at the moment of using Vue Storefront, as opposed to a traditional ecommerce framework?
Piotr: There are decent benefits for the end user; to make things faster, more efficient, and improve metrics like conversion. For us devs, we are learning something new, we are keeping up with advancing technology and not falling behind.
James: Using Vue as a tool, the UI state management that it has seems like a nice way to manage your UI, rather than using JQuery to modify things in your page. You can get a bit lost sometimes and it needs more exploring, but so far it looks like a nice way to develop a UI.
Piotr: We can plug into any ecom backend and it’s good then that we have a consistent frontend framework across all projects, regardless of backend.
James: The downside of that however is that none of the modules for the traditional platforms we work with, work with Vue Storefront yet. But that will improve over the next year once module vendors start using Vue as a UI for their stuff. In a nutshell, we have to rewrite the frontend for our platform’s modules - they don’t work out of the box.
Dieter: The main pro is speed, it’s a LOT faster on the front end! I can’t really say much about the cons yet as it’s so new to us, we don’t really have any data. However, one downside is that because it’s so new it takes a lot longer for us to build things (because you can’t just find and install a module like you can with other frameworks).
Are we right to throw all our eggs into the PWA basket?
James: “I think it’s the future, but the future is not now” - It has lots of potential and we will be ahead of the curve. The technology is improving everyday and it has a very good core, it’s just very early days.
Piotr: We are going in the right direction, we believe it’s the future.
Closing Remarks: All in all, its early days for us but we are very excited to be on this journey with Vue Storefront. We are fully on board, as we think this is where the technology is going and are looking forward to seeing the results and benefits to our clients Excited to get our first project over the line!
