Vue Storefront Review – Minden, amit tudnod kell

A jövő itt van!

Oké, hagyj mindent egy pillanatra, és hallgasd meg ezt. Képzeljen el egy ingyenes e-kereskedelmi alkalmazást, amely drasztikusan javíthatja online áruháza felhasználói élményét és SEO rangsorolását is. Egy forradalmi rendszer, amely annyira rugalmas, hogy kényelmesen futhat bármely e-kereskedelmi háttérrendszeren.

Egy kicsit húzós, szerinted?

Igen, tudom, hogy hangzik, mert én is voltam ott. Nos, legalábbis addig, amíg ki nem próbáltam ezt az őrült dolgot, amit progresszív webalkalmazásoknak vagy röviden PWA-nak hívnak.

Jó okai vannak annak, hogy a vállalkozások egyre jobban beleszeretnek a PWA-ba. Hamarosan mindegyiket felfedem. Most azonban engedje meg, hogy bemutassak egy konkrét alkalmazást, amely segít megérteni a PWA kihasználásának teljes koncepcióját.

Hallottál már a Vue Storefrontról?

Rendben, ez egy új e-kereskedelmi alkalmazás, de architektúrája közel sem hasonlít ahhoz, amit már megszoktunk. És itt az üzlet – a Vue Storefront történetesen a legnagyobb és legteljesebb PWA eddig.

De mit jelent ez az e-kereskedelem számára?

Ezt Vue kirakat Az áttekintés mindent feltár, amit tudnia kell – mi a fene egy progresszív webalkalmazás, hogyan kapcsolódik mindehhez a Vue Storefront, valamint természetesen a hozzá tartozó e-kereskedelmi funkciókat és képességeket.

Mi az a progresszív webalkalmazás? 

Ne feledje, amikor mondtuk alig indul a mobil? Kiderült, hogy mindvégig igazunk volt. És itt a bizonyíték.

A mobil volt az első, majd ez vezetett minket a mobilalkalmazásokhoz. Aztán idővel az alkalmazások elkezdtek egyesülni a PC-vel és a webes platformokkal, miközben a fejlesztők tovább javították a felhasználói élményt, hogy az még zökkenőmentesebb legyen.

Mindezeken a területeken a megnövekedett előrelépések mára a valóban forradalmi e-kereskedelem küszöbéhez sodortak bennünket. Más szóval, üdvözöljük a PWA-k korában.

Most a progresszív webalkalmazások mindkét világ legjobbjait kínálják – webes és mobilalkalmazásokban. Pontosabban, a PWA tipikus webes technológiákra épül, néhány legújabb JavaScript-funkcióval fűszerként. A végeredmény egy olyan webalkalmazás, amelynek általános intuitívsége nagyon hasonlít egy natív iOS vagy Android alkalmazásra.

Vessen egy pillantást ezt Starbucks weboldal. Észrevesz valami szokatlan furcsaságot a szokásos webhelyekhez képest? Most próbálja meg újra betölteni, de a mobiltelefonjáról.

Látszólag natív alkalmazásként viselkedik, igaz? Sima, zökkenőmentes és elképesztően gyors. Nos, ott van a PWA ereje.

És hogyan kapcsolódik ez az e-kereskedelemhez?

Nos, ezt fontold meg. A progresszív webalkalmazások általában gyorsítótárban tárolják a felhasználói eszközadatokat és a letöltött fájlokat. Ez lényegében azt jelenti, hogy az adatok azonnal elérhetővé válnak, amint kérések érkeznek az eszközről.

És a legjobb rész? Fogadhat, hogy az oldalak betöltése mindig szupergyors, még akkor is, ha rendkívül lassú internetsebességgel van dolgunk.

Az egész keretrendszert egy szervizmunkás segíti, amely alapvetően hídként működik a szerver és az alkalmazás között. A kérés feldolgozásához ezért olyan adatokat használ fel, amelyek már az eszköz gyorsítótárában voltak, miközben mindent szinkronizál a megfelelő szerveradatokkal.

Aztán egy egyszerű JSON-fájl miatt Webalkalmazások jegyzéke, A progresszív webalkalmazások általában teljes képernyőn jelennek meg, hogy tartósan magával ragadó élményt nyújtsanak. Ez a kis funkció lényegében kölcsönhatásba lép a böngészővel, és arra utasítja, hogy ugyanazon a felületen jelenítse meg a webalkalmazást, mint az okostelefonos alkalmazások.

És ez még nem minden. A gyorsítótár-szolgáltatás dolgozói a Push API-kkal és a fejlett böngészőtechnológiával kombinálva lehetővé tették a PWA-k közvetlen telepítését az eszköz kezdőképernyőjére. Következésképpen akkor is folytathatja a használatát, ha az eszköz offline állapotba került. Ezen kívül a PWA-k push értesítéseket is kaphatnak.

Most találd ki? Google a Mozillával és a Microsofttal együtt a kezdetektől a Progressive Web Apps élvonalába tartozik.

És miután az egészet számos projekten újra és újra tesztelték, a következő következtetésre jutottak a progresszív webalkalmazásokról:

• Megbízhatóak– A PWA-k rendkívül gyorsan képesek betölteni még rossz hálózati körülmények között is, köszönhetően annak, hogy szervizmunkásaik előre gyorsítótárazza a kritikus erőforrásokat.
• Gyorsak - A PWA-k csodálatosak responsive amikor kapcsolatba lép velük. Folyamatosan éles animációkat és sima görgetést tartanak fenn.
• Elköteleződnek –A felhasználói élmény itt kétségtelenül elég magával ragadó. A PWA-k natív mobilalkalmazásként viselkednek a böngészőben, és könnyen beágyazhatók a kezdőképernyőre. Ráadásul, ha újból le kell vonnia a PWA-kat futtató felhasználókat, bármikor küldhet push értesítéseket.

Az egyik vállalat, amely első kézből látta ezeket az előnyöket Tapló. Korábban az átlagos alkalmazásbetöltési idejük 11.91 másodperc volt. De miután bemutattak egy PWA-verziót, amely történetesen 90%-kal könnyebb volt, mint a natív Android-alkalmazásuk, a betöltési idő jelentősen csökkent. Ennek eredményeként a felhasználói elköteleződés szintje jelentősen megnőtt.

Ha ez nem győz meg, talán Ubers történet lesz. A PWA-k erejét kihasználva a vállalat olyan alkalmazást tudott kidolgozni, amely még 2G-n is nagy betöltési sebességgel rendelkezik. És a megfelelő betöltési idő? Nos, az 50 kb-os PWA-juk következetesen kevesebb, mint 3 másodperc alatt betöltődik.

Most itt alig kapkodtuk meg a felszínt. Sok más is van sikertörténetek a márkák széles kínálatából. Mindez a progresszív webalkalmazások forradalmi képességeinek köszönhető.

Ez azt jelenti, hogy most térjünk a gyakorlati részre.

Szóval, mi is az pontosan Vue kirakat?

Vue Storefront Review – Áttekintés

A Vue Storefront kezdőknek egy nyílt forráskódú progresszív webalkalmazás, amelyet online vállalkozások számára fejlesztettek ki. Fő célja, hogy segítse a digitális kereskedőket és vállalkozásokat az ügyfélélmény szintjének növelésében.

Szerencsére nincs szükség speciális e-kereskedelmi rendszerre a Vue Storefront használatához. Mivel a teljes keretrendszer Headless architektúrával épül fel, be kell tudnia állítani a saját háttér-integrációját. Ez röviden azt jelenti, hogy a Vue Storefront egy holisztikusan rugalmas alkalmazás, amely bármely e-kereskedelmi platformmal integrálható, és előtérként szolgálhat.

Eddig a fejlesztői integrálták vele Magento, Spree Commerce, Sylius és Shopify, a Vue Storefront Core Team a Shopware Teammel szorosan együttműködve kifejlesztette a natív Shopware PWA integrációt, és a Vue Storefront a commercetools Accelerator kulcsfontosságú részévé válik, mint a kereskedelmi eszközök ajánlott, nyílt forráskódú frontendje, valamint a MACH Alliance – a a commercetools, a Contentstack, az EPAM Systems és a Valtech által alapított technológiai cégek – a fej nélküli technológia lehetőségeiről szóló ismeretek terjesztésére.

És figyelembe véve, hogy több mint 70 hivatalos partnerek, több mint 100 élő projekt kiterjedt közösség több mint 3000 fejlesztők, hamarosan további integrációk bevezetésére számíthat. Úgy tűnik, a Vue Storefront még csak most kezdődik.

De ugyanakkor, bár innovációs arányuk dicséretes, nem kell megvárnia, amíg a Vue Storefront csapata kidolgozza a jelenlegi e-kereskedelmi platform integrációját. Ez a PWA alapvetően be van kódolva Vue.js, és arra támaszkodik Elasticsearch az adatbázisához, valamint a Node.js-hez, ha a szerver API-ról van szó.

Ha Ön tapasztalt fejlesztő, akkor azt hiszem, már most tudja, hogy egy új front-end felállítása egyáltalán nem jelenthet kihívást. De ha bármilyen nehézség adódna, Vue kirakat több oktatóanyaggal és átfogó támogatási dokumentációval érkezik. Mindezt felhasználhatja arra, hogy kitalálja, hogyan módosíthatja a nyílt forráskódot.

Ha ez olyasminek tűnik, amit szeretne, a Vue Storefront elérhető a következőn GitHub. És érdekes módon eddig több mint 7,000 sztárt vonzott a platformon.

Oké, egyáltalán nem rossz. De pontosan mit is élveznek a kereskedők Vue kirakat? Valóban olyan funkciókkal rendelkezik, amelyek a következő szintre emelhetik vállalkozását?

Hadd válaszoljak erre úgy, hogy végigvezeti Önt a Vue Storefront különféle attribútumain.

Vue Storefront Review – Főbb jellemzők

User Experience

Először is. Figyelembe véve, hogy itt a felhasználói élmény a fő hangsúly, hogyan működik pontosan a Vue Storefront felülete?

Nos, egy dolog, amit elvárhat a Vue Storefronttól, az az eszközkorlát áttörése. Mivel ez egy webes alkalmazás, bármilyen eszközön el kell tudni indítani és futtatni. Ez azt jelenti, hogy a Vue Storefront kiküszöböli a több natív alkalmazás fejlesztésének kihívását minden eszköz operációs rendszeréhez.

A Vue Storefronton keresztül megoldható másik probléma a natív alkalmazások terjedelme. Az Android-, iOS- és PC-alkalmazások napról napra nehezebbek a fejlesztők minden új funkciójával. Ezért az alkalmazásfrissítések köztudottan arról híresek, hogy több memóriát foglalnak el.

A Vue Storefront esetében azonban majdnem olyan, mintha visszamentünk volna a Symbian alkalmazások korába. Sokkal kevesebb adatot használ a natív alkalmazásokhoz képest.

És a legjobb az egészben az, hogy az üzleted vásárlójának nem kell letöltenie semmit. Közvetlenül a webböngészőjükön keresztül érhetik el a natív élményt.

Ami azt illeti, nem is kell internetezniük. Vue kirakat lehetővé teszi számukra a kényelmes vásárlást akkor is, ha eszközeik offline állapotban vannak.

Akkor vedd meg ezt. Bár az Ön e-kereskedelmi webhelye végül natív alkalmazásként viselkedik, a Google továbbra is webhelynek tekinti. Így természetesen az Ön online áruháza is ennek megfelelően lesz indexelve, akárcsak más szokásos webhelyek.

És itt van a dolog. Valószínűleg az Ön webhelye hatalmas előnyt jelent a rangsorban a többi hagyományos webhelyhez képest, mivel a Google hajlamos a gyors betöltési sebességű webhelyeket előnyben részesíteni. Emellett érdemes megjegyezni, hogy a keresőmotorok egyre gyakrabban térnek át a mobil-első indexelésre.

Apropó, a jó betöltési idő nagyobb forgalmat jelent. Mostanra már valószínűleg észrevette, hogy a weboldal gyenge betöltési sebessége magas visszafordulási arányt vált ki, mivel az internetes fogyasztók utálnak várni. Ezért a megnövekedett forgalommal hosszú távon javítani kell az általános konverziós arányt.

Egy másik taktika, amellyel ezt még tovább fokozhatja, a push értesítések küldése. A Vue Storefront lehetővé teszi, hogy a potenciális ügyfeleket lekösse azáltal, hogy push üzeneteken keresztül kommunikál velük. Ezt kihasználhatja promóciók futtatására, valamint különféle termékek kereszt- és felárértékesítésére.

Elkezdeni

A Vue Storefront mögött álló csapat látszólag azzal kezdte Magento mert ez ma a világ egyik legnagyobb e-kereskedelmi platformja. Ráadásul ez egy nyílt forráskódú rendszer, amely a nagyszerű funkciókat korlátlan rugalmassággal ötvözi. Ez az oka annak, hogy a vállalkozások és vállalkozások rendkívüli mértékben csatlakoznak ehhez Magento szekér.

Ha egy a sok közül, azonnal elkezdheti a Vue Storefront előnyeit Magento Alkalmazás. A folyamat azonban nem olyan egyszerű, mint gondolnád.

Eleinte műhelymunkákra kell támaszkodnia a projekt megfelelő megtervezéséhez. Ez azt jelenti, hogy nemcsak a projekt hatókörét, hanem a megfelelő költségvetést és időt is meg kell határozni.

Ezután a koncepció bizonyítása következik, és célja annak megerősítése, hogy a Vue Storefront milyen hatást gyakorol az Ön vállalkozására. Következésképpen előfordulhat, hogy le kell futtatnia egy rövid példányt a Vue kirakat keretrendszert, miközben különféle felhasználói élményteszteket végez.

Ez önmagában nagyon hasznosnak bizonyulhat, amikor meg kell győznie az érdekelt feleket, hogy fektessenek be az alkalmazásba. Emellett lehetősége nyílik arra is, hogy megalapozott döntéseket hozzon a közelgő bevezetéssel kapcsolatban az alapján, hogy a felhasználók hogyan reagálnak az új bolti verzióra.

Összességében a koncepció bizonyítása néhány hetet vesz igénybe – legfeljebb 4-6 hetet. Ezután az összegyűjtött adatok felhasználásával folytathatja az e-kereskedelmi webhely teljes PWA-verziójának megvalósítását a Vue Storefront segítségével. Az idő múlásával pedig fokozatosan dolgozhat a mögöttes nyílt forráskódon, hogy vállalkozását a folyamatosan változó piaci igényekhez igazítsa.

alkatrészek

Vue kirakat két különböző alkatrésztípussal érkezik.

Az alapítványnál megvan a Alapkomponensek. A tipikus online áruházak alapvető üzleti struktúráira épülnek. Így bizonyos értelemben megkímélnek attól a fáradságtól, hogy mindent a semmiből készítsen.

Ennek ellenére az alapvető összetevőket átveheti a webhely témái. Ehhez nem kell más, mint a hozzá tartozó HTML-jelölés stílusának kialakítása és meghatározása.

És ha már itt tart, észre fogja venni, hogy minden alapvető összetevő külön felületet kínál, amelyet könnyedén átdolgozhat a témán keresztül.

Nos, ha készen áll a feladatra, meg kell találnia az alapvető összetevőket minden modul komponens mappájában. Majd ha megtette, alkalmazza őket a témáira mixinként.

Ha már itt tartunk, lefogadom, hogy valószínűleg már sejtette a második típusú komponenseket. És igen, igazad van. Ők Téma összetevői, amelyek azt a kezelőfelület-elrendezést képviselik, amelyet végül megjelenít az alkalmazásban.

Bár elhelyezheti saját speciális összetevőit egy témán belül, az üzleti logika alkalmazásának legegyszerűbb módja mindig az alapvető összetevők kihasználása.

Kirakat témák

Bár a Vue Storefront továbbra is használja az előre megtervezett témákat, egyáltalán nem kell használnia őket. Ehelyett létrehozhatja saját e-kereskedelmi témáit, majd kombinálhatja őket az alkalmazás alapvető üzleti logikájával a teljes e-kereskedelmi élmény érdekében.

Ennek eléréséhez azonban HTML- és CSS-készségekre lesz szüksége. Vagy egyszerűen fogadjon fel egy tapasztalt fejlesztőt a teljes folyamat kezelésére. A Vue Storefront lehetővé teszi az alapvető összetevők további testreszabását is, ha szükséges.

Ha jobban belegondolunk, a saját téma felépítése a semmiből nehézkes folyamatnak tűnik. Kívül, Vue kirakat saját szilárd témáival rendelkezik a src/themes mappát.

A legújabb 2.0 téma, használatával jött létre például Google UX Retail Playbook. Ez jól optimalizált felhasználói élményt jelent. De ez még nem minden. Mivel dinamikusan rugalmas, sokféleképpen módosíthatja saját, speciális dizájn létrehozásához.

E-kereskedelmi funkciók

Íme néhány e-kereskedelmi funkció, amelyet a Vue Storefronton talál:

• Katalógus böngészés
• Termékböngészés
• Katalóguskezelés támogatása
• Ügyfélfiókok
• Vevőszolgálat
• Megrendelés kezelés
• Marketing akciók
• Elemzés és jelentések
• Search Engine Optimization
• Pénztár, fizetés és szállítás

Vue Storefront Review – Árképzés

megszerzése Vue kirakat nem kerül semmibe. Még egy fillért sem. A költségek csak akkor kezdenek felhalmozódni, amikor a következő testreszabási szakaszokról van szó.

Hacsak nem jártas a kódolásban, kénytelen lesz felvenni egy fejlesztői csapatot, hogy integrálja a Vue Storefrontot az e-kereskedelmi webhelyével, valamint módosítsa annak alapvető összetevőit és témáit.

Kinek érdemes fontolóra vennie a Vue Storefront használatát? 

Tagadhatatlan, hogy a Vue Storefront egy forradalmian új eszköz az ügyfelek felhasználói élményének javítására. És tekintve, hogy ez egy nyílt forráskódú progresszív webalkalmazás, mindenki számára ingyenesen elérhető.

A Vue Storefront problémája azonban a megvalósítási folyamat. Az alkalmazás beágyazása az e-kereskedelmi webhelybe technikailag összetett folyamat, amely komoly kódolást igényel. Ez biztosan nem olyan dolog, amit kódolási készség nélkül kezelhetsz.

De ez semmi a PWA-k előnyeihez képest. A Vue Storefront megéri az erőfeszítést. Tehát megfontolhatja, hogy egy tapasztalt fejlesztőt béreljen fel, hogy ennek megfelelően hajtsa végre. Ezenkívül a Headless architektúrája rugalmas alkalmazássá teszi, amely bármely e-kereskedelmi platform háttérrendszerébe beágyazható.

Összességében tehát Vue kirakat minden típusú online vállalkozásnak és vállalkozásnak szól. Amíg e-kereskedelmi webhelyet üzemeltet, érdemes megfontolni ezt a progresszív webalkalmazást, ha javítani szeretné az általános ügyfélélményt.

Ez egy tiszta egészséglevél tőlünk itt, az ecommerce-platforms.com webhelyen. Most pedig hozzád – mi a véleményed?