Tillståndshantering är hur du hanterar data och tillståndet för en programvara. Det innebär att organisera och uppdatera information som en applikation behöver för att fungera, som vad användare matar in, data från backend och inställningar.
Bra tillståndshantering hjälper en applikation att fungera smidigt och ger användarna en bra upplevelse. Tekniker och verktyg för detta inkluderar lokal, global och tillståndsbehållare (state containers).
För webbapplikationer handlar tillståndshantering om att hantera och uppdatera data och tillståndet för applikationen. Detta är nyckeln till att skapa dynamiska och interaktiva webbsidor som reagerar på vad användare gör och ger en smidig upplevelse.
Med tillståndshantering på klientsidan hanteras data i användarens webbläsare med hjälp av saker som cookies, lokal lagring och sessionslagring. Detta möjliggör snabb dataåtkomst, men begränsas av användarens enhetslagring och möjliga säkerhetsproblem.
Tillståndshantering på serversidan hanteras data på webbservern, vilket möjliggör starkare datalagring. Detta använder sessionshantering, caching och databaser på serversidan.
Välkända verktyg för tillståndshantering för webbapplikationer är Redux, React Context API och MobX för klientsidan, samt Node.js, Django och Flask för serversidan.
Vad är Micro Frontends?
Micro frontends är en webbutvecklingsmetod där en enda applikation består av olika byggen. Det är som ett mikrotjänsttillvägagångssätt, men för klientsidans single page-applikationer i JavaScript.
Det är ett arkitektoniskt tillvägagångssätt där varje frontend-del separeras i sin egen applikation. Detta låter team arbeta med frontends på egen hand med hjälp av olika verktyg. Genom att dela upp frontend-arbete i mindre applikationer kan team arbeta bättre och leverera bra frontend-upplevelser.
Genom att använda micro frontends kan en mängd fördelar uppnås, inklusive,
Oberoende utveckling - Micro frontends tillåter team att utveckla och distribuera frontend-funktionalitet oberoende, utan att behöva samordna med andra team. Detta minskar beroenden och möjliggör snabbare utveckling och distribution.
Flexibilitet - Olika team kan välja olika ramverk och teknologier för sina micro frontends. Detta gör att team kan arbeta med teknologier som bäst passar deras behov och expertis.
Återanvändbarhet - Micro frontends kan återanvändas i olika projekt eller applikationer. Detta minskar utvecklingstiden och främjar konsekvens i frontend-design och funktionalitet.
Underhållbarhet - Med micro frontends är varje applikation fokuserad på en specifik funktion eller funktionalitet. Detta gör det lättare att underhållla och uppdatera specifika delar av frontend utan att påverka resten av applikationen.
Behöver vi tillståndshantering i Micro frontends?
När tillståndshantering används mellan micro frontends kan det introducera vissa utmaningar som kan undergräva fördelarna med micro frontend-arkitekturen. 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 micro frontends.
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 micro frontends kan det leda till beroenden mellan micro frontends, vilket gör det svårare att underhålla och uppdatera dem oberoende.
Diagrammet nedan illustrerar problemet med koppling mellan micro frontends som uppstår vid användning av tillståndshantering:
Som visas i diagrammet blir det delade tillståndet en kopplingspunkt mellan micro frontends. Ändringar i det delade tillståndet kan ha en kaskadeffekt på de olika micro frontends som är beroende av det, vilket gör det svårare att underhålla och uppdatera dem oberoende.
Därför resulterar ökad användning av tekniker för tillståndshantering i minimerat ömsesidigt beroende mellan olika micro frontend-applikationer.
Om vi verkligen vill, hur kan vi hantera tillståndet?
I vissa scenarier blir det nödvändigt att hantera tillståndshantering inom micro frontends. I sådana fall kan följande strategier implementeras för att effektivt hantera tillståndet mellan olika micro frontend-applikationer.
Använd lokal lagring
Webbapplikationer kan nu enkelt använda lokal lagring, vilket innebär att du inte behöver extra kod för att skapa en enda plats för att hålla reda på din apps data. Med detta kan varje liten del av din app hämta data i lokal lagring och göra vad som behöver göras.
Lokal lagring låter utvecklare enkelt hantera data mellan de små delarna av sina appar. Tänk på att lokal lagring endast kan hålla en viss mängd data. Se till att tänka på detta när du planerar och bygger din app.
Implementera ett delat API-verktyg
Ett sätt att förbättra prestanda och tillförlitlighet för en webbapplikation med micro frontends är att skapa ett delat API-verktyg som en micro frontend. Denna micro frontend cachar alla fetch/XHR-förfrågningar och svar. Detta minimerar förfrågningsstorleken, vilket förbättrar prestandan. Det minskar nätverksförfrågningar och förbättrar applikationens responsivitet.
De individuella micro frontends kan alla anropa den delade API-micro frontenden när de gör en förfrågan, vilket ger API-micro frontenden förmågan att besluta om data ska hämtas på nytt baserat på dess färskhet. Denna metod hjälper till att minska overhead för nätverksförfrågningar, vilket förbättrar effektiviteten och minimerar fel eller inkonsekvenser över micro frontends.
Utvecklare kan bygga en mer pålitlig och skalbar webbapplikation med micro frontend-arkitekturen. Genom att effektivt hantera dataflödet mellan micro frontends och bibehålla konsekvent tillstånd över applikationen. Den delade API-micro frontenden kan cacha förfrågningar och svar, vilket kan hjälpa till att optimera applikationens prestanda och göra den snabbare.
Skapa exporterade funktioner
Låt oss överväga denna strategi med 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 i 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 hämta eller ställa in det delade tillståndet.
Till exempel, låt oss 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 detta exempel 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 innan 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 micro frontends genom att skicka händelser från en micro frontend till andra micro frontends som är intresserade av tillståndsändringen. För att göra detta,
Definiera anpassade händelser - Definiera anpassade händelser som representerar tillståndsändringar i dina micro frontends.
Skicka händelser - När en tillståndsändring sker i en micro frontend, skicka motsvarande anpassade händelse med metoden window.dispatchEvent(). Lyssna på händelser: I de andra micro frontends som är intresserade av tillståndsändringen, lyssna på den anpassade händelsen med metoden window.addEventListener().
Uppdatera tillstånd - När den anpassade händelsen tas emot, uppdatera tillståndet för micro frontenden 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 micro frontends. Här är några av de mest populära,
Zustand redux micro frontend (Microsoft) Låt oss utforska tillvägagångssättet att använda Zustand-biblioteket för att underlätta distributionen av tillstånd över micro frontends,
För att hantera tillståndet i micro frontends med hjälp av 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 denna uppsättning 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 combine-funktionen från Zustand. Den kombinerade butiken ger en enhetlig vy av tillståndet från båda appar och kan användas i andra komponenter för att komma åt och modifiera det delade tillståndet.
Slutsats
Att använda lösningar för tillståndshantering i micro frontends anses oftast vara dålig praxis, eftersom det kan koppla ihop orelaterade applikationer och slutligen beröva micro frontends deras fördelar. I vissa situationer kommer delat tillstånd mellan micro frontends att vara oundvikligt. Den rekommenderade lösningen är dock att hålla tillståndet så enkelt som möjligt. För att uppnå detta finns det flera sätt att hantera tillståndet mellan micro frontends, beroende på applikationens krav och begränsningar.
