Hittat: Ett rikitgt bra Headless CMS

Vi har genom åren arbetat en hel del med så kallade headless-tekniker för webben för att inte bara ha koll på CMS som WordPress och liknande. Vi har grävt djupt i tekniker som React, NextJS, Headless WordPress och liknande sätt att bygga på för att se vilka alternativ som gör vad vi vill.

Vad vi vill åt när det gäller upplevelsen, precis som alla besökare vill, är ju att erbjuda sajter som är så snabba att man knappt märker att innehållet byts när man navigerar.

Nyckeln till det är att man bygger gränssnittet mot besökaren med teknik som t ex NextJS som tar hand om b.la. saker som:

• Navigering
• Ladda nytt innehåll direkt i sidan utan att ladda om
• Cacha innehåll så det inte behöver hämtas från databasen.

Sedan har man hela administrationen av innehåll, själva CMS-funktionen, i en helt fristående del av systemet som gränssnittet pratar med vid behov.

Att skapa en sån upplevelse är normalt inte ett problem, det går att lösa med i princip vilken headless-teknik man än väljer. Det här har man kunnat bygga länge med mer eller mindre färdiga lösningar och kodpaket att utgå från. Ett av de mest kända exemplen är ju Facebook som bygger på detta.

Men vi vill mer!

Vi vill att ni som jobbar med innehållet ska få en lika bra upplevelse som besökarna. Vi anser att om ett CMS ska sticka ut och vara riktigt bra, så ska admin ge användaren:

• Stor flexibilitet för att anpassa efter olika behov
• Lätt och logiskt upplägg som gör det enkelt att arbeta i
• Kraftfulla funktioner där det verkligen räknas, såsom:
  • Bildverktyg för justering av fokuspunkt bland annat
  • Språkhantering
  • Rättvis och tillförlitlig förhandsgranskning (preview)

Därför har vi under flera år följt utvecklingen av nya CMS-lösningar och löpande utvärderat dem, både utifrån teknik och våra kunders faktiska behov. Vi lyssnar på vad redaktörer uppskattar, vad som brister och vad de efterfrågar, samtidigt som vi väger in tekniska insikter från de många projekt vi själva genomfört.

Exempel på bildredigering i Payload där du enkelt kan justera bland annat fokuspunkten.

Måste man bygga allt själv – eller finns det smartare alternativ?

Vi har både testat och använt ett CMS vid namn Payload i skarpa projekt och det har imponerat på oss. Det är ett relativt nytt system som bygger vidare på det bästa från klassiska CMS som WordPress, men utan att släpa på teknikval från början av 2000-talet. När vi jämfört det med både headless- och traditionella lösningar som WordPress, Drupal och Optimizely, står det klart att Payload tickar många av våra viktigaste boxar.

Payload är fullt headless, vilket ger en snabb och modern upplevelse för besökaren, men det stannar inte där. Det levereras dessutom med ett kraftfullt, genomtänkt och användarvänligt adminverktyg. Funktioner som:

• Bildbeskärning med fokuspunkt
• Realtidsförhandsvisning
• Inbyggd språkhantering

Allt sammantaget gör det till ett CMS där redaktörer snabbt känner sig hemma. Har du jobbat i WordPress admin, kommer du att känna igen dig direkt i även detta gränssnittet.

Att bygga i Payload

Till skillnad från äldre CMS så har Payload även tänkt på utvecklaren när det handlar om att bygga saker i systemet. Man har på många ställen gått från att behöva skriva massor av repetitiv kod för vanliga standardsaker, till att sköta det via konfiguration. Det gör att utvecklare kan spendera tiden på det som kunden behöver mest, att bygga kundspecifik funktion som direkt stödjer kundens verksamhet och mål.

Håller Payload måttet?

Payload är byggt på moderna standarder efter tydliga best practices och använder standardtekniker vilket är positivt för oss som är beroende av ordning och reda under skalet i ett system. Man kan välja mellan att hosta själv, eller i molnet och det finns en mycket nära koppling mellan admin och frontend samt en flexibilitet i datalagring som vi inte sett i andra alternativ.

Plattformen är Open Source så skulle, mot förmodan företaget bakom försvinna, så finns koden kvar och det är fritt att jobba vidare på den. Nu har Payload ett stort och aktivt Community bakom sig och utvecklingen rör sig fort och har gjort länge nu, så risken att plattformen överges är extremt liten.

Och JA – det är helt gratis att installera och använda. Inga licenser eller abonnemang krävs, om du inte själv väljer ett enterprise-paket med hosting i molnet. Valet är helt ditt.

Hur fungerar Payload i praktiken?

Ett exempel är vårt projekt vi gjorde i Payload åt fuzed.com. En flerspråkig webb med mycket content och höga krav på prestanda, mediahantering och ett lättarbetat admin.
Payload levererade på alla punkter. Vi kunde snabbt sätta upp en första version för kundfeedback, och därefter enkelt justera, finslipa och bygga en frontend som levde upp till våra och kundens krav.

En av de stora vinsterna var flexibiliteten. Kunden kan själv skapa nya sidor med helt nya komponenter direkt via admin, utan att behöva ändra något i frontend. Det innebär att små förändringar, som att flytta en knapp eller lägga till ett nytt block, inte kräver utvecklare. Så fungerar inte alla headless-lösningar men det gör Payload.

Är du nyfiken på vad en modern headless-lösning kan göra för dig på webben, hör av dig så ger vi dig mer än gärna en rundtur med fokus på vår nya favorit i headless världen, Payload CMS.

Du kan också läsa mer på Payloads egen hemsida.

Fördelar som utvecklare

• Hög anpassningsbarhet: Payload är kodbaserat och byggt med TypeScript/Node.js, vilket ger utvecklare full kontroll över datamodeller, API:er och backend-logik.
• REST och GraphQL API:er: Inbyggt stöd för både REST och GraphQL gör det enkelt att integrera med valfritt frontend-ramverk som React, Vue eller Angular.
• Flexibel databasstruktur: Utvecklare kan definiera egna datamodeller direkt i koden, vilket möjliggör skräddarsydda lösningar utan begränsningar från fördefinierade scheman.
• Hooks och middleware: Ger möjlighet att skapa anpassad logik för specifika arbetsflöden, som automatisering eller validering, vilket sparar tid och ökar effektiviteten.
• Open-source: Som öppen källkod är Payload kostnadsfritt och transparent, med en aktiv community som bidrar till förbättringar och tillägg.
• Headless arkitektur: Separerar backend från frontend, vilket ger frihet att bygga snabba, skalbara och säkra applikationer för flera kanaler (webb, appar, etc.).
• Enkel integration: Stöd för tredjepartssystem och externa API:er gör det smidigt att koppla Payload till andra verktyg, som e-handelsplattformar eller analysverktyg.

Fördelar som redaktör

• Användarvänligt admin-gränssnitt: Payloads React-baserade admin-panel är intuitiv och snabb, vilket gör det enkelt att skapa och hantera innehåll utan teknisk kunskap.
• Rollbaserad åtkomstkontroll: Redaktörer kan få skräddarsydda behörigheter, vilket säkerställer att de endast ser och redigerar relevant innehåll, vilket ökar säkerheten.
• Realtidsredigering: Ändringar i innehåll visas direkt i admin-panelen, vilket ger en smidig och effektiv redigeringsupplevelse.
• Flerspråksstöd: Inbyggd funktionalitet för att hantera innehåll på flera språk, vilket underlättar för redaktörer som arbetar med globala webbplatser.
• Anpassningsbara vyer: Admin-gränssnittet kan skräddarsys för att matcha organisationens behov, vilket gör det enklare för redaktörer att navigera och arbeta effektivt.
• Enkel mediahantering: Redaktörer kan enkelt ladda upp, organisera och använda bilder och andra mediafiler direkt i CMS:et.
• Samarbetsvänligt: Stöd för flera användare gör att redaktörsteam kan arbeta samtidigt, med tydliga arbetsflöden för granskning och publicering.

UPDATE:

Den 17 juni publicerade Payload och Figma en nyhet om att bolagen går samman, vilket är oerhört positiva nyheter för oss som gillar Payload. Läs mer om Figma och Payload här.