State management hänvisar till processen att hantera data och applikationstillstånd för en mjukvaruapplikation. Detta innebär att organisera och uppdatera informationen som applikationen förlitar sig på för att fungera korrekt, såsom användarinmatningar, backend-data och applikationsinställningar.
Effektiv tillståndshantering är viktig för att säkerställa att en applikation fungerar smidigt och att användarna har en bra erfarenhet av att använda den. Det finns olika tekniker och verktyg som används för statlig förvaltning, såsom lokal statlig förvaltning, global statlig förvaltning och statliga behållare.
I webbapplikationer är tillståndshantering processen att hantera och uppdatera data och applikationstillstånd för en webbapplikation. Detta är viktigt för att skapa dynamiska och interaktiva webbsidor som kan svara på användarinput och ge en sömlös användarupplevelse.
I tillståndshantering på klientsidan hanteras data i användarens webbläsare med hjälp av tekniker som cookies, lokal lagring och sessionslagring. Detta möjliggör snabb och effektiv datahämtning och manipulering, men kan begränsas av lagringskapaciteten för användarens enhet och potentiella säkerhetsproblem.
I tillståndshantering på serversidan hanteras data på webbservern, vilket möjliggör mer robust datalagring och hämtningsmöjligheter. Detta kan innefatta tekniker som sessionshantering, cachelagring och databaser på serversidan.
Några populära tillståndshanteringsbibliotek och ramverk för webbapplikationer inkluderar Redux, React Context API, MobX för hantering på klientsidan och Node.js, Django och Flask för hantering på serversidan.
Vad är Micro-Frontends?
Front-end webbutvecklingsmönster där en enda applikation kan byggas från olika versioner. Det är analogt med en mikrotjänstmetod men för klientsidans ensidiga applikationer skrivna i JavaScript.
Micro-frontends är ett arkitektoniskt tillvägagångssätt där varje enskild front-end-funktion eller funktionalitet är frikopplad till sin egen fristående applikation. Detta gör det möjligt för team att arbeta på front-ends självständigt, med hjälp av olika ramverk och bibliotek för utveckling. Genom att bryta ner front-end-funktionalitet i mindre, oberoende applikationer kan team arbeta mer effektivt och effektivt för att leverera högkvalitativa front-end-upplevelser.
Genom att använda mikro-gränssnitt kan en mängd fördelar uppnås, inklusive:
Oberoende utveckling: Micro-frontends tillåter team att utveckla och distribuera front-end-funktioner oberoende, utan att behöva samordna sig med andra team. Detta minskar beroenden och möjliggör snabbare utveckling och driftsättning.
Flexibilitet: Olika team kan välja olika ramverk och teknologier för sina mikro-gränssnitt. Detta gör att team kan arbeta med teknologier som bäst passar deras behov och expertis.
Återanvändbarhet: Mikrofrontends kan återanvändas i olika projekt eller applikationer. Detta minskar utvecklingstiden och främjar konsekvens i frontend-design och funktionalitet.
Underhållbarhet: Med mikrogränssnitt är varje applikation fokuserad på en specifik egenskap eller funktionalitet. Detta gör det lättare att underhålla och uppdatera specifika delar av front-end utan att påverka resten av applikationen.
Behöver vi statlig förvaltning i mikrogränssnitt?
När statlig förvaltning används mellan mikrogränssnitt kan det introducera vissa utmaningar som kan undergräva fördelarna med mikrogränssnittsarkitekturen. Genom att koppla varje frontend till en annan blir det svårare att hantera och utveckla varje frontend oberoende, vilket motverkar syftet med att använda mikrogränssnitt.
I samband med en webbapplikation används tillståndshantering för att hantera det delade tillståndet över olika komponenter eller sidor. Men när detta utvidgas till mikrogränssnitt kan det leda till beroenden mellan mikrogränssnitten, vilket gör det svårare att underhålla och uppdatera dem oberoende.
Diagrammet nedan illustrerar problemet med koppling mellan mikrogränssnitt som uppstår när man använder tillståndshantering:
Som visas i diagrammet blir det delade tillståndet en kopplingspunkt mellan mikrogränssnitten. Ändringar av det delade tillståndet kan ha en kaskadeffekt på de olika mikrogränssnitten som är beroende av det, vilket gör det svårare att underhålla och uppdatera dem oberoende.
Därför leder en ökad användning av tillståndshanteringstekniker till att minimera det ömsesidiga beroendet mellan olika mikrogränssnittstillämpningar.
Om vi verkligen vill, hur kan vi hantera staten?
I vissa scenarier blir det nödvändigt att hantera statlig förvaltning inom mikrogränserna. I sådana fall kan följande strategier implementeras för att effektivt hantera tillståndet mellan olika mikrogränssnittsapplikationer.
- Använd lokal lagring
Moderna webbapplikationer kan enkelt komma åt lokal lagring utan behov av ytterligare bibliotek, vilket gör det till ett genomförbart alternativ för att etablera en centraliserad plats för att lagra tillståndsvariabler. I detta tillvägagångssätt kan var och en av mikrogränssnittsapplikationerna komma åt tillståndsvariablerna från den lokala lagringen och utföra nödvändiga operationer i enlighet därmed.
Genom att utnyttja de inneboende funktionerna hos lokal lagring kan utvecklare effektivt hantera tillståndet mellan mikrogränssnitt på ett sömlöst sätt. Det är värt att notera att lokal lagring har vissa begränsningar, såsom den maximala storleken på data som kan lagras, som måste beaktas under design- och implementeringsfaserna.
- Implementera ett delat API-verktyg
För att förbättra prestandan och tillförlitligheten hos en mikrofrontend-baserad webbapplikation kan en delad API-verktygsmikrogränssnitt skapas. Denna mikrogränssnitt är ansvarig för att cachelagra alla hämta/XHR-förfrågningar och deras motsvarande svar, vilket effektivt minskar mängden nätverksbegäranden och förbättrar applikationens lyhördhet.
Alla de individuella mikrogränssnitten kan sedan anropa det delade API-mikrogränssnittet när de gör en begäran, vilket ger API:s mikrogränssnitt möjligheten att kontrollera om data behöver hämtas eller inte baserat på dess färskhet. Det här tillvägagångssättet hjälper till att minimera omkostnader för nätverksbegäranden, förbättra effektiviteten och minska risken för fel eller inkonsekvenser över mikrogränssnitten.
Genom att effektivt hantera dataflödet mellan olika mikrogränssnitt och bibehålla ett konsekvent tillstånd över hela applikationen, kan utvecklare skapa en mer pålitlig och skalbar webbapplikation med hjälp av mikrogränssnittsarkitekturen. Dessutom, genom att cachelagra förfrågningar och svar, kan den delade API-mikrofronten ytterligare optimera applikationens prestanda, vilket resulterar i en snabbare och smidigare användarupplevelse.
- Skapa exporterade funktioner
Låt oss överväga denna strategi med hjälp av Single Spa-ramverket. I Single SPA kan du dela tillstånd mellan olika frontend-applikationer genom att exportera funktioner från en applikation och importera dem till en annan. Ett sätt att göra detta är att skapa en delad modul som exporterar funktioner som andra applikationer kan använda för att få eller ställa in det delade tillståndet.
Låt oss till exempel säga att du har två applikationer: App1 och App2. App1 har något delat tillstånd som App2 behöver komma åt. Du kan skapa en delad modul i App1 som exporterar funktioner för att hämta och ställa in det delade tillståndet:
Sedan, i App2, kan du importera dessa funktioner och använda dem för att komma åt det delade tillståndet:
Observera att det delade tillståndet i det här exemplet bara är ett enkelt objekt, men det kan vara vilken datastruktur som helst eller till och med ett tillståndshanteringsbibliotek som Redux eller MobX. Se också till att den delade modulen laddas före de andra applikationerna som är beroende av den.
- Använda anpassade webbläsarhändelser
Anpassade webbläsarhändelser kan användas för tillståndshantering i mikrogränssnitt genom att skicka händelser från ett mikrogränssnitt till andra mikrogränssnitt som är intresserade av tillståndsändringen. Gör så här:
Definiera anpassade händelser: Definiera anpassade händelser som representerar tillståndsändringar i dina mikrogränssnitt. Dispatch-händelser: När en tillståndsändring sker i ett mikrogränssnitt skickar du motsvarande anpassade händelse med metoden window.dispatchEvent(). Lyssna efter händelser: I de andra mikrogränssnitten som är intresserade av tillståndsändringen, lyssna efter den anpassade händelsen med metoden window.addEventListener(). Uppdateringstillstånd: När den anpassade händelsen tas emot, uppdatera tillståndet för mikrogränssnittet i enlighet med detta. Det är viktigt att notera att användning av anpassade webbläsarhändelser för tillståndshantering kan vara komplex och felbenägen, särskilt i större och mer komplexa applikationer.
- Använda bibliotek
Det finns flera bibliotek som kan användas för tillståndshantering i mikrogränssnitt. Här är några av de mest populära:
Zustand redux-micro-frontend (microsoft) Låt oss utforska tillvägagångssättet för att använda Zustand-biblioteket för att underlätta distributionen av tillstånd över mikrogränssnitt,
För att hantera tillståndet i mikrogränssnitt med Zustand över två appar kan du använda en delad tillståndshanteringslösning för att synkronisera tillståndet mellan de två apparna. Här är ett exempel:
Med den här inställningen har både App 1 och App 2 sina egna oberoende Zustand-butiker, men tillståndet synkroniseras mellan de två apparna med hjälp av kombinationsfunktionen från Zustand. Den kombinerade butiken ger en enhetlig bild av tillståndet från båda apparna och kan användas i andra komponenter för att komma åt och ändra det delade tillståndet.
Slutsats
Att använda statliga hanteringsmekanismer i mikrogränssnitt anses allmänt vara en ogynnsam praxis eftersom det kan resultera i kopplingen av olika applikationer, vilket följaktligen undergräver fördelarna med att använda mikrogränssnitt. Men i vissa scenarier där tillståndsdelning mellan mikrogränssnitt är oundvikligt, rekommenderas det att hålla tillståndet så enkelt som möjligt för att mildra de potentiella nackdelarna. För att underlätta detta kan olika tekniker användas för att hantera tillståndet effektivt mellan mikrogränssnitt, beroende på applikationens specifika krav och begränsningar.
