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

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

  • 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