Posten Bring forenes med designsystem og React

Helle og Viggo, konsulenter hos Posten, presenterte nylig en detaljert gjennomgang av hvordan Posten og Bring opererer som to separate merkevarer under en samlet plattform, med et felles designsystem og Enonic som deres kjerne-CMS.

Samarbeidet har gitt betydelige fordeler, men også unike utfordringer, spesielt når det gjelder å opprettholde konsistens på tvers av merkevarer med ulike visuelle identiteter og funksjonelle behov.

Se deres presentasjon her:

Om Posten og Bring

Posten håndterer primært posttjenester innen Norge, med fokus på brev og småpakker, mens Bring retter seg mer mot pakkelevering, fraktløsninger, forsyningskjeder og støtte for netthandlere i Norden og Europa.

Til tross for deres ulike driftsområder, faller begge merkevarene nå inn under paraplyen Posten Bring AS, og har dermed beveget seg bort fra det tidligere navnet Posten Norge, som ofte skapte forvirring.

De to merkevarene har distinkte visuelle identiteter: Posten er rød, mens Bring er grønn. Denne forskjellen skaper unike utfordringer for deres felles design- og tekniske systemer, spesielt når det gjelder å opprettholde merkevarekonsistens samtidig som det tillates tilpasninger til deres individuelle funksjoner og behov.

Designsystem: Hedwig

Designsystemet Hedwig ble utviklet for å sikre merkevarekonsistens på tvers av alle plattformer og nettsteder, samtidig som det tillater fleksibilitet. Systemet inkluderer:

1. React-komponenter: Bygget i tråd med Hedwigs retningslinjer og for å sikre tilgjengelighet.
2. CSS-pakke: Tilbyr grunnleggende stiler, verktøyklasser og støtte for temaer.
3. Design tokens-pakke: Inneholder gjenbrukbare variabler (mellomrom, skrifttyper, farger osv.) som muliggjør fleksibel merkevaretilpasning.

Tidligere hadde designsystemet kun to temaer (rødt for Posten og grønt for Bring), men et nytt, felles merkevaretema tillater nå integrering av både grønne og røde farger for felles nettsteder. Designtokens muliggjør denne graden av fleksibilitet, noe som tidligere ikke var mulig.

Se også: Gjensidiges designsystem i Enonic med SSR »

Utfordringen med to merkevarer og flere nettsteder

Posten og Bring driver en rekke nettsteder, hvor de fleste kjører på Enonic. Dette inkluderer sentrale merkevaresider og spesialiserte sider som sporingsapplikasjoner og Brings regionale nettsteder. Noen applikasjoner, som Postens sporingssider, opererer imidlertid utenfor Enonic, men benytter fortsatt delte komponenter som navigasjonslinje og bunntekst.

En viktig utfordring er å håndtere felles funksjonalitet samtidig som det er støtte for side-spesifikke funksjoner. For eksempel har Bring SA, Brings største nettsted, langt flere funksjoner enn mindre nettsteder som Bring PL (Polen), som bare har noen få sider. Denne variasjonen krever modularitet for å unngå oppblåste applikasjoner med unødvendige funksjoner.

Modulære Enonic-apper

Den tekniske gruppen til Posten og Bring har utviklet modulære applikasjoner i Enonic for å håndtere deres ulike behov:

• App Bring og App Posten: Apper tilpasset hver merkevare.
• LibCommon: Et bibliotek for felles funksjoner.
• Separate React-apper: React-apper for mer komplekse funksjoner, på grunn av utfordringer med Gradle-builds når man forsøker å samle alt i én løsning.
• Decorator-app: En Node.js-applikasjon som håndterer felles header, footer og andre navigasjonselementer, og avlaster dermed Enonic, samtidig som den sikrer konsistens på tvers av nettsteder.

Bruken av en decorator sikrer at selv applikasjoner utenfor Enonic (som Postens sporingsverktøy) fortsatt kan benytte det delte designsystemet. Decoratoren henter meny- og bunntekstdata fra en Enonic-tjeneste og integrerer dem med React-komponenter fra Hedwig.

Se også: Integrering av Enonic med ditt designsystem »

Avhengighetsstyring

Med over 14 forskjellige nettsteder som er avhengige av delte applikasjoner, kan utrulling av oppdateringer være komplisert. Hver utrulling innebærer en risiko for å bryte funksjonalitet for andre team.

Avhengighetsstyring forblir en pågående utfordring, med eldre apper bygget med den vanlige Enonic-startpakken og nyere apper bygget med TSM-startpakken. Denne blandingen av teknologier øker kompleksiteten for utviklere som jobber på tvers av ulike applikasjoner.

Fremtidige forbedringer

Teamet ser frem til forbedringer med den kommende React4XP-versjonen, som lover en mer strømlinjeformet integrasjon av React og Enonic XP. Denne oppdateringen forventes å forenkle arbeidsflyter, muliggjøre en mer konvensjonell React-appstruktur og betydelig redusere build-tider.

Konklusjon

Den felles plattformtilnærmingen for Posten og Bring gjør det mulig for de to merkevarene å dra nytte av felles ressurser, samtidig som de opprettholder sine særegne identiteter.

Til tross for utfordringene med avhengighetsstyring, sikring av merkevarekonsistens og håndtering av side-spesifikke behov, har designsystemet Hedwig og den modulære appstrategien vist seg å være robuste løsninger.

Med pågående fremskritt som React4XP, ligger det tekniske fundamentet for disse merkevarene an til å bli enda mer effektivt og skalerbart.