Presenting: The Unplatform demo storefront
Zoals het Engelse spreekwoord zo mooi zegt: "the proof of the pudding is in the eating". Om mensen te kunnen overtuigen van onze headless-filosofie hebben we bedacht dat we een complete online winkel nodig hebben, iets waar mensen zelf met hun handen aan kunnen zitten.
Maak kennis met de Unplatform demo storefont.
We hebben de volgende niet-functionele eisen gedefinieerd, voordat we zijn gaan bouwen:
- Gebasseerd op JAMStack technology
- Maakt alleen gebruik van Software as a Service (SaaS) gebaseerde diensten
- Maakt alleen gebruik van headless services
- > 90 Web Vitals op alle fronten
Services
De eerste stap van de Unplatform-aanpak is het kiezen van de juiste services. We hebben eerst een product backlog gemaakt en deze en de niet-functionele eisen geplot op een aantal services. We hebben de volgende services gekozen:
commercetools
commercetools is een van de vele headless e-commerceplatforms die er zijn. We hebben voor commercetools gekozen vanwege de volwassenheid en kwaliteit in het algemeen. In vergelijking met andere headless e-commerce platforms zien we de volgende sterke punten:
- Schaalbaarheid en performance
- Compleetheid en kwaliteit van de documentatie
- Kwaliteit van de programming applications interfaces (APIs)
- Uitbreidbaarheid
- Het partner ecosystem
Kentico Kontent
Kentico Kontent is een headless Content Management Systeem. Het heeft veel momentum en waar we erg enthousiast over zijn, is hun klant- en partnerbetrokkenheid. Een van de functies waardoor het zich onderscheidt van de rest, is Kentico Web Spotlight (wat een add-on is). Deze add-on geeft redacteuren meer functies zoals paginaopbouw.
Algolia
Zoeken en navigeren is een belangrijk kenmerk van e-commercesites. Het is moeilijk om het goed te krijgen, maar Algolia doet het bijna allemaal out of the box. Algolia is een headless zoekservice. Je stuurt je producten (of andere documenten die je wilt doorzoeken) naar Algolia met behulp van hun API. Het heeft een beheergebruikersinterface om het zoeken te configureren en het wordt geleverd met een React-componentenbibliotheek, waarmee zoeken en navigeren in een mum van tijd is geimplementeerd.
Vercel
Next.js is een open source front-end framework op basis van React. We schreven eerder waarom we Next.js graag gebruiken voor e-commerce.
Vercel is het bedrijf achter Next.js en ze bieden edge-based hosting. Hun primaire focus ligt op de performance van de eindgebruiker en de ervaring van de ontwikkelaar. Bijvoorbeeld: naast het hosten van uw applicatie bouwen ze ook de applicatie en publiceren ze preview-deployments.
Azure
Hoewel de gekozen diensten veel functionaliteit bieden, moeten we ze nog integreren en uitbreiden. Zo is er bijvoorbeeld integratie nodig die automatisch producten van commercetools naar Algolia stuurt voor indexering. Azure serverless functions zijn hier geweldig voor. Ze zijn eenvoudig te implementeren en aan te sluiten op de services en bieden kostenefficiënte schaalbaarheid.
SendGrid
SendGrid is een van de meest gebruiksvriendelijke e-mailproviders die er zijn. Hun API's zijn gemakkelijk te gebruiken en stellen je in staat om in een mum van tijd e-mail te verzenden. Hoewel ze sinds kort ook marketingautomatiseringsfuncties aanbieden, zijn transactionele mail en gebruiksgemak nog steeds hun belangrijkste sterke punten.
Stripe
Net als SendGrid blinkt Stripe uit door zijn gebruiksgemak. Vooral aan de technische kant is Stripe een fluitje van een cent om in te stellen in vergelijking met andere betalingsproviders. Het biedt veel kant-en-klare componentbibliotheken. De beheerinterface van Stripe is eenvoudig, maar intuïtief.
Architectuur
Het volgende overzicht toont de services en welke rol ze spelen in de algehele architectuur:
Front-end
Zoals eerder vermeld, is de front-end gebouwd met Next.js. Met Next.js kun je statisch gegenereerde pagina's genereren, voor de beste prestaties en interactie. De Next.js front-end wordt gehost op Vercel, die automatisch de front-end bouwt en publiceert op een Content Delivery Network (CDN).
Content
De content wordt beheerd in Kentico Kontent. Wanneer een content editor een content item publiceert, stelt Kentico Kontent Vercel op de hoogte, die vervolgens de statische pagina's opnieuw opbouwt. Voor de startpagina en productdetailpagina stellen we content editors in staat om de lay-outs te wijzigen door componenten toe te voegen. De navigatie en sitemap worden geconfigureerd met Web Spotlight. In ons vorige artikel Dynamische routing met Kentico Kontent en Next.js hebben we het gehad over de technische details.
Productcatalogus
Producten en categorieën worden beheerd in commercetools. Wanneer een product of categorie veranderd, stelt commercetools Vercel ook op de hoogte en worden statische cataloguspagina's opnieuw opgebouwd. commercetools stelt ook onze Product Indexer op de hoogte, wat een Azure Serverless Function is. Deze productindexer stuurt het bijgewerkte product naar Algolia voor indexering, zodat de zoek functionaliteit ook wordt bijgewerkt.
Checkout
Wanneer een klant een product aan het winkelmandje toevoegt, worden de totalen berekend door commercetools. Om integraties te demonstreren, hebben we een aangepaste verzendkostencalculator gemaakt die de standaard commercetools-totaalberekening uitbreidt.
Tijdens het afrekenen betaalt de klant de order met Stripe. Stripe stelt ons vervolgens op de hoogte van de transactie door een custom payment handler aan te roepen, wat ook een serverloze Azure-functie is. Deze payment handler werkt vervolgens de bijbehorende order bij in commercetools. Als laatste stap brengt commercetools onze serverless function OrderConfirmation op de hoogte van eventuele orderupdates en deze functie stuurt vervolgens bevestigingsmails naar de klant met behulp van SendGrid.
Resultaten
De onderstaande Google Lighthouse-score die de Web Vitals weerspiegelt, vat het goed samen.
Zoals je zelf kunt ervaren, is de demo storefront razendsnel. Ontwikkelen met headless services en Next.js geeft een geweldige ontwikkelaarservaring in het algemeen en we waren in staat om de demo storefront sneller te bouwen dan we hadden verwacht.
We zijn duidelijk blij met de functionaliteit en de prestaties. In eerdere projecten (met andere technologie) ondervonden we enkele problemen met productupdates en de hoeveelheid tijd die nodig was voordat die updates op de site zichtbaar waren. We hebben een test gedaan met een catalogus van 10.000 producten met 200 attributen per product. We hebben de prijs voor elk product geupdate. Het duurde in totaal 3 minuten vanaf het starten van de import tot het zien van de bijgewerkte prijs voor het laatste product op de website. Voorheen duurde dit proces over het algemeen uren, dus dit was een enorme verbetering en nog een indicatie dat deze op JAMStack gebaseerde oplossing is gebouwd voor schaal.
Volg de online rondleiding voor meer details over de demo storefront en om deze zelf te ervaren. Als je meer informatie wilt of meer van de gebruikte diensten wilt zien, gebruik dan ons contactformulier of stuur ons een e-mail: info@unplatform.io.
