Merge pull request #5542 from vuestorefront/update-vsf1-infra-schema

Updated VSF1 insfrastructure's schema

Author: Fifciu

CHANGELOG.md

@@ -9,6 +9,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 - Added information about i18n & Unit tests in modules to docs - @lukaszjedrasik (#4991)
+- Updated VSF1 insfrastructure's schema - @lukaszjedrasik ([#5531](https://github.com/vuestorefront/vue-storefront/issues/5531))
 
 ### Fixed
 - Fixed some typo in docs (#5071)

docs/.vuepress/public/GitHub-Architecture-VS.png

@@ -9,7 +9,7 @@ Vue Storefront is a rather complex solution with a lot of possibilities. Learnin
 Vue Storefront is a headless and backend-agnostic eCommerce [Progressive Web App (PWA)](https://developers.google.com/web/progressive-web-apps/) written in Vue.js. The fact that it's using headless architecture allows Vue Storefront to connect with any eCommerce platform so it can be a frontend PWA for Magento, Shopify, BigCommerce, WooCommerce and etc.
 
  It's a very popular [Open Source project](https://github.com/vuestorefront/vue-storefront) with a strong and growing community.
- 
+
 **Key features of Vue Storefront:**
 - Platform-agnostic
 - Focus on performance
@@ -28,16 +28,17 @@ Vue Storefront manages to be platform-agnostic thanks to the [vue-storefront-api
 It's a great strategy for migrations since you can easily migrate from one platform to another (or one version to another, e.g. Magento 1 to 2) without touching your frontend.
 
 
-![Architecture diagram](https://raw.githubusercontent.com/DivanteLtd/vue-storefront/master/docs/.vuepress/public/GitHub-Architecture-VS.png)
+![Architecture diagram](https://raw.githubusercontent.com/vuestorefront/vue-storefront/master/docs/.vuepress/public/GitHub-Architecture-VS.png)
 
-The API connector works in two phases:
-- **data pump** ([mage2nosql](https://github.com/vuestorefront/mage2vuestorefront) in the image)  is pulling static data (catalog, orders, etc.) from your eCommerce platform to Vue Storefront Elasticsearch and changes its format to the one consumed by vue-storefront-api. Once finished pulling the data, you can display the product catalog in Vue Storefront. After pumping the data into Elasticsearch is done, it will stay in sync with changes made on the backend platform and update its content accordingly.
+- **VSBridge Indexer** ([magento2-vsbridge-indexer](https://github.com/vuestorefront/magento2-vsbridge-indexer) on the image) is multi-process data synchronizer between Magento and Elasticsearch which is sending data about products, categories, taxrules, attributes, cms blocks and cms pages.
 
-- **worker pool** is a synchronization process of so-called dynamic calls (user sessions, cart rules, etc.) that couldn't be stored in the database and need to be called by vue-storefront-api directly from the backend platform.
+- **VSF-API (or SF-API)** is just a proxy to the eCommerce backend which gives us variety of benefits like caching layer, mapping to agnostic types, possibility to create own "processors" (mapping functions for certain entities).
 
 VueStorefront works seamlessly with your backend platform while two integration phases are managed as above.
 
-Some of the most popular backend platforms already have their integrations ([Magento 2](https://github.com/vuestorefront/mage2vuestorefront), [Magento 1](https://github.com/divanteLtd/magento1-vsbridge), [CoreShop](https://github.com/divanteLtd/coreshop-vsbridge), [BigCommerce](https://github.com/divanteLtd/bigcommerce2vuestorefront), [WooCommerce](https://github.com/divanteLtd/woocommerce2vuestorefront)), but you can easily make your own with the [integration boilerplate](https://github.com/divanteLtd/vue-storefront-integration-boilerplate).
+Some of the most popular backend platforms already have their integrations ([Magento 2](https://github.com/vuestorefront/magento2-vsbridge-indexer), [Magento 1](https://github.com/divanteLtd/magento1-vsbridge), [CoreShop](https://github.com/divanteLtd/coreshop-vsbridge), [BigCommerce](https://github.com/divanteLtd/bigcommerce2vuestorefront), [WooCommerce](https://github.com/divanteLtd/woocommerce2vuestorefront)), but you can easily make your own with the [integration boilerplate](https://github.com/divanteLtd/vue-storefront-integration-boilerplate).
+
+In terms of data synchronizers, as a core team we are maintaining only a `magento2-vsbridge-indexer`. The person responsible for that is Maciej Kucmus.
 
 The blue parts on the diagram are responsible for offline cache and will be explained later in the article.
 
@@ -49,14 +50,12 @@ There are 3 concepts you need to be familiar with while working with Vue Storefr
 
 - **Vue Storefront Modules** ( `core/modules` and `src/modules` ) are the eCommerce features. Each module is one encapsulated feature (like cart, wishlist, catalog, and some third-party integrations). You can add/remove/edit these modules as you wish and compose your Vue Storefront shop with only the features that you need. They are also used for 3rd-party extensions.
 
-- **Vue Storefront Themes** ( `src/themes` ) are the actual shop implementation. In themes, you can use and extend all the logic from registered modules / core and add your HTML markup and styles. Vue Storefront provides a fully customizable default theme.
+- **Vue Storefront Themes** ( `src/themes` ) are the actual shop implementation. In themes, you can use and extend all the logic from registered modules / core and add your HTML markup and styles. Vue Storefront provides a fully customizable [default theme](https://github.com/vuestorefront/vsf-default) and [capybara theme](https://github.com/vuestorefront/vsf-capybara). We recommend using default theme because it is more stable than capybara theme.
 
 To summarize: Your shop is basically a Vue Storefront theme that uses features provided by modules. Vue Storefront Core glues it all together.
 
 Knowing these 3 concepts allows you to confidently work with Vue Storefront and make your own shops.
 
-Useful materials: [Vue Storefront project structure](/guide/basics/project-structure.html)
-
 ## Installing Vue Storefront
 When you want to play with Vue Storefront, there are three options:
 
@@ -78,7 +77,7 @@ For your own implementation you should create a `local.json` file in the same di
 ## Building themes in Vue Storefront
 ![themes structure](https://cdn-images-1.medium.com/max/1200/1*jMel95nhs5UTIi2DQdeq4Q.png)
 
-While making themes in Vue Storefront, in most cases, all you need to do is create your own HTML and CSS markup. All the required business logic is exposed by the core with its core modules and can be easily injected into any of the theme components. 
+While making themes in Vue Storefront, in most cases, all you need to do is create your own HTML and CSS markup. All the required business logic is exposed by the core with its core modules and can be easily injected into any of the theme components.
 ![biz-logic](https://cdn-images-1.medium.com/max/1200/1*tMwC0smduKIwKh82jTiJmw.png)
 *The business logic from the core component can be easily injected into any theme component as a Vue.js mixin.*
 
@@ -101,7 +100,7 @@ We managed to do this by making extensive use of the browser cache. 
 Please note that Service Worker works only in production mode.
 :::
 
-- **For the catalog and store-data cache** we use IndexedDB and Local Storage. We also prefetch products from visited categories so once you enter one, all of its products are available offline. The mechanism of offline storage is located under `core/lib/store/`.
+- **For the catalog and store-data cache** we use [LocalForage](https://localforage.github.io/localForage/). We also prefetch products from visited categories so once you enter one, all of its products are available offline. The mechanism of offline storage is located under `core/lib/store/`.
 
 We use some of the cached data even while the user is online to display the content instantly. This explains why Vue Storefront is lightning fast.