ABONAMENTE VIDEO REDACȚIA
RO
EN
NOU
Numărul 147
Numărul 146 Numărul 145 Numărul 144 Numărul 143 Numărul 142 Numărul 141 Numărul 140 Numărul 139 Numărul 138 Numărul 137 Numărul 136 Numărul 135 Numărul 134 Numărul 133 Numărul 132 Numărul 131 Numărul 130 Numărul 129 Numărul 128 Numărul 127 Numărul 126 Numărul 125 Numărul 124 Numărul 123 Numărul 122 Numărul 121 Numărul 120 Numărul 119 Numărul 118 Numărul 117 Numărul 116 Numărul 115 Numărul 114 Numărul 113 Numărul 112 Numărul 111 Numărul 110 Numărul 109 Numărul 108 Numărul 107 Numărul 106 Numărul 105 Numărul 104 Numărul 103 Numărul 102 Numărul 101 Numărul 100 Numărul 99 Numărul 98 Numărul 97 Numărul 96 Numărul 95 Numărul 94 Numărul 93 Numărul 92 Numărul 91 Numărul 90 Numărul 89 Numărul 88 Numărul 87 Numărul 86 Numărul 85 Numărul 84 Numărul 83 Numărul 82 Numărul 81 Numărul 80 Numărul 79 Numărul 78 Numărul 77 Numărul 76 Numărul 75 Numărul 74 Numărul 73 Numărul 72 Numărul 71 Numărul 70 Numărul 69 Numărul 68 Numărul 67 Numărul 66 Numărul 65 Numărul 64 Numărul 63 Numărul 62 Numărul 61 Numărul 60 Numărul 59 Numărul 58 Numărul 57 Numărul 56 Numărul 55 Numărul 54 Numărul 53 Numărul 52 Numărul 51 Numărul 50 Numărul 49 Numărul 48 Numărul 47 Numărul 46 Numărul 45 Numărul 44 Numărul 43 Numărul 42 Numărul 41 Numărul 40 Numărul 39 Numărul 38 Numărul 37 Numărul 36 Numărul 35 Numărul 34 Numărul 33 Numărul 32 Numărul 31 Numărul 30 Numărul 29 Numărul 28 Numărul 27 Numărul 26 Numărul 25 Numărul 24 Numărul 23 Numărul 22 Numărul 21 Numărul 20 Numărul 19 Numărul 18 Numărul 17 Numărul 16 Numărul 15 Numărul 14 Numărul 13 Numărul 12 Numărul 11 Numărul 10 Numărul 9 Numărul 8 Numărul 7 Numărul 6 Numărul 5 Numărul 4 Numărul 3 Numărul 2 Numărul 1
×
▼ LISTĂ EDIȚII ▼
Numărul 147
Abonament PDF

Microfrontends – Ce sunt și cum le utilizăm

Mihai Ureche
Senior Engineering Manager @ Cognizant



PROGRAMARE


Aplicațiile folosite în zilele noastre sunt din ce în ce mai complexe. De aceea o arhitectură bine pusă la punct de la început poate ajuta la o dezvoltare a acestora într-un mod mai ușor. Deși în trecut majoritatea logicii era în backend, acum avem multă logică și în zona de frontend, fapt care a generat și conceptul de micro-frontend.

Microfrontend reprezintă o abordare arhitecturală în dezvoltarea aplicațiilor web, care împarte interfața utilizatorului în componente independente, denumite "microfrontends". Această metodă extinde conceptul de microservices, aplicându-l la frontend. În loc de a dezvolta o aplicație monolitică, dezvoltatorii creează și gestionează mai multe aplicații mici, fiecare cu propriul domeniu de responsabilitate, dar care funcționează împreună pentru a forma o aplicație unitară.

Fig. 1 - Schiță generală a unei arhitecturi cu microfrontends (imagine reinterpretată de autor)

Fiecare microfrontend este autonom și poate fi dezvoltat, testat și implementat independent de celelalte. Aceste componente pot fi create folosind tehnologii diferite, pot avea propriul ciclu de viață și pot fi gestionate de echipe separate. Această abordare aduce o serie de avantaje, în special în proiectele mari, unde complexitatea și dimensiunea codului pot deveni o provocare.

Avantajele utilizării microfrontends

  1. Dezvoltare independentă. Echipele pot lucra în paralel la diferite părți ale aplicației, fără a se bloca reciproc. Fiecare echipă se concentrează pe o anumită secțiune, ceea ce reduce dependențele și permite livrarea mai rapidă a funcționalităților.

Fig. 2 - Folosirea a mai multor tehnologii. Sursa

  1. Scalabilitate. Fiecare microfrontend poate fi scalat independent în funcție de nevoi, permițând o gestionare mai eficientă a resurselor.

  2. Actualizări și întreținere. Actualizările și corecțiile pot fi aplicate doar pe microfrontendul relevant, fără a afecta întreaga aplicație. Acest fapt duce la o reducere a riscului și a timpului necesar pentru implementarea schimbărilor.

  3. Flexibilitate tehnologică. Fiecare microfrontend este autonom, astfel încât poate fi dezvoltat folosind tehnologia care se potrivește cel mai bine nevoilor echipei respective. Astfel, echipele nu sunt constrânse de o singură tehnologie.

  4. Reutilizare. Microfrontendurile pot fi reutilizate în mai multe aplicații, ceea ce reduce timpul de dezvoltare și crește consistența între diferite aplicații.

Cum se pot utiliza Microfrontendurile

Implementarea microfrontendurilor poate fi realizată prin mai multe tehnici, în funcție de arhitectura și nevoile specifice ale aplicației. Iată câteva metode comune:

A. Compoziție pe server

În această abordare, serverul combină mai multe microfrontenduri într-o singură pagină web înainte de a trimite rezultatul către client. Aceasta permite o încărcare rapidă a paginii și oferă o experiență unitară pentru utilizator.

Fig. 3 - Combinarea componentelor pe backend (imagine reinterpretată de autor)

B. Compoziție pe client

În acest caz, microfrontendurile sunt încărcate și asamblate în browserul utilizatorului, de obicei folosind tehnici precum lazy loading. Această abordare poate reduce sarcina pe server și permite o mai mare flexibilitate în ceea ce privește actualizările.

Fig. 4 - Combinarea componentelor pe frontend. Sursa

C. Iframes

Utilizarea de iframes permite izolarea completă a fiecărui microfrontend, ceea ce poate fi util pentru a evita conflictele de stil sau script. Totuși, această abordare poate avea un impact negativ asupra performanței și a experienței utilizatorului.

D. Web Components

Web Components sunt o tehnologie nativă a browserelor care permite crearea de elemente personalizate, reutilizabile și izolate, care pot fi utilizate ca microfrontenduri. Aceasta oferă o metodă standardizată de a dezvolta componente care pot fi integrate ușor în orice aplicație.

Implementarea de microfrontenduri în Angular

Implementarea microfrontendurilor în Angular implică împărțirea unei aplicații monolitice mari în module mai mici și independente, care pot fi dezvoltate și gestionate de echipe diferite.

Pașii de implementare a microfrontendurilor în Angular:

1. Stabilirea aplicației principale (shell).

Aplicația principală (shell) gestionează routingul și integrează microfrontendurile. Aceasta este responsabilă de încărcarea microfrontendurilor și de coordonarea interacțiunii dintre ele.

Pașii pentru a începe să construiți o aplicație cu microfrontend sunt următorii:

Exemplu de configurare a rutei pentru aplicația shell:

const routes: Routes = [
    {
      path: ‘microfrontend’,
      loadChildren: () 
        => import(‘remote/microfrontend’).then(
        m => m.MicrofrontendModule)
    }
];  

2. Crearea aplicațiilor microfrontend

Fiecare microfrontend este o aplicație Angular independentă, care poate fi dezvoltată, testată și rulată separat.

3. Comunicarea între microfrontenduri

Comunicarea dintre microfrontenduri poate fi realizată prin:

4. Module Federation (Webpack 5).

Webpack 5 oferă suport pentru Module Federation, o soluție populară pentru microfrontends în care aplicațiile pot partaja module la runtime. Acest lucru permite încărcarea dinamică a microfrontendurilor fără ca toate să fie încărcate într-un singur pachet atunci când se execută buildul.

Exemplu de configurare webpack.config.js pentru aplicația shell:

const ModuleFederationPlugin = require(‘webpack/lib/container/ModuleFederationPlugin’);

module.exports = {
  output: {
    publicPath: ‘http://localhost:4200/’,
  },
  plugins: [
    new ModuleFederationPlugin({
      name: ‘shell’,
      remotes: {
        microfrontend: 
‘microfrontend@http://localhost:4201/remoteEntry.js’,
      },
      shared: [‘@angular/core’, ‘@angular/common’,
              ‘@angular/router’],
    }),
  ],
};

Exemplu de configurare pentru un microfrontend:

const ModuleFederationPlugin = require(
  ‘webpack/lib/container/ModuleFederationPlugin’);

module.exports = {
  output: {
    publicPath: ‘http://localhost:4201/’,
  },
  plugins: [
    new ModuleFederationPlugin({
     name: ‘microfrontend’,
     filename: ‘remoteEntry.js’,
     exposes: {
     ‘./Module’: ‘./src/app/microfrontend.module.ts’,
     },
     shared: [‘@angular/core’, ‘@angular/common’, 
             ‘@angular/router’],
    }),
  ],
};

5. Instalare și Orchestrare

Fiecare microfrontend poate fi instalat separat și pe servere diferite. Aplicația shell este responsabilă cu orchestrarea și integrarea fiecărui microfrontend la runtime. În funcție de rută sau de interacțiuni, shellul poate încărca microfrontendurile necesare.

Provocări și Considerații

Deși microfrontendurile aduc numeroase avantaje, există și provocări asociate cu această abordare. Una dintre principalele provocări este gestionarea consistenței și a comunicării între microfrontenduri. Deoarece fiecare componentă este autonomă, poate fi dificil să se asigure o experiență coerentă pentru utilizatori. De asemenea, gestionarea dependențelor comune, cum ar fi stilurile sau librăriile de utilități, poate fi complexă și poate duce la creșterea dimensiunii aplicației.

Pentru a aborda aceste provocări, este esențială o bună planificare arhitecturală și utilizarea unor practici solide de gestionare a codului. De asemenea, folosirea unor instrumente și platforme de orchestrare și containerizare poate facilita gestionarea microfrontendurile într-un mod eficient.

Concluzii

Microfrontendurile reprezintă o evoluție importantă în dezvoltarea aplicațiilor web, permițând o mai mare flexibilitate, scalabilitate și independență în dezvoltare. Deși implementarea lor poate aduce provocări, beneficiile pe termen lung, în special pentru proiectele mari și complexe, sunt semnificative. Cu o abordare corectă, microfrontendurile pot transforma modul în care echipele de dezvoltare construiesc și întrețin aplicații moderne.

Conferință TSM

NUMĂRUL 147 - Automotive

Sponsori

  • Accenture
  • BT Code Crafters
  • Accesa
  • Bosch
  • Betfair
  • MHP
  • BoatyardX
  • .msg systems
  • P3 group
  • Ing Hubs
  • Cognizant Softvision
  • Colors in projects