GolemUI genererar formulär från JSON till fem olika ramverk

GolemUI är ett open source-bibliotek som bygger webbformulär från en JSON-definition i stället för handkodad UI. Samma definition renderar formuläret i React, Angular, Vue, Lit eller vanilla JavaScript. Bakom projektet står tre utvecklare med tio års erfarenhet av formulär och öppen källkod och det presenterades nyligen via Show HN.

Grundidén är att skilja på vad ett formulär innehåller och hur det ser ut. Du beskriver fält, validering och villkor i ett schema. Biblioteket sköter resten.

Formuläret blir data i stället för kod

Det som gör GolemUI intressant är att formuläret aldrig existerar som fast UI-kod. Det är en datastruktur.

En JSON-definition kan lagras i en databas, versionshanteras, jämföras rad för rad och genereras av en språkmodell som validerad JSON. Det är precis det som händer när du slutar behandla ett formulär som en React-komponent och börjar behandla det som konfiguration. Vill du lägga till ett fält ändrar du data, inte kod som ska kompileras om och testas i varje ramverk för sig.

Från schemat kommer också de saker som annars tar mest tid att få rätt, automatisk validering, villkorsstyrda fält som dyker upp beroende på tidigare svar, flerspråksstöd och tillgänglighet. De genereras av schemat och en runtime, inte handskrivna på nytt varje gång.

Ett registreringsformulär kan driva både en React-app och en Vue-adminpanel

Det tydligaste säljargumentet är portabiliteten. Ett team som kör React idag och migrerar till Vue om två år behöver inte skriva om formulärlogiken, bara byta renderare.

Samma JSON-definition kan driva ett registreringsformulär i en React-webbapp och en Vue-baserad adminpanel utan att logiken dupliceras. Icke-utvecklare kan bygga eller ändra komplexa formulär om de förstår JSON-schemat, vilket öppnar för low-code-arbetsflöden i team där designers och produktägare vill styra fälten själva. Formulären blir också konsekventa över hela produkten eftersom valideringsreglerna bor på ett ställe.

Biblioteket levererar också ett typat författarlager ovanpå JSON, så att du kan skriva formulär programmatiskt och få JSON genererad automatiskt i stället för att peta i rådata för hand. Komponenterna är headless och stylas med CSS-variabler och det går att koppla in Material, Shoelace eller egna komponenter via API:er.

Det här greppet, att flytta beroenden och logik ut ur själva komponenten, känns igen. Frond flyttar på liknande sätt beroendehanteringen ut ur React-komponenterna och tankesättet att data ska vara förutsägbar och separerad från vy har en lång historia i oföränderliga datastrukturer via Immutable.js.

Tiptap-integrationen kom ur ett konferensmöte

Ett samtal med Arnau Gómez, AI Engineer på Tiptap, under konferensen DevBcn ledde till att GolemUI kan bäddas in som en egen Tiptap-nod, `golemForm`. Ett Tiptap-dokument kan då omvandlas till en databaskonfiguration.

Det passar ihop filosofiskt. Tiptap, som har fler än 37 000 stjärnor på GitHub, behandlar dokument som datastrukturer serialiserade till JSON, inte bara som text på en skärm. GolemUI gör samma sak med formulär. När båda talar samma språk blir kopplingen naturlig.

JSON-schema betalar av sig först vid volym

Portabiliteten låter bra men är sällan gratis. Ett abstraktionslager mellan din kod och det färdiga formuläret betyder att du felsöker genom lagret, inte bara i din egen komponent. När ett fält beter sig fel behöver du förstå både schemat och runtime-motorn.

Handkodar du ett enda kontaktformulär är GolemUI overkill. Ett `

Det är också värt att väga in mognaden. Ett nystartat projekt från ett trepersonersteam har inte samma ekosystem av tredjepartskomponenter, dokumentation och lösta buggrapporter som etablerade bibliotek. Vill du minska mängden slentrianmässig kod är genomtänkt frontend-arkitektur ofta en större hävstång än ett enskilt bibliotek.

FAQ

Vilka ramverk stöder GolemUI?

React, Angular, Vue, Lit och vanilla JavaScript. Samma JSON-definition renderar formuläret i alla fem, vilket betyder att du kan byta frontend-ramverk utan att skriva om formulärlogiken.

Behöver jag kunna programmera för att använda det?

Inte nödvändigtvis. Eftersom formuläret definieras som JSON kan även icke-utvecklare som förstår schemat bygga och ändra formulär. Det finns dessutom ett typat författarlager för dig som hellre skriver formulären programmatiskt och låter verktyget generera JSON.

Är GolemUI gratis?

Ja, biblioteket släpps som öppen källkod. Det gör att du kan granska koden, anpassa den och köra den utan licensavgift, till skillnad från kommersiella formulärbyggare med prenumeration.

När är det inte värt att använda GolemUI?

För ett enstaka enkelt formulär. Då är ett vanligt HTML-formulär med grundläggande validering snabbare att bygga än att sätta sig in i ett schema-baserat verktyg. Vinsten uppstår först när du hanterar många formulär eller flera plattformar samtidigt.

Nästa steg för projektet blir att bygga ut de headless-komponenterna och se om fler verktyg följer Tiptaps exempel och integrerar mot JSON-motorn. Om samma formulärdefinition kan resa mellan ramverk och redigeringsverktyg utan omskrivning finns det en verklig poäng, förutsatt att motorn håller när formulären blir komplicerade.