Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Modernizing Vue Storefront 1

Presentation on modern-day practices for Vue Storefront 1

  • Be the first to comment

  • Be the first to like this

Modernizing Vue Storefront 1

  1. 1. Modernizing Vue Storefront 1 Yireo - Modernizing Vue Storefront 1 1 of 14
  2. 2. Jisse Reitsma Yireo - Modernizing Vue Storefront 1 2 of 14
  3. 3. Jisse Reitsma Owner of Yireo Yireo - Modernizing Vue Storefront 1 2 of 14
  4. 4. Jisse Reitsma Owner of Yireo Extension developer Yireo - Modernizing Vue Storefront 1 2 of 14
  5. 5. Jisse Reitsma Owner of Yireo Extension developer Trainer of developers Yireo - Modernizing Vue Storefront 1 2 of 14
  6. 6. Jisse Reitsma Owner of Yireo Extension developer Trainer of developers 3x Magento Master Yireo - Modernizing Vue Storefront 1 2 of 14
  7. 7. Jisse Reitsma Owner of Yireo Extension developer Trainer of developers 3x Magento Master Organizer of Reacticon and MageTestFest 3 times Reacticon 2 times MageTestFest Yireo - Modernizing Vue Storefront 1 2 of 14
  8. 8. Reacticon 4 Frontend developer conference Magento Hyva Themes, PWA Studio, Vue Storefront 1 Shopware PWA and other headless alternatives Discussions, talks, hangouts, fun June 14th-18th 2021 Free attendance Slack space YouTube livestream See reacticon.org  Yireo - Modernizing Vue Storefront 1 3 of 14
  9. 9. Vue Storefront 1 On-Demand training 9.5 hours of videos 300+ pages of text More coming up Additional topics on VSF1 Also new courses on Magento PWA Studio, VSF Next and more See yireo.com/vue  Yireo - Modernizing Vue Storefront 1 4 of 14
  10. 10. What about Vue Storefront Next? Yireo - Modernizing Vue Storefront 1 5 of 14
  11. 11. What about Vue Storefront Next? Nuxt.js based Yireo - Modernizing Vue Storefront 1 5 of 14
  12. 12. What about Vue Storefront Next? Nuxt.js based Supported platforms CommerceTools Shopify (thanks to Aureate) Shopware (as Shopware PWA) ... Yireo - Modernizing Vue Storefront 1 5 of 14
  13. 13. What about Vue Storefront Next? Nuxt.js based Supported platforms CommerceTools Shopify (thanks to Aureate) Shopware (as Shopware PWA) ... No Magento support Yireo - Modernizing Vue Storefront 1 5 of 14
  14. 14. What about Vue Storefront Next? Nuxt.js based Supported platforms CommerceTools Shopify (thanks to Aureate) Shopware (as Shopware PWA) ... No Magento support But Vue Storefront 1 is not dead yet Thanks to Filip Jedrasik Yireo - Modernizing Vue Storefront 1 5 of 14
  15. 15. Capybara Yireo - Modernizing Vue Storefront 1 6 of 14
  16. 16. Capybara Do not use Default Theme Use Capybara Yireo - Modernizing Vue Storefront 1 6 of 14
  17. 17. Capybara Do not use Default Theme Use Capybara Do not copy an entire theme Use parent/child theming Yireo - Modernizing Vue Storefront 1 6 of 14
  18. 18. Capybara Do not use Default Theme Use Capybara Do not copy an entire theme Use parent/child theming Add Storefront UI elements where you want VSF Next is based on Storefront UI too Presentational components will keep on working (mostly) Yireo - Modernizing Vue Storefront 1 6 of 14
  19. 19. Parent & Child theming Yireo - Modernizing Vue Storefront 1 7 of 14
  20. 20. Parent & Child theming Do not copy les Yireo - Modernizing Vue Storefront 1 7 of 14
  21. 21. Parent & Child theming Do not copy les Use Webpack! Yireo - Modernizing Vue Storefront 1 7 of 14
  22. 22. Parent & Child theming Do not copy les Use Webpack! Example: yireo-training/vsf-yireo-theme Yireo - Modernizing Vue Storefront 1 7 of 14
  23. 23. Parent & Child theming Do not copy les Use Webpack! Example: yireo-training/vsf-yireo-theme Based on yireo/vsf1-webpack-inheritance-plugin Yireo - Modernizing Vue Storefront 1 7 of 14
  24. 24. Slow compilation? Yireo - Modernizing Vue Storefront 1 8 of 14
  25. 25. Slow compilation? Skip SSR compilation Yireo - Modernizing Vue Storefront 1 8 of 14
  26. 26. Slow compilation? Skip SSR compilation Use Webpack! Yireo - Modernizing Vue Storefront 1 8 of 14
  27. 27. Slow compilation? Skip SSR compilation Use Webpack! Example: yireo-training/vsf1-local-webpack Yireo - Modernizing Vue Storefront 1 8 of 14
  28. 28. Override speci c les Do not hack the core Use Webpack! File src/themes/capybara/webpack.config.js ... const mergedConfig = merge( { resolve: { alias: { 'src/modules/client': `${themeRoot}/config/modules` } } }, config, clientConfig ); ... Yireo - Modernizing Vue Storefront 1 9 of 14
  29. 29. Stay up to date VSF1 is still optimized with small releases Keep an eye on Github repos Small xes matter Copy changes manually, cherrypick commits Do not just patiently wait for a new o cial release Yireo - Modernizing Vue Storefront 1 10 of 14
  30. 30. Use Storybook Yireo - Modernizing Vue Storefront 1 11 of 14
  31. 31. Use Storybook Draft a simple style tile (or mood board or whatever) Plain Vue app without dynamic behaviour Add Storefront UI as a Node dependency Add all HTML / CSS output and make sure it looks good Yireo - Modernizing Vue Storefront 1 11 of 14
  32. 32. Use Storybook Draft a simple style tile (or mood board or whatever) Plain Vue app without dynamic behaviour Add Storefront UI as a Node dependency Add all HTML / CSS output and make sure it looks good Move Vue components into Storybook Maintain your own UIComponents along-side your VSF project Yireo - Modernizing Vue Storefront 1 11 of 14
  33. 33. Composition API Install the Composition API plugin for Vue 2 Add your own composables for logic Local state Vuex bindings GraphQL calls Yireo - Modernizing Vue Storefront 1 12 of 14
  34. 34. Other considerations Yireo - Modernizing Vue Storefront 1 13 of 14
  35. 35. Other considerations A theme is just some HTML and CSS Use Tailwind, Material, whatever Yireo - Modernizing Vue Storefront 1 13 of 14
  36. 36. Other considerations A theme is just some HTML and CSS Use Tailwind, Material, whatever Separate logic from output Presentational vs stateful components Yireo - Modernizing Vue Storefront 1 13 of 14
  37. 37. Other considerations A theme is just some HTML and CSS Use Tailwind, Material, whatever Separate logic from output Presentational vs stateful components Tryout the GraphQL binding Switch from ElasticSearch to GraphQL (SF Query Builder) But beware of the performance! Yireo - Modernizing Vue Storefront 1 13 of 14
  38. 38. Other considerations A theme is just some HTML and CSS Use Tailwind, Material, whatever Separate logic from output Presentational vs stateful components Tryout the GraphQL binding Switch from ElasticSearch to GraphQL (SF Query Builder) But beware of the performance! Use the new Storefront API instead of VSF1 API Some integration of Apollo Server (with GraphQL caching support) Yireo - Modernizing Vue Storefront 1 13 of 14
  39. 39. Thanks @jissereitsma Yireo - Modernizing Vue Storefront 1 14 of 14

×