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.

Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech

3,609 views

Published on

What's cool about Progressive Web Apps for eCommerce? How does Vue Storefront work and how to setup it with Magento (1.9, 2.x)

Published in: Internet
  • Be the first to comment

Vue Storefront - Progressive Web App for Magento (1.9, 2.x) - MM18DE speech

  1. 1. Mobile first, offline second, PWA for eCommerce Andreas Anding Business Development Consultant, Divante Piotr Karwatka, CTO, Divante
  2. 2. eCommerce Software House 2 10 years on the market 100+ clients globally 150+ team members 300+projects delivered
  3. 3. 3 The Agenda 1. eCommerce - what’s wrong with you? 2. Progressive Web Apps - what’s all about? 3. Vue Storefront - first open source PWA for eCommerce 4. See it in action! 5. Architecture 6. Design Challenges 7. Key Concepts in practice Vue Storefront is an open source (MIT) project powered by cool, open source technologies:
  4. 4. eCommerce - what’s wrong with you?
  5. 5. 5 eCommerce right now
  6. 6. not suited for mobile not stable during peaks not effecitve with poor internet connection long time2market eCommerce right now GAP Technology Creators (eg. AFGA) Customers Companies (Retailers/Manufacturers)
  7. 7. Progressive Web Apps
  8. 8. 8 Progressive Web Apps Best features of Mobile App (UX) and Web (Distribution) combined • Offline readiness • Home Screen • No Submission • Linkable • Re-engageable Alibaba Case Study • 76% higher conversions across browsers • 14% more monthly active users on iOS; 30% on Android
  9. 9. ES2015/2016, IndexedDb Service Workers (check https://serviceworke.rs/ for recipes) Techniques: PRPL, SSR Reactive frameworks (React, Vue, Polymer …) Progressive Web Apps Best features of Mobile App (UX) and Web (Distribution) combined Supported by: Chrome, Samsung, Microsoft, Apple, Opera (https://jakearchibald.github.io/isserviceworkerready/)
  10. 10. Vue Storefront
  11. 11. 11 Bleeding edge, scalable technology Node.js, Vue.js, Elastic Blazing fast It render at no time. Always. 100% offline, Black-Friday ready :)
  12. 12. 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)
  13. 13. You need a Web, Mobile Web, iOS App, Android App, Windows App, .. eCommerce Websites are not stable during peaks Websites are not effecitve with poor internet connection Long time2market to develop Mobile Apps and Mobile Web Progressive Web Apps – Website that can be installed as an App. Best features of Mobile App (UX) and Web (Distribution) combined Storefront can be run without alive web- server there is no such traffic peak that can stop users from making orders Offline readiness - app can be used off-line Out-of-the Box Product, Based on Vue.js, developer-friendly approach, good doc Challenges Solution
  14. 14. Project status All basic promotions, product types, catalog features supported 18 local partners + 46 active contributors + 10 ongoing projects Production ready and stable. Magento 1.9 and Magento 2.x full support
  15. 15. … and one more thing Open source and MIT license! github.com/DivanteLtd/vue-storefront @vuestorefront
  16. 16. See it in action!
  17. 17. See it in action! github.com/DivanteLtd/vue-storefront@vuestorefront
  18. 18. … and one more thing Let’s go to demo.vuestorefront.io github.com/DivanteLtd/vue-storefront @vuestorefront
  19. 19. Contribute! - 1.5k stars on Github (top 10 vue.js project) - 300 developers on Slack - 46 active contributors on Github - 18 official partners
  20. 20. Architecture
  21. 21. How it works (simplified) Vue Storefront API Same for every platform thanks to adapter API Adapter For each platform (Magento 2 and Pimcore integrations are ready) eCommerce CMS Magento, Shopify or any other Vue Storefront Single Page App PWA written in Vue.js NoSQL DB
  22. 22. How it works (simplified) Vue Storefront API Same for every platform thanks to adapter API Adapter For each platform (Magento 2 and Pimcore integrations are ready) eCommerce CMS Magento, Shopify or any other Vue Storefront Single Page App PWA written in Vue.js NoSQL DB Real-time sync based on product updates
  23. 23. 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. core src themes extensions Your playground! 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
  24. 24. 24 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 • Webpack We’re using it extensively: for Babel compiling (we’re ES2016 compliant), sw-precache, code chunking, optimization, dev server ...
  25. 25. Design Challenges
  26. 26. 26 Design Challenges For the prototype we decided to design PWA for a fashion brand • Here you have some free tips: ○ Ensure that the keyboard won’t cover the view of key elements of the app; ○ Use 2x size for the png images and SVG files to keep the design looking clear on all types of screens; ○ Make touchable components like the buttons or links big enough; ○ Useless text links because they are harder to use on small screens; ○ Verify how does the application behave while changing the size with the rotation of the device. • Figma We used Figma for its collaboration features to create the Vue Storefront Design System (designs are MIT licensed too), with grid, mobile interactions • UX Challenges ○ Payments while offline? ○ Stock quantities while offline? ○ Seamless experience on many devices, ○ Cart/dynamic promo rules, ○ ... Read more: https://www.linkedin.com/pulse/designing-pwa- ecommerce-karl-bzik/
  27. 27. Key concepts in practice
  28. 28. 28 PRPL & SSR Push Render Pre-cache Lazy Load & Server Side Rendering • (PUSH) We’re using window.__INITIAL_STATE__ to populate Vuex data stores without hiting Service Worker nor Server. Not using HTTP/2 at this point. • (RENDER) We’re using Vue SSR It’s quite useful - you have two entry points: client-entry.js for standard SPA and server-entry.js for SSR (with client side hydration - still you’re able to use full featureset of Vue). We’re using Webpack’s vue- ssr-webpack-plugin • (PRE-CACHE) We’re using <link rel="preload"> and Service Workers (sw-precache) for caching the content - statics, routes and REST API calls • (LAZY LOAD) We’re using Webpack’s Code splitting Additional steps: - Static files (product images) are optimized server side (resize/crop) to the device, - CDN support for static files, - CDN support for routes (as the Server Side Rendering results can be hosted from App server, Varnish, Cloudflare/other CDN)
  29. 29. 29 Service Workers Service worker is kind of a proxy to bypass the server communication • It’s kind of proxy combined with background job :) Service worker can proxy all the requests within your page scope (limited to https), work in background, show push notifications (https://developers.google.com/web/fundamentals/codelabs/push-notifications/) • sw-toolbox + sw-precache We’re using tools from Google Chrome team as a boiler-plate and then extend the generated service-workers it with our own logic https://github.com/GoogleChromeLabs/sw-toolbox • Loose coupled The only way to communicate between page and worker is postMessage() messaging interface which actually is cool. You can find many cool patterns for designing SW here: https://serviceworke.rs/ • We use IndexedDb to queue orders and newsletter subscriptions … and of course for caching all the statics and API calls Service workers are quite well supported by Chrome, Samsung, Opera and in progress for: IE, Safari. Source: Mozilla MDN
  30. 30. 30 Platform agnostic / NoSQL backend Offline first, but online layer must be scalable too • Headless, but slightly different way We’re not using any platform-specific API. vue-storefront-api project is API layer for Elastic database which is middleware between eCommerce CMS and frontend. With this approach we’re totally hassle free of eCommerce platform scalability issues. The stack is as simple and scalable as it can. Our goal is to have API response in milliseconds. • mage2nosql We’ve written data pump which works on parallel processes to queue and transfer all the data changes (products, categories, then users etc) between Magento2 or any other platform to Elastic. It also supports webhooks for on- demand updates. • GraphQL - maybe? As for now it made no sense to introduce GraphQL but it’s quite easy to implement. Why not… Just create a pull request and we’ll merge ;) • Queues All communication with external systems is async and queued (kue + Redis as for now); we’re using multi-process deployments of queue-workers (pool of Node.js processes that can be run on server cluster)
  31. 31. 31 Platform agnostic / NoSQL backend Offline first, but online layer must be scalable too • Not everything can be synchronized Particularly not dynamic logic - like promo rules, must be executed online/on demand. • By Microservices I don’t mean vue-storefront-api It’s rather a typical backend. What do I mean is to have granular micro- services for: ○ pricing rules (cart rules), ○ stock quantities, ○ user authorization (jwt, oauth2), ○ … ? • Different technologies These services probably will be written as extensions to Magento2/other platform. They can be written as well in golang or any other as long as exposes REST interface. • One interface But finally we’ll use Facade (probably vue-storefront-api) to aggregate all the requests in one format that can be used by vue-storefront.
  32. 32. 32 Tooling Make the development fun again! • ES2016 We’re using Babel as Vue component loader and transpiler to have all the goods of ES2016. eslint is of course enabled as well. • Webpack Main rack for our tooling - code splitting, vue-ssr, sw-toolbox are only few features we’re using • 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.
  33. 33. 33 Divante Sp. z o.o. Dmowskiego 17 Street 50-203 Wrocław +48 516 184 153aanding@divante.de pkarwatka@divante.co www.divante.co Check the demo! http://vuestorefront.io

×