Daptar eusi[Sumputkeun][Témbongkeun]
- Janten, naon ari federasi modul?
- Naha modul federasi?
- Modul komponén inti federasi
Fitur inti Féderasi modul+-
- Kinerja wéb anu saé
- Pangwangunan éféktif
- Kamampuhan pikeun nyageurkeun diri sareng redundancy
- Penanganan éféktif tina kagumantungan umum
- Gantina kudu nyebarkeun deui konsumén, nyebarkeun kode bebas.
- Nalika ngajalankeun, impor kode ti wangunan séjén.
- Pangalaman pamekar ditingkatkeun bari ngajaga pangalaman klien
- Micro-frontends beroperasi dina fashion monolithic.
- kacindekan
Konsep micro frontends nerapkeun microservices kana ngembangkeun frontend.
Idena nyaéta pikeun ngarobih aplikasi atanapi halaman wéb janten potongan anu langkung alit, dikembangkeun sacara mandiri anu teras dihubungkeun salami waktosna, sabalikna tina nyiptakeunana salaku monolit tunggal anu kohesif.
Metoda ieu ngamungkinkeun anjeun nyiptakeun komponén aplikasi anu sanés nganggo téknologi sanés sareng sareng tim mandiri.
Gagasanna nyaéta pikeun ngirangan biaya pangropéa anu aya hubunganana sareng monolit khas ku ngabagi pamekaran ku cara ieu.
Ku ngawenangkeun aranjeunna pikeun konsentrasi dina wewengkon nu tangtu hiji aplikasi salaku tim koheren, éta ogé ngajadikeun bentuk anyar gawé babarengan antara backend na frontend devs mungkin.
Salaku conto, anjeun tiasa gaduh tim anu tanggung jawab pikeun kamampuan milarian atanapi aspék séjén tina produk konci anu penting pikeun bisnis.
Hatur nuhun kana federasi modul, anjeun boga cukup fungsionalitas pikeun cecekelan workflow nu mikro frontend mandat pendekatan.
Tulisan ieu bakal ningali jero arsitéktur federasi modul, ogé fitur utama sareng pola aplikasi.
Janten, naon a modul federasi?
Desain federasi modul Javascript ngagunakeun bagian anu tiasa dianggo deui dina seueur aplikasi.
Ieu jargon anu cukup dasar, tapi kuring ngan saukur ngajantenkeun sapertos kitu katingalina angin.
Kusabab urang sadayana wawuh sareng ngabagi komponén dina aplikasi React, Féderasi Modul sacara efektif ngalaksanakeun tujuan anu sami dina praktékna, iwal yén éta sacara dinamis ngungkabkeun modul aplikasi pikeun dikonsumsi ku aplikasi anu sanés.
Féderasi modul nyiar nungkulan masalah babagi modul dina sistem disebarkeun ku delivering maranéhanana elemen dibagikeun konci sakumaha makro atawa mikro sakumaha dipikahoyongna.
Ieu dilaksanakeun ku ngaleungitkeun aranjeunna tina aplikasi anjeun sareng alur kerja ngawangun.
Naha modul federasi?
Ieu sababaraha faktor anu gampang diurus ku federasi modul:
- Externals sareng DLLs (Dynamic Link Libraries) mangrupikeun sadayana anu urang kadang-kadang gaduh pikeun ngabagi fungsionalitas antara aplikasi. Sadayana ngajantenkeun ngabagi kode skala pisan nangtang.
- NPM leuleus.
- Nalika dua program anu misah ngabagi kode anu penting, aranjeunna kedah dinamis sareng fleksibel.
Supados aplikasi mandiri leres-leres aya dina gudang sorangan, disebarkeun nyalira, sareng beroperasi salaku SPA mandiri sorangan, Federasi Modul didamel.
Modul komponén inti federasi
Sateuacan diving deeper, sakeudeung ngabahas sababaraha konsep anyar nu federasi modul brings penting.
- Host: Nalika halaman dimuat, ngawangun atanapi modul anu mimitina disebut host. Panyadia tiasa dianggap salaku host.
- Jauh: Jauh mangrupikeun konstruksi anu béda anu ngagunakeun sabagian host. Éta ogé disebut konsumén.
- Host dua arah: ngawangun Webpack anu fungsina salaku jarak jauh anu dikonsumsi ku host anu sanés sareng host anu nganggo remotes.
- Federasi Vendor: ngamungkinkeun babagi runtime declaratively dibagikeun kabebasan modul npm pikeun host atawa jauh, paduli lokasi ti mana aranjeunna dimuat. Salah sahiji masalah kinerja utama sareng frontends mikro direngsekeun ku cara ieu.
Pola Aplikasi Féderasi
Sistem Desain Evergreen
Salah sahiji bentuk aplikasi federasi anu paling dasar nyaéta "remote evergreen," anu mangrupikeun jarak jauh anu dibagi sapertos "Sistem Desain" atanapi "Perpustakaan Komponén" anu disebarkeun sacara mandiri sareng diropéa pikeun sadaya pangguna.
Tanpa unggal tim aplikasi kedah nyéépkeun waktos pikeun révisi, ieu tiasa ngabantosan pikeun mastikeun yén sadaya situs online taat kana identitas perusahaan anu pang anyarna.
Pikeun ngarancang sareng nempatkeun wates sareng prosedur anu dipikabutuh pikeun ngajamin apdet anu aman sareng terus-terusan, ieu tiasa janten tempat anu mangpaat pikeun usaha ngamimitian nalika nganggap arsitektur aplikasi federasi.
Ieu sababaraha kasus panggunaan dimana jarak jauh anu disebarkeun sacara mandiri tiasa cocog:
- Sistem desain
- Cangkang aplikasi
- Perpustakaan komponén
- pamakéna
- Toolkits dibagikeun
- Modél distribusi alternatif pikeun widget anu dianggo ku internal atanapi éksternal
Multi-SPA Modul Sharing
Anggo deui fitur anu parantos diékspor, sapertos komponén, dina aplikasi halaman tunggal mandiri anu béda. Mangpaat ngawengku:
- Konsumén nampi apdet otomatis
- Kaahlian domain tetep aya dina tim anu tanggung jawab na.
- Streamlines prosedur deployment sabab Kaluaran modul misah teu perlu.
Shell disetir federasi
Féderasi anu didorong ku cangkang kalebet:
- Nalika nyieun versi produk anyar, tim Produk teu ngadagoan tim Checkout pikeun ngalengkepan pakasaban maranéhanana.
- Nalika ngagentos jarak jauh, teu aya halaman ulang halaman.
- Lamun perlu, Shell nawarkeun slow loading jauh jeung (tingkat luhur) routing.
- Routing meuntas remotes dimungkinkeun via federasi vendor, anu ngamungkinkeun pamakéan deui bungkusan npm mindeng dipaké.
- Shell nawiskeun kerangka sareng katergantungan umum sanés anu dianggo deui ku remot anu dimuat.
Féderasi multi-cangkang
Sarupa jeung federasi cangkang-disetir ditétélakeun di luhur, tapi dipaké cangkang béda.
Éta ngandung:
- sajumlah cangkang
- Labeling bodas
- Henteu sadayana jarak jauh diperyogikeun ku Shell B atanapi gaduh palaksanaan mandiri.
Fitur inti Féderasi modul
Kinerja wéb anu saé
Masalah sareng komposisi modul NPM normal nyaéta nalika jumlah tanggungan naék, ukuran aplikasi umumna ningkat.
Dina raraga ngahindarkeun loading bundles nalika aplikasi Anjeun beban sarta ngan ngamuat aranjeunna nalika perlu, Module Federation nawarkeun maneh kamampuhan pikeun puguh beban bundles.
Ieu nyegah kabutuhan pikeun ngundeur modul saméméh maranéhna sabenerna diperlukeun, nu ngaronjatkeun kagancangan situs.
Pangwangunan éféktif
Masing-masing proyék tiasa diproduksi sareng dikirimkeun nyalira sareng tiasa dilaksanakeun ku sababaraha tim sabab Féderasi Modul nyorong anjeun pikeun ngatur aplikasi anjeun kana proyék-proyék diskrit ku kituna anjeun tiasa ngawangun sareng nyebarkeunana sacara misah (sareng ku kituna paralel).
Kamampuhan pikeun nyageurkeun diri sareng redundancy
Katergantungan anu dibagi ngamungkinkeun Federasi Modul pikeun ngalacak sadaya katergantungan program anjeun dina hiji tempat.
Ku cara ieu, sanajan hiji aplikasi teu ngadéklarasikeun gumantungna atawa lamun aya masalah jaringan, éta masih terang naon nu peryogi tur tiasa ngadamel download sakumaha diperlukeun.
Penanganan éféktif tina kagumantungan umum
Salaku tambahan, Féderasi Modul nawiskeun manajemén kagumantungan anu langkung saé, sacara efektif ngarengsekeun syarat vendor sareng pihak katilu supados aplikasi anjeun moal kantos ngamuat langkung ti hiji versi perpustakaan.
Gantina kudu nyebarkeun deui konsumén, nyebarkeun kode bebas.
Pamekar pisan kabetot dina gaduh fungsionalitas evergreen. Sakali fungsionalitas gumantung kakeunaan parantos robih, éta moal kedah pasang deui konsumen deui.
Kuring kedah ngaku yén ieu mangrupikeun fitur anu pohara kuat sareng nyalira, anu peryogi pamariksaan ati-ati pikeun nyegah hasil anu teu kaduga.
Nalika ngajalankeun, impor kode ti wangunan séjén.
Nalika ngadopsi modél pakét NPM, urang tiasa nganggap aplikasi anu nganggo Féderasi Modul sami sareng API tinimbang ngabagi kode sareng mikiran "perpustakaan."
Dina cara anu sami yén aranjeunna ogé tiasa nampi fungsionalitas tina aplikasi anu sanés, aplikasi wéb ayeuna tiasa nyayogikeun fungsionalitas ka aplikasi anu sanés.
Pangalaman pamekar ditingkatkeun bari ngajaga pangalaman klien
Sakur pamekar JavaScript bakal rada nyaman jeung Module Federation sabab mangrupakeun plugin Webpack nu bisa diasupan sakumaha Webpack Vérsi 5.
Ieu sabenerna rada kuat tur intriguing lamun urang mere eta sababaraha pamikiran.
Ku ngagunakeun pamuat Webpack pihak katilu, pertimbangkeun sadaya komponén éta Webpack bundles, kaasup naskah, aset, gaya, gambar, markdowns, sareng nu sanesna.
Ku ngagunakeun Module Federation, sakabéh ieu bisa dibagikeun jeung federated.
Micro-frontends beroperasi dina fashion monolithic.
Ieu rada gampang pikeun nambahkeun fungsionalitas dibagikeun ka aplikasi Anjeun; ngan impor kebat sakumaha biasa atawa make loading sinkron.
Alternatipna, ngamuat asinkron tiasa dianggo ngan ukur ngamuat katergantungan upami diperyogikeun ku cara ngagentos ngamuat kedul.
kacindekan
Dina postingan ieu, kami parantos ngabahas Modul Federation salaku pilihan anu saé pikeun ngembangkeun aplikasi micro-frontend anjeun.
Ngidinan aplikasi tukeur sareng nganggo fungsionalitas nalika runtime nyorong skalabilitas ku ngamungkinkeun sababaraha tim pikeun ngerjakeun aplikasi mandiri.
Nalika pungsi umumna robih, anjeun henteu kedah ngarancang sareng nyebarkeun konsumén anjeun sabab éta ngadukung fungsionalitas evergreen.
program anjeun bakal boga fungsi kawas monolith a sanggeus eta geus nyetél, nu hebat pisan.
Dependensi anu tiasa dibagi dianggo pikeun ngirangan ukuran aplikasi. Kusabab seueur pamekar anu parantos akrab sareng lingkungan Webpack, pangalaman pamekar anu saé.
Leave a Reply