Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web...

https://demo.vuestorefront.io u: demo p: !@#demo© 2018 Magento, Inc.

Open-source, e-commerce

Progressive Web App

for Magento 2based on Vue.js

https://demo.vuestorefront.io/

© 2018 Magento, Inc. https://demo.vuestorefront.io u: demo p: !@#demo

James LoweCTO acidgreen



multi-award winning

full service digital commerce agency



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


State of mobile e-commerce


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



❏ Not really suited for mobile

❏ Struggles during peaks

❏ Not effective with poor internet connection

❏ Long time to market

E-commerce 2017



Source: Nosto 2017 Magento year in review

Ecommerce in 2018 - Business Motivation



Top 100 mobile apps vs. top 1000 mobile web properties

Source: comScore Mobile Metrix, U.S., Age 18+, June 2015


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”



• 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.


Source: https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/ Alex Russell and Frances Berriman


https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

Vue Storefront


• 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


Design Challenges


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


https://www.linkedin.com/pulse/designing-pwa-ecommerce-karl-bzik/


Demos


authorization: demo / !@#demo

https://demo-catalog.vuestorefront.io/

authorization: demo / !@#demo



Vue Storefront

Architecture


vue-storefront (front end)



vue-storefront-api



mage2vuestorefront (backend)



GitHub projects


Framework


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 ...


https://ssr.vuejs.org/en/

Key concepts in practice


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)


https://developers.google.com/web/updates/2016/03/link-rel-preload


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


https://developers.google.com/web/fundamentals/codelabs/push-notifications/

https://github.com/GoogleChromeLabs/sw-toolbox

https://serviceworke.rs/


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)



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.



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


State of mobile e-commerce


❏ 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+



• Easy picks for new comers

• It is fun

• Docs are in progress

• Project is MIT

[email protected]

Contribute!


mailto:[email protected]


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

[email protected]

acidgreen

Piotr Karwatka

[email protected]

Divante


https://developers.google.com/web/progressive-web-apps/

https://developers.google.com/web/showcase/

https://vuestorefront.io/

https://github.com/DivanteLtd/vue-storefront

https://developers.google.com/web/fundamentals/codelabs/your-first-pwapp/

https://infrequently.org/2015/06/progressive-apps-escaping-tabs-without-losing-our-soul/

Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web...

Documents

Transcript of Open-source, e-commerce - Magento Web Apps A Progressive Web App is a web app that uses modern web...