Mikrokäyttöliittymä: Qiankun, Wujie, yksi kylpylä, iframe vertailu

Mikrokäyttöliittymä: Qiankun, Wujie, yksikylpylä, iframe-vertailu

2024-07-12

1. Yleiskatsaus mikrokäyttöliittymäkehykseen

Mikrokäyttöliittymä on tekninen ratkaisu, joka on suunniteltu jakamaan suuret käyttöliittymäsovellukset useiksi pieniksi, riippumattomiksi, ylläpidettäviksi mikrokäyttöliittymäsovelluksiksi. Jokainen mikro-etupääsovellus voidaan kehittää, testata, ottaa käyttöön ja käyttää itsenäisesti säilyttäen samalla yleisen yhteistyön ja käyttökokemuksen.Tämä arkkitehtuuri on samanlainen kuin mikropalveluarkkitehtuuri, mutta keskittyy käyttöliittymäalueeseen

2. Yhteiset mikrokäyttöliittymäkehykset

qiankun : Ant Financialin kehittämä ja ylläpitämä, Single-SPA:han perustuva se tarjoaa teknologiapinosta riippumattomia ja yksinkertaisia käyttöominaisuuksia. Se tukee useita etupään kehyksiä, kuten Vue ja React, ja sillä on alhaiset muunnoskustannukset ja ystävällinen kehityskokemus.
yksi kylpylä : Se on kevyt JavaScript-etupään reitityskehys, joka keskittyy yksisivuisten sovellusten (SPA) reitityshallintaan. Vaikka se ei sinänsä ole täydellinen mikrokäyttöliittymäkehys, se on perusta monille mikrokäyttöliittymän toteutuksille.
iframe: Vaikka iframe itsessään ei ole mikrokäyttöliittymäkehys, sitä käytetään usein mikrokäyttöliittymän yksinkertaisena toteutuksena.
Rajaton : Rajoittamaton mikrokäyttöliittymä on web-komponentteihin + iframeen perustuva mikrokäyttöliittymä. Siinä on useita etuja, kuten alhainen hinta, nopea nopeus, natiivi eristys ja vahvat toiminnot.Seuraavassa on yksityiskohtainen esittely rajoittamattomaan mikrokäyttöliittymäkehykseen

Yhteiset kohdat:Kun reitti vaihdetaan, voit ladata vastaavan sovelluksen koodin ja antaa sen kulkea kontissa.

omistaaMahdollisuus ladata ja purkaa alisovelluksia, kun sivu siirtyy alisovelluksesta toiseen, se voidaan ladata ja hahmontaa normaalisti;
omistaaReitityksen tilan säilytyskyky, alisovelluksen aktivoinnin jälkeen selaimen päivitys, alisovelluksen reititys eteenpäin ja taaksepäin voi toimia normaalisti;
Pääsovelluksen ja osasovelluksen, osasovelluksen ja osasovelluksen välilläOsaavat kommunikoida keskenään；
Jokainen mikrosovellusRiippumaton varastonhallinta, itsenäinen teknologiapinon kehittäminen, itsenäinen käyttöönotto ja itsenäinen toiminta；

3. Mikrokäyttöliittymäkehysten vertailu

ominaisuus	qiankun	Rajaton	yksi kylpylä	iframe
Teknologiapinon tuki	Teknologiapinosta riippumaton, tukee React, Vue, Angular jne.	Perustuu WebComponentiin, tukee useita teknologiapinoja	Teknologiapinosta riippumaton, tukee useita etupään kehyksiä	Teknologiapinolla ei ole mitään tekemistä, mutta integroinnissa on otettava huomioon yhteensopivuus
Pääsymenetelmä	Yksinkertainen, pääsy JS API:n kautta	Suhteellisen yksinkertainen, koteloitu WebComponentin kautta	Monimutkainen, sinun on määritettävä yhden altaan elinkaari	Yksinkertainen, upotettu HTML-tunnisteiden kautta
hiekkalaatikon eristys	Tarjoaa JS-hiekkalaatikon ja tyylieristyksen	Käytä WebComponentia luonnolliseen eristykseen	Kehittäjien on otettava käyttöön hiekkalaatikkoeristys itse	iframe luonnollinen eristys
Reitin hallinta	Tukee reitityksen tilan ylläpitoa ja konfiguroitavaa reitityskartoitusta	Tukea virtuaalista reititystä ja ylläpitää reitityksen tilaa	Ylimmän tason reittinä sinun tulee hallita alisovellusreittejä itse.	Sovellus hallitsee reititystä itse iframe-kehyksessä
Sovellusviestintä	Tarjoa viestintämekanismi vanhempien ja lasten välisten sovellusten ja lapsien välisten sovellusten välillä	Tarjoa komponenttipohjainen API tukemaan viestintää	Kehittäjien on otettava viestintämekanismi käyttöön itse	Voi kommunikoida postMessage- tai URL-parametreilla jne.
Resurssien esilataus	Tukee staattista resurssien esilatausta	Tukee staattista resurssien esilatausta	Tukee sovellusten laiskaa lataamista	Ei tue esilatausta, latausta pyynnöstä
Vaikutus suorituskykyyn	Matalampi, optimoitu hiekkalaatikolla ja laiskalla lataamisella	Alhaisempi, mutta WebComponentilla saattaa olla ylimääräistä suorituskykyä	Alempi, mutta riippuu sovelluksen optimoinnista	Korkeampi, iframe-lataus- ja renderöintikustannukset ovat suurempia
Kehittämiskokemusta	Parempi, tarjoaa monipuolisen sovellusliittymän ja dokumentaation	Parempi, komponenttipohjainen API on intuitiivisempi	Yleensä sinun täytyy käsitellä paljon yksityiskohtia itse	Parempi, helppo integroida olemassa oleviin sovelluksiin
tuotannon saatavuus	Todistettu ja soveltuu tuotantoympäristöihin	Sopii tuotantoympäristöihin, mutta sillä voi olla vähemmän yhteisön tukea	Sopii tuotantoympäristöön, ja kehittäjien itsensä on parannettava sitä	Sopii tuotantoympäristöihin, mutta turvallisuus- ja suorituskykykysymykset on käsiteltävä huolellisesti
Sopeutumiskustannukset	Korkeampi, on mukautettava reititystä, elinkaarta jne.	Kohtalainen, pääasiassa WebComponentille mukautettu	Korkeampi, vaatii syvällistä ymmärrystä yhden kylpylän arkkitehtuurista	Matalampi, mutta on kiinnitettävä huomiota yhteensopivuus- ja suorituskykyongelmiin

Mikrokäyttöliittymä tuo monia etuja käyttöliittymäsovellusten kehittämiseen, kuten teknologiapinon riippumattomuuden, itsenäisen kehityksen ja käyttöönoton, asteittaiset päivitykset jne. Siinä on kuitenkin myös tiettyjä puutteita, kuten korkeat pääsyvaikeudet ja huonot resurssien jakamisominaisuudet. Siksi, kun valitset, käytätkö mikro-etuosakehystä, sinun on harkittava sitä kattavasti projektin erityistarpeiden ja tiimin teknisten valmiuksien perusteella. Samanaikaisesti meidän on käytännön sovelluksissa kiinnitettävä huomiota myös sellaisiin asioihin kuin mikro-etupään kehysten valinta, arkkitehtuurin suunnittelu, koodinhallinta jne. varmistaaksemme projektin sujuvan etenemisen ja järjestelmän vakaan toiminnan. järjestelmä.

Teknologian jakaminen