På innsiden av nye Enonic UI
Se hvordan vi gjenoppbygde vår UI-stack med React, Tailwind CSS og Storybook, og lær hvordan vi konsoliderte designelementer til et delt UI-komponentbibliotek publisert på NPM.
Written by Vegard Ottervig on
I et tiår har Enonic Admin og Content Studio vært drevet av en eldre teknologi som, selv om den har fungert, i økende grad har slitt med å holde tritt med moderne utvikleres forventninger.
Alan Semenov, VP Engineering i Enonic, avduket nylig fremtiden: Enonic UI. Ved å utnytte KI, Preact og Tailwind bygger teamet et helt nytt, tilgjengelig og høyytelses komponentbibliotek designet for neste generasjons digitale opplevelser.
10 år med teknisk gjeld
I det Alan Semenov spøkefullt kaller "besteforeldres tid" (ellers kjent som 2015) var Enonic XP-distribusjonen en tett koblet pakke. Hver gang teamet ønsket å endre en enkelt knapp i Content Studio, måtte de lansere en ny versjon av hele XP-plattformen.
Motoren under panseret var et bibliotek kalt libadmin.ui. Selv om det fikk jobben gjort, bar det vekten av 10 år med teknisk gjeld: jQuery, et utdatert promise-bibliotek og stilvelgere som var så komplekse at de var nesten umulige å vedlikeholde.
Bagrunnen for overhalingen
Beslutningen om å bygge Enonic UI handlet ikke bare om følelsen av noe nytt; det handlet om å løse disse grunnleggende problemene:
- Arkitektur: Det gamle biblioteket var knyttet til XPs serverside-logikk. Den nye Enonic UI er et "rent" klientside-bibliotek som driftes på NPM.
- Moderne stack: Farvel jQuery og manuell DOM-manipulasjon; hallo moderne tilstandshåndtering.
- Enkelhet: Det gamle biblioteket var for komplekst for eksterne utviklere å bruke. Det nye tar sikte på "idiotsikre", tilpassbare komponenter.
- Stilkaos: Eldre stiler brukte dypt nestede LESS-velgere som ofte forårsaket utilsiktede visuelle feil.
- Manglende synlighet: Det var ingen måte for utviklere å visualisere komponenter eller se kodeeksempler … før nå.
- Tilgjengelighet: Å bygge for det moderne nettet betyr å bake WCAG-standarder inn i kjernen av hver komponent.
- Markedsbehov: Kunder ønsket et friskere utseende, bedre ytelse og den mest etterspurte funksjonen av alle: Mørk modus.
Teknologistacken: Bygget for 2026
For å oppfylle disse kravene bestemte utviklingsteamet seg for en slank, høyytelses stack:
- Preact: Et lettvektsalternativ til React. Det brukes i løpet av den nåværende migreringsfasen for å holde individuelle komponentrøtter raske, med planer om å gå fullstendig over til React senere.
- Tailwind CSS: For isolert, vedlikeholdbar styling som ikke vil "lekke" og ødelegge andre elementer når tilpassede widgets injiseres i admin.
- Storybook: Den nye kilden til sannhet. Det gir live visualisering, dokumentasjon og kodeeksempler for hver tilstand av hver komponent.
- NPM: Gjør biblioteket tilgjengelig for alle, selv de som ikke bygger en full XP-app.
KI: Det hemmelige medlemmet av teamet
Moderne utvikling hos Enonic ser annerledes ut enn det gjorde for to år siden. Alan avslørte at teamet bygger Enonic UI med tung assistanse fra KI-verktøy som Claude Code og Cursor.
I stedet for bare å be KI-en om å "skrive en knapp", har teamet opprettet en dedikert Rules-mappe i sitt repository.
Dette er faste instruksjoner: Retningslinjer for navnekonvensjoner, mappestrukturer og beste praksis, som KI-"dirigenten" følger for å sikre at hver nye komponent oppfyller Enonics kvalitetsstandarder. Denne menneskestyrte, KI-utførte tilnærmingen har latt biblioteket vokse i et utrolig tempo.
Den "gradvise" migreringsstrategien
En av de største utfordringene var å sikre at Content Studio 6 forble funksjonell mens den ble bygget om bit for bit. Teamet opprettet en Legacy Element-wrapper. Dette gjør at den gamle TypeScript-koden og de nye Preact-komponentene kan leve side om side i det samme grensesnittet.
Etter hvert som teamet bygger nye komponenter (som den nye Action Button), overskriver de ganske enkelt de gamle. Denne "hot-swap"-strategien sikrer en stabil overgang uten å måtte stenge ned utviklingen i flere måneder.
Et glimt av fremtiden
I en live demo (se videoen ovenfor) viste Alan det nye Content Studio 6-grensesnittet. Resultatene er et renere, mer fokusert rutenett, et fornyet detaljpanel og en betydelig mer intuitiv publiseringsdialog.
Og ja, publikumsfavoritten ble endelig bekreftet: Mørk modus er innebygd og automatisk, og tilpasser seg systeminnstillingene dine.
Tidslinje for lansering
Enonic UI, sammen med Content Studio 6 og XP8, er planlagt for Q1 2026. Selv om biblioteket for øyeblikket er i en pre-release-fase på NPM (med 45 versjoner allerede sendt!), vokser det hver uke.
