Single-SPA-ramverket: En omfattande guide till Micro-Frontend-orkestrering

I dagens snabbt utvecklande landskap för webbutveckling kämpar monolitiska frontends alltmer med att hålla jämna steg med kraven från växande applikationer och distribuerade team. Micro-frontend-arkitekturen har vuxit fram som en kraftfull lösning på dessa utmaningar, vilket gör det möjligt för utvecklare att bygga komplexa användargränssnitt som en samling oberoende, deploybara och underhållbara komponenter. Detta tillvägagångssätt främjar teamautonomi, uppmuntrar återanvändning av kod och förenklar den övergripande utvecklingsprocessen. Bland de olika ramverk som finns tillgängliga för micro-frontend-orkestrering utmärker sig single-SPA som ett mångsidigt och robust val.

Vad är Micro-Frontends?

Micro-frontends är en arkitektonisk stil där en frontend-app delas upp i mindre, oberoende och fristående enheter (micro-frontends). Varje micro-frontend kan utvecklas, deployas och underhållas av separata team. Se det som en sammansättning av flera mini-applikationer som arbetar tillsammans för att bilda en sammanhängande användarupplevelse.

Viktiga egenskaper för micro-frontends inkluderar:

• Teknikagnostisk: Varje micro-frontend kan byggas med olika ramverk och tekniker (React, Angular, Vue.js, etc.)
• Oberoende deploybarhet: Micro-frontends kan deployas oberoende utan att påverka andra delar av applikationen.
• Autonoma team: Olika team kan äga och underhålla olika micro-frontends, vilket främjar autonomi och snabbare utvecklingscykler.
• Återanvändning av kod: Gemensamma komponenter och bibliotek kan delas mellan micro-frontends.
• Förbättrad skalbarhet och underhållbarhet: Mindre, oberoende enheter är lättare att skala, underhålla och uppdatera jämfört med en stor monolitisk applikation.

Varför välja Single-SPA?

Single-SPA är ett JavaScript-ramverk som underlättar orkestreringen av flera JavaScript-applikationer (micro-frontends) inom en enda webbsida. Det föreskriver ingen specifik teknikstack för micro-frontendsen själva, vilket gör att team kan välja de verktyg som passar bäst för deras behov. Detta ramverk fungerar som ett meta-ramverk och tillhandahåller infrastrukturen för att ladda, avlasta och hantera livscykeln för olika micro-frontends.

Här är varför single-SPA är ett populärt val för micro-frontend-orkestrering:

• Ramverksagnostiskt: single-SPA kan användas med praktiskt taget alla JavaScript-ramverk, inklusive React, Angular, Vue.js, Svelte och fler. Denna flexibilitet gör att team kan adoptera micro-frontends stegvis utan att skriva om sina befintliga applikationer.
• Gradvis adoption: Du kan gradvis migrera en monolitisk applikation till en micro-frontend-arkitektur, med början i små, isolerade funktioner.
• Koddelning: single-SPA låter dig dela kod och beroenden mellan micro-frontends, vilket minskar redundans och förbättrar konsistensen.
• Lazy Loading (lat laddning): Micro-frontends laddas vid behov, vilket förbättrar den initiala sidladdningstiden och den övergripande prestandan.
• Förenklad deployment: Oberoende deployment av micro-frontends möjliggör snabbare release-cykler och minskad risk.
• Robust livscykelhantering: single-SPA tillhandahåller en väldefinierad livscykel för varje micro-frontend, vilket säkerställer att de initieras, monteras, avmonteras och förstörs korrekt.

Nyckelkoncept i Single-SPA

För att effektivt använda single-SPA är det avgörande att förstå dess kärnkoncept:

• Single-SPA-konfiguration: Den huvudsakliga JavaScript-filen som startar single-SPA-applikationen. Den är ansvarig för att registrera micro-frontends och definiera routing-logiken. Denna inkluderar ofta rotkomponenten som hanterar allt.
• Micro-frontends: Oberoende JavaScript-applikationer som är registrerade i single-SPA-konfigurationen. Varje micro-frontend ansvarar för att rendera en specifik del av användargränssnittet.
• Parcels: Återanvändbara komponenter som kan delas mellan micro-frontends. Parcels är användbara för att skapa gemensamma UI-element eller affärslogik som behövs i flera delar av applikationen.
• Rotkonfiguration (Root Config): Applikationens huvudskal som laddar och orkestrerar micro-frontends. Den är ansvarig för att hantera routing, global tillståndshantering och kommunikation mellan micro-frontends.
• Aktivitetsfunktioner (Activity Functions): JavaScript-funktioner som avgör när en micro-frontend ska vara aktiv (monterad) eller inaktiv (avmonterad). Dessa baseras vanligtvis på URL-rutter eller annat applikationstillstånd.

Implementera Single-SPA: En steg-för-steg-guide

Låt oss gå igenom ett grundläggande exempel på hur man sätter upp en single-SPA-applikation med två micro-frontends: en byggd med React och den andra med Vue.js.

Steg 1: Sätt upp Single-SPA-konfigurationen

Skapa först en ny katalog för din single-SPA-applikation och initiera ett Node.js-projekt:

            mkdir single-spa-example
cd single-spa-example
npm init -y
            

              
                Copy
              
            
          

Installera sedan de nödvändiga beroendena:

            npm install single-spa import-map-overrides
            

              
                Copy
              
            
          

Skapa en `index.html`-fil i rotkatalogen:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Single-SPA Example</title>
  <meta name="importmap-type" content="systemjs-importmap">
  <script type="systemjs-importmap">
    {
      "imports": {
        "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/single-spa.min.js",
        "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
        "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
        "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js"
      }
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/import-map-overrides@2.2.0/dist/import-map-overrides.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/system.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/systemjs@6.8.3/dist/extras/named-exports.js"></script>

</head>
<body>
  <noscript>
    Du måste aktivera JavaScript för att köra den här appen.
  </noscript>
  <div id="root"></div>
  <script>
    System.import('single-spa-config');
  </script>
  <import-map-overrides-full show-when-local-storage="devtools"></import-map-overrides-full>
</body>
</html>
            

              
                Copy
              
            
          

Denna `index.html`-fil sätter upp SystemJS-modulladdaren, import maps och single-SPA-konfigurationen. Import maps definierar URL:erna för de beroenden som används av micro-frontendsen.

Skapa en `single-spa-config.js`-fil:

            import * as singleSpa from 'single-spa';

singleSpa.registerApplication(
  'react-app',
  () => System.import('react-app'),
  location => location.pathname.startsWith('/react')
);

singleSpa.registerApplication(
  'vue-app',
  () => System.import('vue-app'),
  location => location.pathname.startsWith('/vue')
);

singleSpa.start();
            

              
                Copy
              
            
          

Denna fil registrerar två micro-frontends: `react-app` och `vue-app`. `activityFunction` avgör när varje micro-frontend ska vara aktiv baserat på URL:en.

Steg 2: Skapa React Micro-Frontend

Skapa en ny katalog för React micro-frontend:

            mkdir react-app
cd react-app
npx create-react-app .
npm install single-spa-react
            

              
                Copy
              
            
          

Modifiera `src/index.js`-filen för att använda `single-spa-react`:

            import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import singleSpaReact from 'single-spa-react';

const lifecycles = singleSpaReact({
  React,
  ReactDOM,
  rootComponent: App,
  errorBoundary(err, info, props) {
    // Anpassa rotens error boundary för din microfrontend här.
    return (<h1>Fel</h1>);
  },
});

export const { bootstrap, mount, unmount } = lifecycles;

// Om du vill börja mäta prestanda i din app, skicka en funktion
// för att logga resultat (till exempel: reportWebVitals(console.log))
// eller skicka till en analysslutpunkt. Läs mer: https://bit.ly/CRA-vitals
reportWebVitals();

            

              
                Copy
              
            
          

Skapa en `public/index.html`-fil (om den inte finns) och se till att `root`-diven finns:

            <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    <!--
      manifest.json tillhandahåller metadata som används när din webbapp installeras på en
      användares mobila enhet eller dator. Se https://developers.google.com/web/fundamentals/web-app-manifest/
    -->
    <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
    <!--
      Notera användningen av %PUBLIC_URL% i taggarna ovan.
      Den kommer att ersättas med URL:en till `public`-mappen under bygget.
      Endast filer inuti `public`-mappen kan refereras från HTML-koden.

      Till skillnad från "/favicon.ico" eller "favicon.ico", kommer "%PUBLIC_URL%/favicon.ico" att
      fungera korrekt både med klient-sidans routing och en icke-rot publik URL.
      Lär dig hur du konfigurerar en icke-rot publik URL genom att köra `npm run build`.
    -->
    <title>React App</title>
  </head>
  <body>
    <noscript>Du måste aktivera JavaScript för att köra denna app.</noscript>
    <div id="root"></div>
    <!--
      Denna HTML-fil är en mall.
      Om du öppnar den direkt i webbläsaren kommer du att se en tom sida.

      Du kan lägga till webbteckensnitt, metataggar eller analysverktyg i den här filen.
      Byggsteget kommer att placera de paketerade skripten i <body>-taggen.

      För att påbörja utvecklingen, kör `npm start` eller `yarn start`.
      För att skapa ett produktionspaket, använd `npm run build` eller `yarn build`.
    -->
  </body>
</html>
            

              
                Copy
              
            
          

Modifiera `App.js` för att visa en anpassad text så att vi enkelt kan verifiera vårt arbete:

            import React from 'react';
import logo from './logo.svg';
import './App.css';

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          Detta är React Micro-Frontend!
        </p>
        <a
          className="App-link"
          href="https://reactjs.org"
          target="_blank"
          rel="noopener noreferrer"
        >
          Lär dig React
        </a>
      </header>
    </div>
  );
}

export default App;

            

              
                Copy
              
            
          

Bygg React micro-frontend:

            npm run build
            

              
                Copy
              
            
          

Byt namn på `build`-katalogen till `react-app` och placera den i roten av single-SPA-applikationen. Skapa sedan en `react-app.js`-fil inuti `react-app`-katalogen med innehållet från `build/static/js`-filen. Om det finns fler js-filer i `static/js`-katalogen, inkludera dem också.

Uppdatera import map i `index.html` för att peka på React micro-frontend:

            {
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/single-spa.min.js",
    "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
    "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js",
    "react-app": "/react-app/react-app.js"
  }
}
            

              
                Copy
              
            
          

Steg 3: Skapa Vue.js Micro-Frontend

Skapa en ny katalog för Vue.js micro-frontend:

            mkdir vue-app
cd vue-app
npx @vue/cli create .
npm install single-spa-vue --save
            

              
                Copy
              
            
          

Under Vue CLI-installationen, välj standardförinställningen eller anpassa den efter behov.

Modifiera `src/main.js`-filen för att använda `single-spa-vue`:

            import Vue from 'vue'
import App from './App.vue'
import singleSpaVue from 'single-spa-vue';

Vue.config.productionTip = false

const vueLifecycles = singleSpaVue({
  Vue,
  appOptions: {
    el: '#vue-app',
    render: h => h(App)
  }
});

export const bootstrap = vueLifecycles.bootstrap;
export const mount = vueLifecycles.mount;
export const unmount = vueLifecycles.unmount;
            

              
                Copy
              
            
          

Modifiera `App.vue` för att visa en anpassad text så att vi enkelt kan verifiera vårt arbete:

            <template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <p>Detta är <b>Vue Micro-Frontend</b>!</p>
    <HelloWorld msg="Välkommen till din Vue.js-app"/>
  </div>
</template>

<script>
import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
  components: {
    HelloWorld
  }
}
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

            

              
                Copy
              
            
          

Bygg Vue.js micro-frontend:

            npm run build
            

              
                Copy
              
            
          

Byt namn på `dist`-katalogen till `vue-app` och placera den i roten av single-SPA-applikationen. Skapa sedan en `vue-app.js`-fil inuti `vue-app`-katalogen med innehållet från `dist/js/app.js`-filen. Om det finns fler js-filer i `dist/js`-katalogen, inkludera dem också.

Uppdatera import map i `index.html` för att peka på Vue.js micro-frontend:

            {
  "imports": {
    "single-spa": "https://cdn.jsdelivr.net/npm/single-spa@5.9.0/lib/single-spa.min.js",
    "react": "https://cdn.jsdelivr.net/npm/react@16.13.1/umd/react.production.min.js",
    "react-dom": "https://cdn.jsdelivr.net/npm/react-dom@16.13.1/umd/react-dom.production.min.js",
    "vue": "https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.min.js",
    "react-app": "/react-app/react-app.js",
    "vue-app": "/vue-app/vue-app.js"
  }
}
            

              
                Copy
              
            
          

Steg 4: Servera applikationen

Servera `index.html`-filen med en enkel HTTP-server. Du kan använda ett verktyg som `http-server`:

            npm install -g http-server
http-server -c-1
            

              
                Copy
              
            
          

Navigera till `http://localhost:8080/react` för att se React micro-frontend och `http://localhost:8080/vue` för att se Vue.js micro-frontend.

Viktiga överväganden:

• Detta exempel använder enkel routing baserad på URL-prefix. För mer komplexa routing-scenarier, överväg att använda ett dedikerat routing-bibliotek som `single-spa-router`.
• I en produktionsmiljö skulle du vanligtvis servera micro-frontends från ett CDN eller annan värdtjänst för statiska tillgångar.
• Detta exempel använder import maps för beroendehantering. Överväg att använda ett byggverktyg som Webpack eller Parcel för att paketera dina micro-frontends för produktion.

Avancerade tekniker i Single-SPA

När du har satt upp en grundläggande single-SPA-applikation kan du utforska mer avancerade tekniker för att förbättra skalbarheten och underhållbarheten i din arkitektur.

Dela kod med Parcels

Parcels låter dig dela återanvändbara komponenter och logik mellan micro-frontends. Detta kan hjälpa till att minska kodduplicering och förbättra konsistensen i din applikation.

För att skapa en parcel kan du använda `singleSpa.mountRootParcel`-funktionen:

            import * as singleSpa from 'single-spa';
import React from 'react';
import ReactDOM from 'react-dom';

function MyParcel(props) {
  return (<div>Hej från Parcel!  {props.name}</div>);
}

const parcel = singleSpa.mountRootParcel(() => {
  return Promise.resolve({
    bootstrap: () => Promise.resolve(),
    mount: (props) => {
      ReactDOM.render(<MyParcel name={props.name} />, document.getElementById('parcel-container'));
      return Promise.resolve();
    },
    unmount: () => {
      ReactDOM.unmountComponentAtNode(document.getElementById('parcel-container'));
      return Promise.resolve();
    },
  });
});

// För att montera parcel:
parcel.mount({ name: 'Exempel' });
            

              
                Copy
              
            
          

Kommunikation mellan Micro-frontends

Micro-frontends behöver ofta kommunicera med varandra för att dela data eller utlösa åtgärder. Det finns flera sätt att uppnå detta:

• Delat globalt tillstånd: Använd ett globalt tillståndshanteringsbibliotek som Redux eller Vuex för att dela data mellan micro-frontends.
• Anpassade händelser (Custom Events): Använd anpassade DOM-händelser för att sända meddelanden mellan micro-frontends.
• Direkta funktionsanrop: Exportera funktioner från en micro-frontend och importera dem i en annan. Detta tillvägagångssätt kräver noggrann samordning för att undvika beroenden och cirkulära referenser.
• Meddelandekö (Message Broker): Implementera ett meddelandekö-mönster med ett bibliotek som RabbitMQ eller Kafka för att frikoppla micro-frontends och möjliggöra asynkron kommunikation.

Autentisering och auktorisering

Att implementera autentisering och auktorisering i en micro-frontend-arkitektur kan vara utmanande. Här är några vanliga tillvägagångssätt:

• Centraliserad autentisering: Använd en central autentiseringstjänst för att hantera användarinloggning och autentisering. Autentiseringstjänsten kan utfärda tokens som används för att autentisera förfrågningar till micro-frontends.
• Delad autentiseringsmodul: Skapa en delad autentiseringsmodul som används av alla micro-frontends. Denna modul kan hantera token-hantering och användarsessioner.
• API Gateway: Använd en API-gateway för att hantera autentisering och auktorisering för alla förfrågningar till micro-frontends. API-gatewayen kan verifiera tokens och upprätthålla åtkomstkontrollpolicyer.

Fördelar med Micro-Frontend-arkitektur med Single-SPA

• Ökad teamautonomi: Oberoende team kan utveckla och deploya micro-frontends utan att påverka andra team. Detta främjar autonomi och snabbare utvecklingscykler.
• Förbättrad skalbarhet: Micro-frontends kan skalas oberoende, vilket gör att du kan optimera resursallokering och hantera ökad trafik.
• Förbättrad underhållbarhet: Mindre, oberoende enheter är lättare att underhålla och uppdatera jämfört med en stor monolitisk applikation.
• Teknisk mångfald: Team kan välja den bästa teknikstacken för sin micro-frontend, vilket möjliggör större flexibilitet och innovation.
• Minskad risk: Oberoende deployment av micro-frontends minskar risken med att driftsätta ändringar och förenklar rollback-procedurer.
• Gradvis migrering: Du kan gradvis migrera en monolitisk applikation till en micro-frontend-arkitektur utan att kräva en fullständig omskrivning.

Utmaningar med Micro-Frontend-arkitektur

Även om micro-frontends erbjuder många fördelar, introducerar de också vissa utmaningar:

• Ökad komplexitet: Att hantera flera micro-frontends kan vara mer komplext än att hantera en enda monolitisk applikation.
• Kommunikations-overhead: Att samordna kommunikationen mellan micro-frontends kan vara utmanande.
• Komplex deployment: Att deploya flera micro-frontends kan vara mer komplext än att deploya en enda applikation.
• Konsistens: Att upprätthålla en konsekvent användarupplevelse över micro-frontends kan vara svårt.
• Duplicering: Utan noggrann planering kan kod och beroenden dupliceras över micro-frontends.
• Drift-overhead: Att sätta upp och hantera infrastrukturen för flera micro-frontends kan öka driftkostnaderna.

Bästa praxis för att bygga Micro-Frontends med Single-SPA

För att framgångsrikt implementera en micro-frontend-arkitektur med single-SPA, följ dessa bästa praxis:

• Definiera tydliga gränser: Definiera tydligt gränserna mellan micro-frontends för att minimera beroenden och kommunikations-overhead.
• Etablera en delad stilguide: Skapa en delad stilguide för att säkerställa en konsekvent användarupplevelse över micro-frontends.
• Automatisera deployment: Automatisera deploymentprocessen för att förenkla driftsättningen av micro-frontends.
• Övervaka prestanda: Övervaka prestandan för varje micro-frontend för att identifiera och lösa problem.
• Använd ett centraliserat loggsystem: Använd ett centraliserat loggsystem för att samla loggar från alla micro-frontends och förenkla felsökning.
• Implementera robust felhantering: Implementera robust felhantering för att förhindra att fel i en micro-frontend påverkar andra micro-frontends.
• Dokumentera din arkitektur: Dokumentera din micro-frontend-arkitektur för att säkerställa att alla i teamet förstår hur den fungerar.
• Välj rätt kommunikationsstrategi: Välj lämplig kommunikationsstrategi baserat på din applikations behov.
• Prioritera prestanda: Optimera prestandan för varje micro-frontend för att säkerställa en snabb och responsiv användarupplevelse.
• Tänk på säkerhet: Implementera säkerhetsbästa praxis för att skydda din micro-frontend-arkitektur från sårbarheter.
• Adoptera en DevOps-kultur: Främja en DevOps-kultur för att uppmuntra samarbete mellan utvecklings- och driftteam.

Användningsfall för Single-SPA och Micro-Frontends

Single-SPA och micro-frontends är väl lämpade för en mängd olika användningsfall, inklusive:

• Stora, komplexa applikationer: Micro-frontends kan hjälpa till att bryta ner stora, komplexa applikationer i mindre, mer hanterbara enheter.
• Organisationer med flera team: Micro-frontends kan göra det möjligt för olika team att arbeta oberoende på olika delar av applikationen. Till exempel, i ett globalt e-handelsföretag kan ett team fokusera på produktkatalogen (t.ex. baserat i Tyskland), medan ett annat hanterar kundvagnen (t.ex. baserat i Indien), och ett tredje hanterar användarkonton (t.ex. baserat i USA).
• Migrering av äldre applikationer: Micro-frontends kan användas för att gradvis migrera äldre applikationer till en modernare arkitektur.
• Bygga Platform-as-a-Service (PaaS)-lösningar: Micro-frontends kan användas för att bygga PaaS-lösningar som gör det möjligt för utvecklare att skapa och deploya sina egna applikationer.
• Personliga användarupplevelser: Olika micro-frontends kan användas för att leverera personliga användarupplevelser baserade på användarroller, preferenser eller plats. Föreställ dig en nyhetswebbplats som dynamiskt laddar olika innehållsmoduler baserat på användarens intressen och läshistorik.

Framtiden för Micro-Frontends

Micro-frontend-arkitekturen fortsätter att utvecklas, med nya verktyg och tekniker som dyker upp för att hantera utmaningarna med att bygga och hantera distribuerade frontend-applikationer. Några viktiga trender att hålla ögonen på inkluderar:

• Web Components: Web components är en standard för att skapa återanvändbara UI-element som kan användas i vilken webbapplikation som helst. Web components kan användas för att bygga micro-frontends som är ramverksagnostiska och enkelt kan integreras i olika applikationer.
• Module Federation: Module federation är en Webpack-funktion som gör att du kan dela kod och beroenden mellan olika Webpack-byggen. Module federation kan användas för att bygga micro-frontends som är löst kopplade och oberoende deploybara.
• Server-Side Rendering (SSR): Server-side rendering kan förbättra prestandan och SEO för micro-frontend-applikationer. SSR kan användas för att rendera den initiala HTML-koden för en micro-frontend på servern, vilket minskar mängden JavaScript som behöver laddas ner och köras på klienten.
• Edge Computing: Edge computing kan användas för att deploya micro-frontends närmare användaren, vilket minskar latens och förbättrar prestanda. Edge computing kan också möjliggöra nya användningsfall för micro-frontends, såsom offline-åtkomst och realtidsdatabehandling.

Slutsats

Single-SPA är ett kraftfullt ramverk för att bygga skalbara, underhållbara och flexibla micro-frontend-arkitekturer. Genom att anamma principerna för micro-frontends och utnyttja funktionerna i single-SPA kan organisationer stärka sina team, påskynda utvecklingscykler och leverera exceptionella användarupplevelser. Även om micro-frontends introducerar komplexitet är det avgörande för framgång att anta bästa praxis, planera noggrant och välja rätt verktyg. I takt med att landskapet för micro-frontends fortsätter att utvecklas kommer det att vara avgörande att hålla sig informerad om nya tekniker och metoder för att bygga moderna och motståndskraftiga webbapplikationer.