Vue storefront London PWA meetup
- 1. Vue Storefrontheadless PWA for eCommerce
- 2. Filip Rakowski Co-creator @ Vue Storefront Frontend Developer @ Divante Author @ PWA.buzz filrakowski frakowski
- 5. 2014 - 1.6 billion 2017 - 2 billion ...still growing! Users made some kind of eCommerce transaction using phone or tablet 5
- 6. 6
- 8. Slow, especially with bad internet connection Complicated checkouts (mobile UX killer) Not suited for mobile devices (sometimes even without RWD!) Client perspective
- 9. Hard to find developers specialized in eCommerce platforms Long and complicated development (long time2market) User problems decrease conversion rate Business perspective
- 11. Vue Storefront eCommerce of the future!
- 13. Offline-ready, ultrafast PWA Really fast and enjoyable development with all standard eCommerce features out of the box Can be integrated with any eCommerce! Key features Mobile first and works like a native mobile app Painlessly upgradable core with new features every month (as NPM package) No architectural limitations (normal Vue.js app)
- 14. Key features Open source and MIT license!
- 15. 15 How it works (simplified) eCommerce CMS Vue Storefront API Vue Storefront Same for every platform thanks to adapter API Adapter For each platform (Magento 2 and Pimcore integrations are ready) Magento, Shopify or any other Single Page App PWA written in Vue.js NoSQL DB
- 16. How it works (simplified) 16 eCommerce CMS Vue Storefront API Vue Storefront API Adapter NoSQL DB Real-time sync based on product updates
- 17. Frontend architecture Extensions (e.g new payment methods, mailchimp, integration, Google Analytics integration) Theme This is your shop! Developed like a separate Vue.js application that can make use of VS core and extensions Vue Storefront Core Contains all standard eCommerce features, state management, offline capabilities and database integration. Its upgradable as a NPM package and extendable via extensions. core src themes extensions Your playground!
- 18. 100% offline-ready How to make better use of PWA features
- 19. Standard PWA with App Shell cached 1/5 Harolds in coolness scale
- 20. How can we get more Harolds?
- 21. Caching data IndexedDB can cache up to 50 mb of data for browsers other than Safari its even more!
- 22. Did you just said other than Safari?
- 23. Caching data IndexedDB can cache up to 50 mb of data Thats a lot for just JSONs!
- 24. Caching data Lets cache App Shell (boring) AND DATA
- 25. Caching data Lets cache App Shell (boring) AND DATA (a bit less boring)
- 27. Caching data 2/5 Harolds in coolness scale
- 28. Dynamic data What about dynamic data like stock quantitys or prices?
- 29. Dynamic data Dynamic data is valid for some time...
- 30. Dynamic data ...so measure the time user is offline and display the data as long as it should be valid
- 32. Dynamic data 3/5 Harolds in coolness scale
- 33. Offline UI changes When user goes offline and website still works he is probably not aware of lost connection and limited functionality.
- 34. Let him/her know that some parts of the app can work differently and take care of his good offline experience.
- 35. Create friendly fallbacks for data that wasnt cached
- 37. Offline UI changes 4/5 Harolds in coolness scale
- 38. CRUD So now we have proper offline experience but still we are struggling with the same issue most PWAs do
- 40. CRUD Create Read Update Delete Only this works offline
- 41. Background sync allows us to send requests made offline just after coming back online via Service Worker. We can use it to allow placing offline orders!
- 42. The problem with offline orders (and offline requests) is that you cannot be sure that they were not made for the second time in other device before the first one came back online.
- 43. We can make use of push notifications to confirm orders that were placed offline (the same way native apps are asking for updates).
- 44. 5/5 Harolds in coolness scale!
- 45. One tap instead of N-taps
- 47. 47 Join and contribute! ...or give us a GitHub star! ;) Great community! Ccommited developers eager to make this project as good as it is possible Rich documentation ...and its still growing ) Everyday commits New features/fixes/improvements every day!
- 48. 48 Thank you! Filip Rakowski filrakowski @ twitter frakowski @ medium Piotr Karwatka piotrkarwatka @ twitter piotrkarwatka @ medium Here are some links and people to follow if you want to learn more about Vue Storefront: github.com/DivanteLtd/vue-storefront VueStorefront.io @vuestorefront