# InspiShop Vue.js Storefront

## Co je InspiShop Storefront?

InspiShop Storefront (ISF) je frontendový framework pro řešení InspiShop určené dlouhodobě rostoucím e-shopům.

Framework je postaven jako **standalone aplikace**, která komunikuje s tzv. headless backend e-commerce platformou pomocí **API**. Výhodou ISF je **modulovatelnost**, která umožňuje rozšiřování e-shopu bez závislosti na PHP napojení. Majitelům e-shopu šetří v dlouhodobém horizontu čas a peníze.

### Problém

Většina tradičně stavěných e-shopů má frontendový kód napevno navázaný na šablony backendového systému. Toto způsobuje nutnost hlídat backendovou funkčnost při frontendových úpravách, které se týkají funkčnosti objednávkového procesu a modulů. Proto většina úprav vyžaduje backendové úpravy, případně nutné kontroly funkčnosti, a **každou úpravu tak prodražuje**. Současně vzniká **nepřehledný kód**.

V případě větších frontendových úprav a nadstaveb, jako jsou například konfigurátory produktů, je nutné zásadních úprav na backendu.

Současně bylo vždy nutné při změnách na frontendu buildit pokaždé celý projekt.

### **Řešení**

InspiShop Storefront umožňuje naprostou většinu frontendových úprav udělat úplně nezávisle na backendové funkčnosti. Proto jsou úpravy v rámci ISF výrazně rychlejší a bezpečnější.

ISF je současně postaven kompletně na komponentovém designu (dodržuje principy tzv. atomického designu), který opět zjednodušuje, zpřehledňuje a zrychluje proces kódování.

## **FAQ**

### Q: Jsem frontend vývojář na InspiShopu, v čem mi Storefront pomůže?

Oproti staré verzi:

* **Transparentnost toku dat** mezi BE a FE. FE si sám načítá, co potřebuje, “neotravuje” BE pro úpravy kontrolerů. Nemusí si přeposílat data přes pageData&#x20;
* **Jednotnost kódů**, některé komponenty (productBox, customerSupport, všechny atomy) musely dříve být psané jak ve Vue, tak v Blade šablonách.&#x20;
* **Možnost předzpracovat data**, která nám z backendu přijdou. Dříve bylo nutné hacky v podobě @php v blade šablonách, nebo opět řešit s BE člověkem.

Jako takový:

* Volnost rozhodování nad strukturou aplikace
* Čistá struktura aplikace a komponent postavená pouze na JS a HTML
* Moderní SSR přístup, FE si sám rozhoduje o dynamických prvcích aplikace
* Jednotný datový store pro komunikaci s backendem
