open-source, e-commerce - magento web apps a progressive web app is a web app that uses modern web...
TRANSCRIPT
![Page 1: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/1.jpg)
![Page 2: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/2.jpg)
https://demo.vuestorefront.io u: demo p: !@#demo© 2018 Magento, Inc.
Open-source, e-commerce
Progressive Web App
for Magento 2based on Vue.js
![Page 3: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/3.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
James LoweCTO acidgreen
![Page 4: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/4.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
multi-award winning
full service digital commerce agency
![Page 5: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/5.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
1. State of mobile e-commerce
2. Why PWAs?
3. What is a PWA?
4. PWA technologies
5. Vue Storefront - Project goals
6. Vue Storefront - Design challenges
7. Vue Storefront – Architecture/Concepts
8. Vue Storefront - Tooling
9. Takeaways
The Agenda
![Page 6: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/6.jpg)
State of mobile e-commerce
![Page 7: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/7.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
E-commerce 1997
Nokia 6110 : Features
• Three games: Memory, Snake, Logic
• Calculator, clock and calendar
• Currency converter
• Works as a pager
• Profile settings
• 4 colours
![Page 9: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/9.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
❏ Not really suited for mobile
❏ Struggles during peaks
❏ Not effective with poor internet connection
❏ Long time to market
E-commerce 2017
![Page 10: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/10.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
Source: Nosto 2017 Magento year in review
Ecommerce in 2018 - Business Motivation
![Page 11: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/11.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
Top 100 mobile apps vs. top 1000 mobile web properties
Source: comScore Mobile Metrix, U.S., Age 18+, June 2015
![Page 12: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/12.jpg)
Progressive Web Apps
![Page 14: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/14.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
Progressive Web Apps
● A Progressive Web App is a web app that uses modern
web capabilities to deliver an app-like experience to users.
● Responsive, connectivity-independent, app-like, fresh,
safe, discoverable, re-engageable, installable, linkable
web experiences.
● “Just websites that took all the right vitamins”
![Page 15: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/15.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
• Responsive: to fit any form factor
• Connectivity independent: work online and offline
• App-like-interactions: adopt a Shell + Content application model
• Fresh: always up-to-date thanks to the Service Worker update process
• Safe: must be HTTPS
• Discoverable: allowing search engines to find them
• Re-engageable : can access the re-engagement UIs of the OS; e.g. Push Notifications
• Installable: to the home screen through browser-provided prompts
• Linkable: meaning they’re zero-friction, zero-install, and easy to share.
Progressive Web Apps
Source: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ Alex Russell and Frances Berriman
![Page 16: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/16.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
![Page 17: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/17.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
![Page 18: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/18.jpg)
Vue Storefront
![Page 19: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/19.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
• Mobile first, offline second, fault tolerant
• VOSN/Click Frenzy/Black Friday ready
• Blazing fast
• Platform agnostic (M2 first focus)
• Always Open Source (MIT)
• Bleeding edge, scalable technology
• Have fun, learn stuff
• Led by Divante … + others (YOU).
Project Goals
![Page 20: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/20.jpg)
Design Challenges
![Page 21: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/21.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
Read more: https://www.linkedin.com/pulse/designing-pwa-ecommerce-karl-bzik/
Design Challenges
UX Challenges
• Mobile first, offline second
• Payments while offline?
• Stock quantities while offline?
• Cart/dynamic promo rules
• Figma – online collaboration
• Google’s Material Design
![Page 22: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/22.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
Demos
https://demo.vuestorefront.io/
authorization: demo / !@#demo
https://demo-catalog.vuestorefront.io/
authorization: demo / !@#demo
![Page 23: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/23.jpg)
Vue Storefront
Architecture
![Page 24: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/24.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
![Page 25: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/25.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
vue-storefront (front end)
![Page 26: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/26.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
vue-storefront-api
![Page 27: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/27.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
mage2vuestorefront (backend)
![Page 28: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/28.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
GitHub projects
![Page 29: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/29.jpg)
Framework
![Page 30: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/30.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
FrameworkTheming, 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 ...
![Page 31: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/31.jpg)
Key concepts in practice
![Page 32: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/32.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
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)
![Page 33: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/33.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
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-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
Source: Mozilla MDN
![Page 34: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/34.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
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.
• 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)
![Page 35: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/35.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
MicroservicesNot everything is suitable for being synchronized offline
• 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 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.
![Page 36: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/36.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
ES2016
We’re using Babel as the Vue component loader and transpiler to
have all the goods of ES2016. eslint is enabled as well.
Webpack
Main rack for our tooling - code splitting, vue-ssr and sw-toolbox
too
Elastic, Node, Express
For the backend. Elastic for performance and also full-text search
which is crucial for e-commerce. Node + Express - kind of JS
industry standard.
Make development fun again!
Tooling
![Page 37: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/37.jpg)
State of mobile e-commerce
![Page 38: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/38.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
❏ Not really suited for mobileMore app like and consistent experience
❏ Struggles during peaks Leveraging client side and distributed architecture
❏ Not effective with poor internet connectionNo more Lie-fi. Offline focus
❏ Long time to marketVue.js, developer-friendly approach, one solution fits all
E-commerce 2018+
![Page 39: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/39.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
• Easy picks for new comers
• It is fun
• Docs are in progress
• Project is MIT
Contribute!
![Page 40: Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web capabilities to deliver an app-like experience to users. Responsive, connectivity-independent,](https://reader035.vdocuments.us/reader035/viewer/2022070710/5ec567e50e30496ba64586d4/html5/thumbnails/40.jpg)
© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo
Takeaways
• https://developers.google.com/web/progressive-web-apps/ Google PWA home page
• https://developers.google.com/web/showcase/ Check out some case studies
• https://vuestorefront.io/ Vue Storefront main project website
• https://github.com/DivanteLtd/vue-storefront GitHub base project and documentation
• https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/ Write your first PWA (1hr)
• https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ Alex Russell
James Lowe
acidgreen
Piotr Karwatka
Divante