Our journey with Progressive Web Apps

After hearing about the buzzword headless e-commerce in 2017, we started to explore the headless possibilities. We found some nice headless shops and we were excited! In 2018 we waved the word “headless e-commerce” goodbye and welcomed our new buzzword "PWA".

Seeing the benefits with PWA, an extremely fast and user friendly interface, we knew this would be the next big thing in e-commerce. There are several kinds of Javascript frameworks to develop a PWA shop. After investigating the possibilities we decided to develop our company website with React.js. This journey became both exciting and challenging. The main reason was that React does not use the standard HTML markup. Also developing in React cost more time than usual, because it’s working different and you have to learn about the way it works. After finishing our Vendic site, we also started a project for our WorkatVendic site. This time, with Vue.js framework.

What a relief it was, using Vue.js in combination with the Nuxt application. The framework is easy to understand for developers and the project owner. This way it was easier for our marketing team to create and edit content in standard HTML markup. Also for our developers the Vue.Js framework was easy to understand and not as complicated as React.Js. So after a successful launch of our WorkatVendic site, we decided to redo our Vendic site with Vue.js. With the experience we gained, we were ready for our next step, a PWA webshop.

We noticed some important benefits with PWA for e-commerce as all pages load instantly and there are many frontend possibilities. With this mind, and the experience we gained with PWA a plan was born. We learned about Vue Storefront (developed by Divante) in 2017 when we stumbled upon an conceptstore made with this application. We joined their Slack channel and met the lead developer at the Reacticon event last year. After exploring the Vue Storefront application, we started to develop a demostore.

The PWA demo shop we created was a testcase for one of our Magento 2 customers, who was really excited about this new innovation in e-commerce. With the products, content and styling from this client we developed a realistic demoshop. We developed it on a production server with elastic search and redis. Our backend developer setup a Magento 2 backend and imported the products. The frontend was developed with the Vue Storefront application by the frontend developer. The content was added by the project owner. With only a team of 3 we launched the demo shop in 50 hours.

Magepwa
Instant page load - Demo.mage-pwa.io

We experience lot’s of benefits because our frontend developer and backend developer could work at the shop at the same time. Another benefit would be that the frontend developer does not need to have much knowledge about Magento 2. Also we experienced developing the frontend with Vue Storefront was a lot quicker than with native Magento 2. The only difficulty we came across was launching the site to a production server. There was no documentation about it, so we had to solve it ourselves.

Webshops created as PWA with use of M2 backend and the Vue Storefront frontend are the best of both worlds. Vue Storefront offers the advantage of being an open source frontend eCommerce application, that works extremely fast in comparison with other competitors. Magento 2 has an excellent backend with lots of possibilities for webshop owners. The advantages of M2 backend and Vue Storefront frontend combined:

  • Extremely fast and optimized for e-commerce
  • Instant page load
  • Large amount of traffic is no problem
  • Offline shopping experience
  • Increased usability through App look & feel
  • Maintaining everything in one place


Search
Ultra fast search - Demo.mage-pwa.io

So what’s next? With our demo store we want to create more awareness for PWA in combination with a Magento 2 backend. If we compare the development of a traditional Magento 2 webshop with the PWA demo, it would be 3 times faster to develop. We also noticed Google is really liking it. We experienced that our Vendic pages and blogs are ranking really high (top 3) after one week of publishing a page or blog.

This is why we created the community platform Mage-PWA to show webshop vendors examples of Magento 2 PWA shops. Here you can find everything about PWA combined with a Magento 2 backend. As our Mage-Superhero’s would say: Let’s save e-commerce with PWA!

Author