Talaan ng nilalaman[Tago][Ipakita]
- Kaya, ano ang isang module federation?
- Bakit module federation?
- Mga pangunahing bahagi ng pederasyon ng module
Mga pangunahing tampok ng Module Federation+-
- Napakahusay na pagganap sa web
- Epektibong pag-unlad
- Ang kakayahang magpagaling sa sarili at kalabisan
- Epektibong paghawak ng mga karaniwang dependencies
- Sa halip na muling i-deploy ang mga consumer, mag-deploy ng independent code.
- Kapag tumatakbo, mag-import ng code mula sa iba pang mga build.
- Pinahusay na karanasan ng developer habang pinapanatili ang karanasan ng kliyente
- Ang mga micro-frontend ay gumagana sa monolitikong paraan.
- Konklusyon
Inilalapat ng konsepto ng mga micro frontend ang mga microservice sa pagpapaunlad ng frontend.
Ang ideya ay upang hatiin ang application o website sa mas maliit, independiyenteng binuo na mga piraso na pagkatapos ay konektado sa panahon ng runtime, kumpara sa paggawa ng mga ito bilang isang solong, cohesive monolith.
Ang pamamaraan ay nagbibigay-daan sa iyo upang lumikha ng iba pang mga bahagi ng application gamit ang iba pang mga teknolohiya at may mga independiyenteng koponan.
Ang ideya ay upang bawasan ang mga gastos sa pagpapanatili na nauugnay sa isang tipikal na monolith sa pamamagitan ng pagse-segment ng pag-unlad sa ganitong paraan.
Sa pamamagitan ng pagpapahintulot sa kanila na mag-concentrate sa isang partikular na lugar ng isang application bilang isang magkakaugnay na team, ginagawa rin nitong posible ang mga bagong paraan ng pakikipagtulungan sa pagitan ng mga backend at frontend devs.
Halimbawa, maaaring mayroon kang isang team na tanging responsable para sa kakayahan sa paghahanap o isa pang aspeto ng isang pangunahing produkto na mahalaga sa isang negosyo.
Salamat sa module federation, mayroon kang sapat na functionality para pangasiwaan ang workflow na micro frontend utos ng diskarte.
Susuriin ng post na ito ang arkitektura ng pederasyon ng module, pati na rin ang mga pangunahing tampok nito at mga pattern ng aplikasyon.
Kaya, ano ang pederasyon ng modyul?
Ang disenyo ng pederasyon ng module ng Javascript ay gumagamit ng mga ginamit na bahagi sa maraming aplikasyon.
Ito ay medyo basic na jargon, ngunit ginawa ko lang na mukhang mahangin.
Dahil pamilyar tayong lahat sa pagbabahagi ng mga bahagi sa loob ng isang React na application, epektibong nagagawa ng Module Federation ang parehong layunin sa pagsasanay, maliban na dynamic nitong inilalantad ang mga module ng application para sa pagkonsumo ng iba pang mga application.
Hinahangad ng Module Federation na malampasan ang problema ng pagbabahagi ng module sa isang distributed system sa pamamagitan ng paghahatid ng mga pangunahing elementong iyon bilang macro o micro ayon sa gusto.
Nagagawa ito sa pamamagitan ng pag-alis sa mga ito sa iyong mga app at sa workflow ng build.
Bakit module federation?
Narito ang ilang salik na madaling mahawakan ng module federation:
- Ang mga External at DLL (Dynamic Link Libraries) lang ang mayroon kami paminsan-minsan para sa pagbabahagi ng functionality sa pagitan ng mga app. Lahat ng ito ay naging napakahirap ng pagbabahagi ng code sa pag-scale.
- Ang NPM ay matamlay.
- Kapag ang dalawang magkahiwalay na programa ay nagbabahagi ng mahalagang code, dapat silang maging dynamic at flexible.
Upang ang mga standalone na app ay ganap na nasa sarili nilang repository, i-deploy nang hiwalay, at gumana bilang sarili nilang independiyenteng SPA, nilikha ang Module Federation.
Mga pangunahing bahagi ng pederasyon ng module
Bago sumisid nang mas malalim, ang maikling pagtalakay ng ilang bagong konsepto na hatid ng module federation ay mahalaga.
- Host: Kapag nag-load ang isang page, ang build o module na nasimulan sa simula ay tinatawag na host. Ang isang provider ay maaaring isipin bilang isang host.
- Remote: Ang remote ay ibang construct na gumagamit ng bahagi ng host. Tinutukoy din sila bilang mga customer.
- Bi-directional host: isang Webpack build na gumagana bilang parehong remote na ginagamit ng ibang mga host at host na kumukonsumo ng mga remote.
- Vendor federation: nagbibigay-daan sa declaratively shared runtime sharing ng npm module dependencies para sa isang host o remote, anuman ang lokasyon kung saan sila na-load. Ang isa sa mga pangunahing problema sa pagganap sa mga micro frontend ay nareresolba sa ganitong paraan.
Mga Pattern ng Federated Application
Evergreen Design System
Ang isa sa mga pinakapangunahing anyo ng federated application ay isang "evergreen remote," na isang nakabahaging remote tulad ng "Design System" o "Component library" na independiyenteng ipinamamahagi at ina-update para sa lahat ng user.
Kung hindi kailangang gumugol ng oras ang bawat team ng app sa mga rebisyon, maaaring makatulong ito sa pagtiyak na ang lahat ng online na site ay sumusunod sa pinakabagong pagkakakilanlan ng kumpanya.
Upang maidisenyo at maisagawa ang mga limitasyon at pamamaraang kinakailangan para magarantiyahan ang secure, patuloy na pag-update, maaaring ito ay isang kapaki-pakinabang na lugar para magsimula ang mga negosyo kapag isinasaalang-alang ang isang federated application architecture.
Ang sumusunod ay ilang mga use-case kung saan ang mga independiyenteng naka-deploy na shared remote ay maaaring angkop na akma:
- Mga sistema ng disenyo
- Mga shell ng aplikasyon
- Mga bahaging aklatan
- Mga consumer
- Mga nakabahaging toolkit
- Mga alternatibong modelo ng pamamahagi para sa mga widget na ginagamit ng panloob o panlabas
Multi-SPA Module Sharing
Muling gumamit ng mga feature na na-export na, gaya ng mga bahagi, sa iba't ibang standalone na single-page na app. Kasama sa mga benepisyo ang:
- Ang mga mamimili ay tumatanggap ng mga awtomatikong pag-update
- Nananatili ang kadalubhasaan sa domain sa team na namamahala dito.
- I-streamline ang pamamaraan ng pag-deploy dahil hindi kinakailangan ang mga hiwalay na paglabas ng module.
Shell driven na federation
Kasama sa shell-driven federation ang:
- Kapag gumagawa ng bagong bersyon ng produkto, hindi naghihintay ang pangkat ng Produkto para makumpleto ng pangkat ng Checkout ang kanilang trabaho.
- Kapag nagpapalit ng mga remote, walang page reload.
- Kung kinakailangan, nag-aalok ang Shell ng mabagal na remote loading at (nangungunang antas) na pagruruta.
- Ang pagruruta sa mga remote ay ginawang posible sa pamamagitan ng vendor federation, na nagbibigay-daan sa muling paggamit ng mga madalas na ginagamit na npm packages.
- Nag-aalok ang Shell ng framework at iba pang mga karaniwang dependency na ginagamit muli ng mga tamad na na-load na remote.
Multi-shell federation
Katulad ng shell-driven na federation na inilarawan sa itaas, ngunit gumamit ng iba't ibang shell.
Naglalaman ito ng:
- isang bilang ng mga shell
- White-labeling
- Hindi lahat ng remote ay kinakailangan ng Shell B o may mga independiyenteng pagpapatupad.
Mga pangunahing tampok ng Module Federation
Napakahusay na pagganap sa web
Ang isyu sa normal na komposisyon ng module ng NPM ay habang tumataas ang bilang ng mga umaasa, karaniwang lumalaki ang laki ng application.
Upang maiwasan ang paglo-load ng mga bundle kapag naglo-load ang iyong aplikasyon at na-load lang ang mga ito kapag kinakailangan, ang Module Federation ay nag-aalok sa iyo ng kakayahang tamad na mag-load ng mga bundle.
Pinipigilan nito ang pangangailangang mag-download ng mga module bago sila aktwal na kinakailangan, na nagpapahusay sa bilis ng site.
Epektibong pag-unlad
Ang bawat proyekto ay maaaring gawin at maihatid nang hiwalay at maaaring isagawa ng iba't ibang mga koponan dahil hinihikayat ka ng Module Federation na ayusin ang iyong aplikasyon sa mga discrete na proyekto upang maaari mong buuin at i-deploy ang mga ito nang hiwalay (at samakatuwid ay kahanay).
Ang kakayahang magpagaling sa sarili at kalabisan
Ang mga nakabahaging dependency ay nagpapahintulot sa Module Federation na subaybayan ang lahat ng mga dependency ng iyong programa sa isang lugar.
Sa ganitong paraan, kahit na ang isang application ay hindi nagdedeklara ng isang dependence o kapag may mga problema sa network, alam pa rin nito kung ano ang kailangan nito at kayang hawakan ang pag-download nito kung kinakailangan.
Epektibong paghawak ng mga karaniwang dependencies
Bukod pa rito, nag-aalok ang Module Federation ng superyor na pamamahala ng dependency, epektibong niresolba ang mga kinakailangan ng vendor at third-party upang hindi kailanman maglo-load ang iyong application ng higit sa isang bersyon ng isang library.
Sa halip na muling i-deploy ang mga consumer, mag-deploy ng independent code.
Ang developer ay lubos na interesado sa pagkakaroon ng evergreen functionality. Kapag nagbago na ang naka-expose na functionality, hindi na kakailanganing muling i-install ang mga consumer.
Dapat kong aminin na ito ay isang napakalakas na tampok sa loob at sa sarili nito, isa na mangangailangan ng maingat na pagsusuri upang maiwasan ang mga hindi inaasahang resulta.
Kapag tumatakbo, mag-import ng code mula sa iba pang mga build.
Kapag ginagamit ang modelo ng package ng NPM, maaari naming isaalang-alang ang mga app na gumagamit ng Module Federation na katulad ng mga API kaysa sa pagbabahagi ng code at pag-iisip ng "library."
Sa parehong paraan na maaari din silang makatanggap ng functionality mula sa iba pang mga app, ang mga web application ay maaari na ngayong magbigay ng functionality sa iba pang mga application.
Pinahusay na karanasan ng developer habang pinapanatili ang karanasan ng kliyente
Anumang developer ng JavaScript ay magiging komportable sa Module Federation dahil ito ay isang Webpack plugin na naa-access sa bersyon 5 ng Webpack.
Ito ay talagang medyo malakas at nakakaintriga kung pag-isipan natin ito.
Sa pamamagitan ng paggamit ng mga third-party na Webpack loader, isaalang-alang ang lahat ng mga bahagi na Webpack mga bundle, kabilang ang mga script, asset, estilo, larawan, markdown, at higit pa.
Sa pamamagitan ng paggamit ng Module Federation, ang lahat ng ito ay maaaring ibahagi at i-federated.
Ang mga micro-frontend ay gumagana sa monolitikong paraan.
Napakadaling magdagdag ng nakabahaging pagpapagana sa iyong application; i-import lang ang bundle bilang normal o gumamit ng synchronous loading.
Bilang kahalili, ang asynchronous na pag-load ay maaaring gamitin upang mag-load lamang ng mga dependency kung kinakailangan sa pamamagitan ng paggamit ng tamad na pag-load.
Konklusyon
Sa post na ito, tinalakay namin ang Module Federation bilang isang kamangha-manghang pagpipilian para sa pagbuo ng iyong micro-frontend na application.
Ang pagpapahintulot sa mga app na makipagpalitan at gumamit ng functionality sa runtime ay humihikayat ng scalability sa pamamagitan ng pagpapagana sa iba't ibang team na magtrabaho sa mga independiyenteng application.
Kapag nagbago ang karaniwang functionality, hindi mo na kakailanganing idisenyo at i-deploy ang iyong mga consumer dahil sinusuportahan nito ang evergreen na functionality.
Ang iyong programa ay gagana tulad ng isang monolith pagkatapos itong mai-set up, na kamangha-mangha.
Ang mga naibabahaging dependency ay ginagamit upang bawasan ang laki ng mga app. Dahil pamilyar na ang maraming developer sa kapaligiran ng Webpack, napakahusay ng karanasan ng developer.
Mag-iwan ng Sagot