vue-storefront Progressive, mobile first, offline second eCommerce web app Piotr Karwatka, CTO of Divante
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
vue-storefrontProgressive, mobile first, offline second eCommerce web app
Piotr Karwatka, CTO of Divante
Lorem ipsum dolor sit amet
Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Integer non erat dui. Nam faucibus efficitur
euismod. Cras ornare mi nibh, id commodo lorem
maximus vitae. Vivamus ac ligula non turpis ultrices
ornare at eget ipsum.
eBusiness Software House operating since 2008
150 people at our office in Wroclaw, Poland
Clients from Europe, Asia, Africa and the US
Within your reach: 1.5h flight from London, Berlin, Oslo, Amsterdam, Paris
SCRUM methodology ensuring high quality and flexible approach to the business requirements
Case studies: divante.co/case-studies
2
3
The Agenda
1. eCommerce - what’s wrong with you?2. Progressive Web Apps - what’s all about?3. Project Goals4. Design Challenges5. Architecture6. Framework7. Key Concepts in practice
a. PRPL & SSRb. Service Workersc. Platform agnostic / NoSQL backendd. Microservices
8. Tooling9. Join us as Contributor!
vue-storefront is an open source (MIT) project powered by cool, open source technologies:
1eCommerce - what’s wrong with you?
not suited for mobile
not stable during peaks
not effecitve with poor internet connection
long time2market
eCommerces right now
2Progressive Web Apps
7
Progressive Web AppsBest features of Mobile App (UX) and Web (Distribution) combined
• Offline readiness - app can be used without internet access,
• Mobile-first / Responsive - speed, ui, animations, push notifications,
Fit any form factor: desktop, mobile, tablet. Can be added to Home
screen with zero install and no app store submission,
• Linkable - Easily shared via a URL and do not require complex
installation
• Re-engageable - Make re-engagement easy through features like push notifications.
Key building blocks- ES2015/2016, IndexedDb,- Service Workers (check https://serviceworke.rs/ for recipes),- Techniques: PRPL, SSR,- Reactive frameworks (React, Vue, Polymer …)- Tooling: Webpack, Lighthouse,
Supported by: Chrome, Samsung, Microsoft, Apple, Opera(https://jakearchibald.github.io/isserviceworkerready/)
● Lancôme rebuilds their mobile website as a PWA, increases conversions 17%;
● Jumia sees 33% increase in conversion rate, 12X more users on PWA;
● Alibaba.com increases conversions on the mobile web by 76% with PWA;
● Housing.com increases lowers bounce rate by 40% with new PWA;
● Forbes, OLX, Twitter cases.
Source: https://www.quora.com/What-are-the-advantages-and-disadvantages-of-Progressive-Web-Apps-over-Native-Apps
8
Progressive Web AppsBest features of Mobile App (UX) and Web (Distribution) combined
• Offline readiness - app can be used without internet access,
• Mobile-first / Responsive - speed, ui, animations, push
notifications, Fit any form factor: desktop, mobile, tablet. Can be
added to Home screen with zero install and no app store submission,
• Linkable - Easily shared via a URL and do not require complex
installation
• Re-engageable - Make re-engagement easy through features like push notifications.
Key building blocks- ES2015/2016, IndexedDb,- Service Workers (check https://serviceworke.rs/ for recipes),- Techniques: PRPL, SSR,- Reactive frameworks (React, Vue, Polymer …)- Tooling: Webpack, Lighthouse,
Supported by: Chrome, Samsung, Microsoft, Apple, Opera(https://jakearchibald.github.io/isserviceworkerready/)
● Lancôme rebuilds their mobile website as a PWA, increases conversions 17%;
● Jumia sees 33% increase in conversion rate, 12X more users on PWA;
● Alibaba.com increases conversions on the mobile web by 76% with PWA;
● Housing.com increases lowers bounce rate by 40% with new PWA;
● Forbes, OLX, Twitter cases.
Source: https://addyosmani.com/blog/getting-started-with-progressive-web-apps/
3Project Goals
10
Project GoalsTo create fault-tolerant, bleeding edge, progressive eCommerce app.And have fun. Lot of fun in the process :)
• Fault-tolerant, 100% offline, Black-Friday ready :)Because this storefront can be run without alive web-server (offline mode) there is no such traffic peak that can stop users from making orders.
• ProgressiveWe aimed at giving user full benefits of Progressive Web App - with all this push notifications, service workers, native experience etc.
• Blazing fastIt should render at no time. Always.
• Platform agnosticYou should be able to work with Magento2, Shopify Plus, Pimcore, <You name it> platform of choice as CMS.
• Always Open Source (MIT)The project is broad. We believe in Open Source and that success is possible only when more than one company will contribute.
• Bleeding edge, scalable technologyES2016, Node.js, Vue.js, Elastic
More on our motivation:https://www.linkedin.com/pulse/magento2-nosql-database-pwa-support-piotr-karwatka/
https://github.com/DivanteLtd/vue-storefront
4Design Challenges
12
Design ChallengesFor the prototype we decided to design PWA for a fashion brand
• FigmaWe used Figma for its collaboration features to design the mockups (designs will be also MIT licensed), with grid, mobile interactions
• UX Challenges○ Payments while offline?○ Stock quantities while offline?○ Seamless experience on many devices,○ Cart/dynamic promo rules,○ ...
• 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.
Read more: https://www.linkedin.com/pulse/designing-pwa-ecommerce-karl-bzik/
5Architecture
14
ArchitectureLoose Coupling, Microservices, Horizontally scalable
• vue-storefront is Vue.js eCommerce frontendIt doesn’t require any database support (server side), it’s Webpack app which can be statically rendered (SSR) and served even from CDN,
• vue-storefront-api is Express.js backendIt uses Elastic as data store (NoSQL) and serves all the products, categories, order history, accounts (oauth2) for the frontend, then it sends orders and other data back to eCommerce CMS of choice,
• mage2nosql is a tool :-)… for synchronizing Magento (and any given platform via switchable adapters) to Elastic OR MongoDB database. Supports products, categories, product-to-category links so far.
15
ArchitectureLoose Coupling, Microservices, Horizontally scalable
• vue-storefront is Vue.js eCommerce frontendIt doesn’t require any database support (server side), it’s Webpack app which can be statically rendered (SSR) and served even from CDN,
• vue-storefront-api is Express.js backendIt uses Elastic as data store (NoSQL) and serves all the products, categories, order history, accounts (oauth2) for the frontend, then it sends orders and other data back to eCommerce CMS of choice,
• mage2nosql is a tool :-)… for synchronizing Magento (and any given platform via switchable adapters) to Elastic OR MongoDB database. Supports products, categories, product-to-category links so far.
Key technologies:- Redis for kue queues (order sync 2 eCommerce) and for cache, every
batch operation base on queues and can be run in parallel,- Service Workers with AppCache for caching data (offline support) and for
queueing orders to backend (while offline),- Elastic as a master data store for data that can be synchronized,- Node.js multi process workers to sync data,- REST/API interactions with 3rd party systems (like Magento).
6Framework
17
FrameworkTheming, extensions, re-usable components
• vue-storefront is meant to be a FrameworkIt’s divided to re-usable Vue components and Vuex data stores. It’s designed to be updateable without modifying the Core.
• ThemingYou can put your theme under /themes - which inherits (using Vue Mixins) all the default components and pages
• ExtensionsExtensions are registered in app.js - you can add your own features:
○ additional Vuex stores, ○ routes, ○ pages and components
• SSR & client side hydrationFor better SEO results we’re using Server Side Rendering (https://ssr.vuejs.org/en/) - basically it’s not a typical SPA application
• WebpackWe’re using it extensively: for Babel compiling (we’re ES2016 compliant), sw-precache, code chunking, optimization, dev server ...
18
FrameworkTheming, extensions, re-usable components
• vue-storefront is meant to be a FrameworkIt’s divided to re-usable Vue components and Vuex data stores. It’s designed to be updateable without modifying the Core.
• ThemingYou can put your theme under /themes - which inherits (using Vue Mixins) all the default components and pages
• ExtensionsExtensions are registered in app.js - you can add your own features:
○ additional Vuex stores, ○ routes, ○ pages and components
• SSR & client side hydrationFor better SEO results we’re using Server Side Rendering (https://ssr.vuejs.org/en/) - basically it’s not a typical SPA application
• WebpackWe’re using it extensively: for Babel compiling (we’re ES2016 compliant), sw-precache, code chunking, optimization, dev server ...
19
FrameworkTheming, extensions, re-usable components
• vue-storefront is meant to be a FrameworkIt’s divided to re-usable Vue components and Vuex data stores. It’s designed to be updateable without modifying the Core.
• ThemingYou can put your theme under /themes - which inherits (using Vue Mixins) all the default components and pages
• ExtensionsExtensions are registered in app.js - you can add your own features:
○ additional Vuex stores, ○ routes, ○ pages and components
• SSR & client side hydrationFor better SEO results we’re using Server Side Rendering (https://ssr.vuejs.org/en/) - basically it’s not a typical SPA application
• WebpackWe’re using it extensively: for Babel compiling (we’re ES2016 compliant), sw-precache, code chunking, optimization, dev server ...
7Key concepts in practice
21
PRPL & SSRPush 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)
22
Service WorkersCaching/proxy layer + background jobs
• 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-precacheWe’re using tools from Google Chrome team as a boiler-plate and then extend the generated service-workers it with our own logichttps://github.com/GoogleChromeLabs/sw-toolbox
• Loose coupledThe 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
23
Service WorkersCaching/proxy layer + background jobs
• 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-precacheWe’re using tools from Google Chrome team as a boiler-plate and then extend the generated service-workers it with our own logichttps://github.com/GoogleChromeLabs/sw-toolbox
• Loose coupledThe 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.
24
Platform agnostic / NoSQL backendOffline first, but online layer must be scalable too
• Headless, but slightly different wayWe’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.
• mage2nosqlWe’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 ;)
• QueuesAll 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)
25
Platform agnostic / NoSQL backendOffline first, but online layer must be scalable too
• Headless, but slightly different wayWe’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.
• mage2nosqlWe’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 ;)
• QueuesAll 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)
26
MicroservicesNot everything is suitable for being synchronized offline
• Not everything can be synchronizedParticularly 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 technologiesThese 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 interfaceBut finally we’ll use Facade (probably vue-storefront-api) to aggregate all the requests in one format that can be used by vue-storefront.
27
ToolingMake the development fun again!
• ES2016We’re using Babel as Vue component loader and transpiler to have all the goods of ES2016. eslint is of course enabled as well.
• WebpackMain rack for our tooling - code splitting, vue-ssr, sw-toolbox are only few features we’re using
• Elastic, Node, ExpressFor 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.
not suited for mobile
not stable during peaks
not effecitve with poor internet connection
long time2market
eCommerces right now
RWD, mobile-first approach, PWA Caching, Vue.js
Data caching, NoSQL database, PWA with Service Workers
Vue, developer-friendly approach, good documentation
Local Forage data caching, Vue.js, NoSQL database
Contribute!
Contribute!
31
Divante Sp. z o.o.Dmowskiego 17 Street50-203 Wrocław
+48 516 184 [email protected] www.divante.co
Become a [email protected]
Related Documents
