Micro front-end: Qiankun, Wujie, spa singola, iframe confronti

Micro front-end: Qiankun, Wujie, spa singola, confronto iframe

2024-07-12

1. Panoramica del framework micro front-end

Un framework micro-front-end è una soluzione tecnica progettata per suddividere applicazioni front-end di grandi dimensioni in più applicazioni micro-front-end piccole, indipendenti e gestibili. Ciascuna applicazione micro-front-end può essere sviluppata, testata, distribuita ed eseguita in modo indipendente mantenendo la collaborazione complessiva e l'esperienza dell'utente.Questa architettura è simile all'architettura dei microservizi, ma si concentra sull'area front-end

2. Framework microfront-end comuni

qiankun : Sviluppato e gestito da Ant Financial, basato su Single-SPA, fornisce funzionalità di accesso semplice e indipendenti dallo stack tecnologico. Supporta più framework front-end come Vue e React e presenta bassi costi di trasformazione e un'esperienza di sviluppo amichevole.
spa singola : è un framework di routing front-end JavaScript leggero, incentrato sulla gestione del routing di applicazioni a pagina singola (SPA). Sebbene non sia di per sé un framework micro-frontend completo, è la base per molte implementazioni di micro-frontend.
iframe: Sebbene iframe in sé non sia un micro framework front-end, viene spesso utilizzato come semplice implementazione del micro front-end
Illimitato : Il micro framework front-end illimitato è una soluzione micro front-end basata su componenti Web + iframe. Presenta una serie di vantaggi come basso costo, alta velocità, isolamento nativo e funzioni potenti.Quella che segue è un'introduzione dettagliata al framework micro front-end illimitato

Punti comuni:Quando si cambia percorso, è possibile caricare il codice dell'applicazione corrispondente e lasciarlo funzionare nel contenitore.

AverePossibilità di caricare e scaricare applicazioni secondarie, quando la pagina passa da una sottoapplicazione all'altra, può essere caricata e renderizzata normalmente;
AvereFunzionalità di conservazione dello stato del routing, dopo aver attivato la sottoapplicazione, l'aggiornamento del browser e il routing in avanti e all'indietro della sottoapplicazione possono funzionare normalmente;
Tra applicazione principale e sottoapplicazione, sottoapplicazione e sottoapplicazionePossono comunicare tra loro；
Ogni micro applicazioneGestione indipendente del magazzino, sviluppo indipendente dello stack tecnologico, implementazione indipendente e funzionamento indipendente；

3. Confronto tra micro framework front-end

caratteristica	qiankun	Illimitato	spa singola	iframe
Supporto dello stack tecnologico	Indipendente dallo stack tecnologico, supporta React, Vue, Angular, ecc.	Basato su WebComponent, supporta più stack tecnologici	Indipendente dallo stack tecnologico, supporta più framework front-end	Lo stack tecnologico non ha nulla a che fare, ma l’integrazione deve considerare la compatibilità
Metodo di accesso	Semplice, accesso tramite API JS	Relativamente semplice, incapsulato tramite WebComponent	Complesso, è necessario configurare il ciclo di vita della singola spa	Semplice, incorporato tramite tag HTML
isolamento della sandbox	Fornisce sandbox JS e isolamento dello stile	Utilizza WebComponent per l'isolamento naturale	Gli sviluppatori devono implementare autonomamente l'isolamento sandbox	iframe isolamento naturale
Gestione del percorso	Supporta la manutenzione dello stato del routing e la mappatura del routing configurabile	Supporta il routing virtuale e mantieni lo stato del routing	Essendo un percorso di livello superiore, è necessario gestire personalmente i percorsi delle applicazioni secondarie.	Il routing è gestito dall'applicazione all'interno dell'iframe stesso
Comunicazione applicativa	Fornire un meccanismo di comunicazione tra le applicazioni padre-figlio e le applicazioni figlio-figlio	Fornire API basate su componenti per supportare la comunicazione	Gli sviluppatori devono implementare da soli il meccanismo di comunicazione	Può comunicare tramite parametri postMessage o URL, ecc.
Precaricamento delle risorse	Supporta il precaricamento delle risorse statiche	Supporta il precaricamento delle risorse statiche	Supporta il caricamento lento delle applicazioni	Non supporta il precaricamento, il caricamento su richiesta
Impatto sulle prestazioni	Più basso, ottimizzato tramite sandboxing e caricamento lento	Inferiore, ma WebComponent potrebbe avere un sovraccarico delle prestazioni	Inferiore, ma dipendente dall'ottimizzazione dell'applicazione	Più in alto, il carico di caricamento e rendering dell'iframe è maggiore
Esperienza di sviluppo	Meglio, fornisce API e documentazione ricche	L'API migliore e basata su componenti è più intuitiva	In generale, devi gestire molti dettagli da solo	Migliore, facile da integrare nelle applicazioni esistenti
disponibilità produttiva	Collaudato e adatto agli ambienti di produzione	Adatto per ambienti di produzione, ma potrebbe avere meno supporto da parte della comunità	Adatto per l'ambiente di produzione e deve essere migliorato dagli stessi sviluppatori	Adatto per ambienti di produzione, ma i problemi di sicurezza e prestazioni devono essere gestiti con attenzione
Costo di adattamento	Più in alto, è necessario adattare il routing, il ciclo di vita, ecc.	Moderato, principalmente adattato a WebComponent	Più in alto, richiede una conoscenza approfondita dell'architettura della singola spa	Inferiore, ma è necessario prestare attenzione ai problemi di compatibilità e prestazioni

Il micro framework front-end offre molti vantaggi allo sviluppo di applicazioni front-end, come l'indipendenza dallo stack tecnologico, lo sviluppo e l'implementazione indipendenti, gli aggiornamenti incrementali, ecc. Tuttavia, presenta anche alcune carenze, come l’elevata difficoltà di accesso e le scarse capacità di condivisione delle risorse. Pertanto, quando si sceglie se utilizzare un framework micro-front-end, è necessario considerarlo in modo completo in base alle esigenze specifiche del progetto e alle capacità tecniche del team. Allo stesso tempo, nelle applicazioni pratiche, dobbiamo anche prestare attenzione a questioni come la selezione del framework micro-front-end, la progettazione dell'architettura, la gestione del codice, ecc., per garantire il regolare avanzamento del progetto e il funzionamento stabile del sistema. sistema.

Condivisione della tecnologia

Micro front-end: Qiankun, Wujie, spa singola, confronto iframe

1. Panoramica del framework micro front-end

2. Framework microfront-end comuni

3. Confronto tra micro framework front-end

Profilo personale

le mie informazioni di contatto