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.

Game changer for e-commerce - Vue Storefront - open source pwa

711 views

Published on

Mobile first, open source, progressive web app (PWA) for eCommerce

Published in: Internet
  • Discover a WEIRD trick I use to make over $3500 per month taking paid surveys online. read more... ◆◆◆ http://ishbv.com/surveys6/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • ♣♣ 10 Easy Ways to Improve Your Performance in Bed... ▲▲▲ http://ishbv.com/rockhardx/pdf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

Game changer for e-commerce - Vue Storefront - open source pwa

  1. 1. Vue Storefront - PWA for Magento as a Game Changer for eCommerce Piotr Karwatka Vue Storefront / Divante
  2. 2. Hey eCommerce, what’s wrong with you?
  3. 3. The average load time for mobile sites is 19 seconds over 3G connections. On a 4G network the average time isn’t much better: 14 seconds
  4. 4. 53% of mobile site visits are abandoned if pages take longer than 3 seconds to load. 75% of mobile sites take longer than 10 seconds to load.
  5. 5. We aren’t ready for mobile. Fine?! But we feel strong on desktop!
  6. 6. Yes, we have some legacy code and outdated framework, we do serious IT! It’s safe and stable, we don’t need these hipster-js-things in the project!
  7. 7. 40% of major eCommerce companies experience periods of website downtime during seasonal traffic peaks. 56% noted that their website experienced longer loading times during seasonal peaks
  8. 8. eCommerce demand has outgrown current tech-stacks
  9. 9. eCommerce demand has outgrown current tech-stacks
  10. 10. We need new tools! eCommerce demand has outgrown current tech-stacks
  11. 11. HEADLESS front-end is stand-alone software, which communicates with a back-end via an API bit.ly/headless-ebook
  12. 12. HEADLESS front-end is stand-alone software, which communicates with a back-end via an API DESIGN SYSTEMS a collection of reusable components, guided by clear standards, that can be put together
  13. 13. PROGRESSIVEHEADLESS front-end is stand-alone software, which communicates with a back-end via an API DESIGN SYSTEMS a collection of reusable components, guided by clear standards, that can be put together WEB APPS web applications that can appear to the user like traditional applications or native mobile applications
  14. 14. Mobile apps provide the finest user experience, but have some limitations USER ACQUISITION need to be downloaded COSTS expensive to build & maintain BUSINESS MODEL high commision lack of control over publishing USER EXPERIENCE different on every device
  15. 15. The new mobile standard Progressive Web Apps one app for all channels Multi platform Lighting fast Off-line ready Black Friday ready Google Microsoft Apple
  16. 16. Vue Storefront Mobile-first ecommerce frontend that allows you to build super fast eCommerce websites and apps, without changing the backend platform. Open Source Head-less approach Design Systems Time2Market < 60 days. www.vuestorefront.io
  17. 17. Provide native app features Vue Storefront feels just like an app - it even has app-style interactions and navigation. Full screen Hiding the browser top URL bar and the bottom navigation menu Home screen Instant access from the home screen without opening the browser and typing a URL Push Notifications Push notifications with a one click opt-in directly from the PWA site. Offline mode Browsing with a weak or even lack of a network connection.
  18. 18. Anytime. On any device. Vue Storefront behaves the same on each device. Vue Storefront behaves the same on each device. It delivers a 100% responsive and smooth shopping experience, so it’s not necessary to develop apps for different web browsers and platforms. Vue Storefront works on: Android phones Desktop browsers (Edge, Chrome, Safari, Opera etc.) iOS phones and MacBooks Windows
  19. 19. Accelerate with PWA advantages By combining the best of the web and native apps, Vue Storefront gives significant business capabilities. Install directly Vue Storefront is much smaller than native apps, so it loads faster, works better over low- bandwidth networks and takes up less space on a user’s device. Up to date PWAs synchronize data in the background even when a user is not active. The app is always up- to-date with the latest version and content served instantly. Discoverable Vue Storefront is fully searchable and indexable, contrary to native apps. You can easily bookmark and share every page. Analytics You can track website users the mobile app way, for example: number of installs, active & offline users or even notification performance. Trusted by the World’s Top Brands
  20. 20. With eCommerce features Shopping - adding products to cart, stock synchronization, Cart Expiration, Multi-store, Products bundle and many more Ordering - Offline ordering (via in-browser queue), High speed with local caching, SSL for all online orders, Crossell, Upsell and more Checkout - built-in checkouts, external checkouts, creating an Account during the Checkout Process, checkout fallback option and more Payments - synchronization with major payment service providers like Google, PayPal and a few others Shipping - online Tax and Shipping Calculation, Multiple shipping addresses, free shipping functionality and more Open Source CMS and PIM Open Source Loyalty
  21. 21. 21 Check the demo on Your device! https://demo.vuestorefront.io
  22. 22. 470 developers in the Community 8th most popular eCommerce Platform on GitHub 2nd most popular Magento repo on GitHub 25+ official Partners join the Community https://github.com/DivanteLtd/vue-storefront Projects live: India, Holland, Italy, Russia, Poland, USA Workshops, Trainings, PoC, Time2Market <60 days
  23. 23. Technology & Architecture
  24. 24. Architectur e eCommerce CMS Magento, Shopify or any other CMS API Adapter For each platform (Magento and Pimcore integrations are ready) NoSQL DB VUE Storefront API Same for every platform thanks to adapter VUE Storefront Single Page App PWA written in Vue.js Vue Storefront is platform agnostic and can be connected via API to virtually any eCommerce CMS. It doesn’t require backend changes to your current store which makes it an excellent choice for this scenario.
  25. 25. Architectur e eCommerce CMS Magento, Shopify or any other CMS API Adapter For each platform (Magento and Pimcore integrations are ready) NoSQL DB VUE Storefront API Same for every platform thanks to adapter VUE Storefront Single Page App PWA written in Vue.js Vue Storefront is platform agnostic and can be connected via API to virtually any eCommerce CMS. It doesn’t require backend changes to your current store which makes it an excellent choice for this scenario. Real-time sync based on product updates
  26. 26. Frontend Architecture Vue Storefront Core Contains all standard eCommerce features, state management, offline capabilities and database integration. It’s upgradable as a NPM package and extendable via extensions. Theme For each platform (Magento and Pimcore integrations are ready) Extensions (e.g new payment methods, mailchimp, integration, Google Analytics integration) core src themes extensions Your playground!
  27. 27. Framework Theming, extensions, re-usable components Vue Storefront is meant to be a Framework It’s divided to re-usable Vue components and Vuex data stores. It’s designed to be updateable without modifying the Core. Theming You can put your theme under /themes - which inherits (using Vue Mixins) all the default components and pages Extensions Extensions are registered in app.js - you can add your own features: ● additional Vuex stores, ● routes, ● pages and components SSR & client side hydration For better SEO results we’re using Server Side Rendering (https://ssr.vuejs.org/en/) - basically it’s not a typical SPA application
  28. 28. eCommerce site in 20 working days? Developers and business loves Vue Storefront Vue.js Much easier than React, the same performance + features Theming Vue Storefront is built as a Framework - you can change the UI as You wish without modifying the Core. Elastic, Node, Express For backend. Elastic is cool because not only of performance but full-text search which is crucial for eCommerce. Node + Express - kind of JS industry standard.
  29. 29. From developers to developers Developers and business loves Vue Storefront The biggest difficulty we have had is finding FE’s willing to work on the platforms, training them up and then trying to convince them to stick it out — Magento being the one that most of our developers simply refuse to work on. Now, coming across VS, I may have discovered the light at the end of the tunnel. Front-End devs developing with what they enjoy….JavaScript. “Anyone who worked with me on the project told me that Vue Storefront is very easy to learn and super fun ;)” – Irene Iaccio, BitBull “We enjoy working with Vue Storefront as it has great simplicity for preparing HTML layouts. What’s more, it helps to build elastic solutions for PWA and thus dramatically improves frontend speed.” – Andrey Putin, CEO, KT Team. If we compare the development cost of a traditional Magento 2 webshop with the PWA demo, it would be 3 times faster to develop. Also, the page speed is insanely fast and it looks like Google is really liking it. We experienced that our pages and blogs are indexed really high in the SEO results (top 3) after one week of publishing a page or blog – Estera Dugulan, Vendic.
  30. 30. In La Nature loading time is not a problem Developers and business loves Vue Storefront LaNature.ru Luxury goods eCommerce Magento 2.2 with a set of integrations with 1C USP, CRM Bitrix-24, a loyalty system and wholesale functions for franchisees. Independently from Magento, the developers chose Vue Storefront as a front end PWA solution. Separating backend and frontend allows for short loading and rendering times. Doing that for La Nature, developers decreased: switching catalog pages time by up to 0.1 second and catalog first loading time (providing the visible part of the catalog with images) by up to 1.5 second. “We enjoy working with Vue Storefront as it has great simplicity for preparing HTML layouts. What’s more, it helps to build elastic solutions for PWA and thus dramatically improves frontend speed.” – Andrey Putin, CEO, KT Team.
  31. 31. The Special’s store Developers and business loves Vue Storefront PoC for Special’s Milano based footwear retail 2 months, 2-3 days per week, 2 developers Around 20 working days for fully fledge MVP “Leveraging Vue Storefront for the development of the project frontend, we’ve seen unprecent development speed. In Vue Storefront, we have found the missing piece that let us apply Lean principles on this eCommerce project. I’m sure that even big enterprise projects will truly benefit from this approach and will be able to direct our efforts towards business goals, not the tools to achieve them.” – Gennaro Vietri – CTO of Bitbull
  32. 32. TheHourGlass.com Singapore based eCommerce Three full time engineers To be released soon :-) We are working on it now, We are on final stage for internal release, we will release to production soon… You and your team are doing a very very great project…really appreciate what you have done and doing - Bao Nguyen eCommerce site in 20 working days? Developers and business loves Vue Storefront
  33. 33. Vue Storefront - The future-proof solution We react quite fast and embrace all opportunities that are open for eCommerce. Focus on frontend. Bringing frontend innovations at speed. Google made page speed a factor in mobile search ranking. January ‘18 February ‘18 March ‘18 April ‘18 July ‘18 Vue Storefront is much faster to interact with, as well as providing smoother scrolling and transitioning of pages. Microsoft brought PWA standard into Microsoft Edge and Windows 10. Vue Storefront is fully compatible with Progressive Web App standard, so it’s going to be available on any Windows device. Google began with Mobile-first indexing as a SEO ranking factor. Vue Storefront delivers an exceptional mobile UX which gives higher rankings position- even for desktop searchers. Apple announced PWA support on iOS and macOS devices. Vue Storefront works not only on Android phones and desktop browsers (IE, Chrome, Firefox, Opera) but on iOS phones and MacBooks too. Google Start marking non-HTTPS sites as ‘not secure’. Vue Storefront is served via HTTPS, ensuring that data is encrypted, has better performance & caching and is promoted as SEO ranking signal.
  34. 34. The platform for future growth Visual Recognition Take advantage of the Clarifai.com API with a PWA to automatically tag, organize, and search visual content with its machine learning engine. Chatbot Use a PWA as a platform for chatbot development. It is much more reasonable to offer a full blown user experience via PWA than going into native solutions. Virtual Assistants Virtual Assistants (Alexa, Siri, Google Now, Cortana) usage grew 23.1% in 2017. This year, 60.5 million Americans will use them. It’s nearly 20% of the US population. One Touch checkout The expiration of Amazon’s US patent on one-click ordering (September 2017) allows companies to use express checkout functionality on their sites. You can extend the mobile-first experience by adding more channels. Voice Commerce Amazon Alexa and Google Home used with Vue Storefront &
  35. 35. Try Vue Storefront for Mobile-First Commerce Piotr Karwatka pkarwatka@divante.co
  36. 36. Sources 1. ttps://www.forbes.com/sites/michelleevans1/2017/04/12/how-china-won-the-race-to-being-considered-a-mobile-first-commerce-nation/ #2c7e22a91b49 2. Mobile Payments Report 2018, Acapture by payvision 3. https://www.leadpages.net/blog/psychology-of-waiting/ 4. https://neilpatel.com/blog/4-easy-ways-to-generate-ecommerce-sales-from-instagram/ 5. https://trackmaven.com/blog/marketing-instagram-algorithm/ 6. https://sproutsocial.com/insights/instagram-stats/ 7. https://sproutsocial.com/insights/hashtags-for-instagram/ 8. https://www.clickz.com/how-ecommerce-brands-use-instagram-to-reach-their-goals/95996/ 9. https://medium.com/@distillerytech/digital-transformation-why-enterprises-need-progressive-web-apps-b37a9e223157 10. https://www.doubleclickbygoogle.com/articles/mobile-speed-matters/ 11. http://www.retail-systems.com/rs/Retailer_Websites_Experiening_Downtimes.php 12. https://www.statuscake.com/websites-of-40-of-uk-e-commerce-firms-experience-downtime-during-seasonal-traffic-peaks/ 13. https://www.practicalecommerce.com/10-Surprising-Mistakes-on-Large-Ecommerce-Sites 14. https://www.decibelinsight.com/blog/how-load-speed-impacts-user-focus-time-analysis-of-83828-sessions

×