Daftar Isi[Bersembunyi][Menunjukkan]
- Jadi, apa itu federasi modul?
- Mengapa federasi modul?
- Komponen inti federasi modul
Fitur inti Federasi Modul+-
- Performa web luar biasa
- Pengembangan yang efektif
- Kemampuan untuk menyembuhkan diri sendiri dan redundansi
- Penanganan dependensi umum yang efektif
- Alih-alih harus menggunakan kembali konsumen, gunakan kode independen.
- Saat menjalankan, impor kode dari build lain.
- Pengalaman pengembang yang ditingkatkan sambil mempertahankan pengalaman klien
- Micro-frontends beroperasi secara monolitik.
- Kesimpulan
Konsep frontend mikro menerapkan layanan mikro untuk pengembangan frontend.
Idenya adalah untuk memecah aplikasi atau situs web menjadi bagian-bagian yang lebih kecil dan dikembangkan secara independen yang kemudian dihubungkan selama runtime, sebagai lawan membuatnya sebagai monolit tunggal yang kohesif.
Metode ini memungkinkan Anda membuat komponen lain dari aplikasi menggunakan teknologi lain dan dengan tim independen.
Idenya adalah untuk mengurangi biaya pemeliharaan yang terkait dengan monolit tipikal dengan mengelompokkan pengembangan dengan cara ini.
Dengan memungkinkan mereka untuk berkonsentrasi pada area aplikasi tertentu sebagai tim yang koheren, ini juga memungkinkan bentuk kerjasama baru antara pengembang backend dan frontend.
Misalnya, Anda mungkin memiliki tim yang bertanggung jawab penuh atas kemampuan pencarian atau aspek lain dari produk utama yang penting bagi bisnis.
Berkat federasi modul, Anda memiliki fungsionalitas yang cukup untuk menangani alur kerja yang tampilan mikro mendekati mandat.
Posting ini akan membahas secara mendalam arsitektur federasi modul, serta fitur utama dan pola aplikasinya.
Jadi, apa itu file federasi modul?
Desain federasi modul Javascript memanfaatkan bagian yang digunakan kembali di banyak aplikasi.
Ini jargon yang cukup mendasar, tapi saya baru saja membuatnya tampak seperti itu agar tampak semilir.
Seperti yang kita semua kenal dengan berbagi komponen dalam aplikasi React, Federasi Modul secara efektif mencapai tujuan yang sama dalam praktiknya, dengan pengecualian bahwa ia secara dinamis mengekspos modul aplikasi untuk dikonsumsi oleh aplikasi lain.
Federasi Modul berupaya mengatasi masalah pembagian modul dalam sistem terdistribusi dengan mengirimkan elemen-elemen kunci bersama tersebut sebagai makro atau mikro seperti yang diinginkan.
Ini dilakukan dengan menghapusnya dari aplikasi Anda dan alur kerja build.
Mengapa federasi modul?
Berikut adalah beberapa faktor yang dapat ditangani federasi modul dengan mudah:
- Eksternal dan DLL (Perpustakaan Tautan Dinamis) adalah semua yang terkadang kami miliki untuk berbagi fungsionalitas antar aplikasi. Semuanya membuat berbagi kode penskalaan menjadi sangat menantang.
- NPM lamban.
- Ketika dua program terpisah berbagi kode penting, mereka harus dinamis dan fleksibel.
Agar aplikasi mandiri benar-benar berada di repositori mereka sendiri, disebarkan secara terpisah, dan beroperasi sebagai SPA independen mereka sendiri, Federasi Modul telah dibuat.
Komponen inti federasi modul
Sebelum menyelam lebih dalam, penting untuk membahas secara singkat beberapa konsep baru yang dibawa federasi modul.
- Host: Saat halaman dimuat, build atau modul yang diinisialisasi awalnya disebut host. Penyedia dapat dianggap sebagai tuan rumah.
- Remote: Remote adalah konstruksi berbeda yang menggunakan sebagian dari host. Mereka juga disebut sebagai pelanggan.
- Host dua arah: build Webpack yang berfungsi sebagai remote yang digunakan oleh host lain dan host yang menggunakan remote.
- Federasi vendor: memungkinkan pembagian runtime yang dibagikan secara deklaratif dari dependensi modul npm untuk host atau jarak jauh, terlepas dari lokasi dari mana mereka dimuat. Salah satu masalah kinerja utama dengan frontend mikro diselesaikan dengan cara ini.
Pola Aplikasi Federasi
Sistem Desain Evergreen
Salah satu bentuk paling dasar dari aplikasi gabungan adalah "remote hijau", yang merupakan remote bersama seperti "Sistem Desain" atau "Perpustakaan komponen" yang didistribusikan dan diperbarui secara independen untuk semua pengguna.
Tanpa setiap tim aplikasi perlu menghabiskan waktu untuk revisi, ini mungkin membantu dalam memastikan bahwa semua situs online mematuhi identitas perusahaan terbaru.
Untuk merancang dan menerapkan batasan dan prosedur yang diperlukan untuk menjamin keamanan, pembaruan berkelanjutan, ini mungkin tempat yang berguna bagi bisnis untuk memulai ketika mempertimbangkan arsitektur aplikasi gabungan.
Berikut adalah beberapa kasus penggunaan di mana remote bersama yang disebarkan secara independen mungkin cocok:
- Sistem desain
- Cangkang aplikasi
- Pustaka komponen
- Konsumen
- Toolkit bersama
- Model distribusi alternatif untuk widget yang digunakan oleh internal atau eksternal
Berbagi Modul Multi-SPA
Gunakan kembali fitur yang sudah diekspor, seperti komponen, di aplikasi satu halaman mandiri yang berbeda. Manfaat meliputi:
- Konsumen menerima pembaruan otomatis
- Keahlian domain tetap berada di tim yang bertanggung jawab.
- Menyederhanakan prosedur penerapan karena rilis modul terpisah tidak diperlukan.
Federasi yang digerakkan oleh cangkang
Federasi yang digerakkan oleh cangkang meliputi:
- Saat membuat versi produk baru, tim Produk tidak menunggu tim Checkout menyelesaikan pekerjaan mereka.
- Saat mengganti remote, tidak ada halaman yang dimuat ulang.
- Bila perlu, Shell menawarkan pemuatan jarak jauh yang lambat dan perutean (tingkat atas).
- Perutean melintasi jarak jauh dimungkinkan melalui federasi vendor, yang memungkinkan penggunaan kembali paket npm yang sering digunakan.
- Shell menawarkan kerangka kerja dan dependensi umum lainnya yang digunakan kembali oleh remote yang dimuat lambat.
Federasi multi-kulit
Mirip dengan federasi yang digerakkan oleh cangkang yang dijelaskan di atas, tetapi menggunakan cangkang yang berbeda.
Itu mengandung:
- sejumlah cangkang
- Pelabelan putih
- Tidak semua remote diperlukan oleh Shell B atau memiliki implementasi independen.
Fitur inti Federasi Modul
Performa web luar biasa
Masalah dengan komposisi modul NPM normal adalah bahwa ketika jumlah tanggungan meningkat, ukuran aplikasi umumnya bertambah.
Untuk menghindari memuat bundel saat aplikasi Anda dimuat dan hanya memuatnya saat diperlukan, Federasi Modul menawarkan Anda kemampuan untuk memuat bundel dengan malas.
Ini mencegah kebutuhan untuk mengunduh modul sebelum benar-benar diperlukan, yang meningkatkan kecepatan situs.
Pengembangan yang efektif
Setiap proyek dapat diproduksi dan dikirimkan secara terpisah dan dapat dilakukan oleh berbagai tim karena Federasi Modul mendorong Anda untuk mengatur aplikasi Anda ke dalam proyek-proyek terpisah sehingga Anda dapat membangun dan menyebarkannya secara terpisah (dan karenanya secara paralel).
Kemampuan untuk menyembuhkan diri sendiri dan redundansi
Dependensi bersama memungkinkan Federasi Modul untuk melacak semua dependensi program Anda di satu tempat.
Dengan cara ini, bahkan ketika sebuah aplikasi tidak menyatakan ketergantungan atau ketika ada masalah jaringan, itu masih tahu apa yang dibutuhkannya dan dapat menangani pengunduhannya sesuai kebutuhan.
Penanganan dependensi umum yang efektif
Selain itu, Federasi Modul menawarkan manajemen ketergantungan yang unggul, secara efektif menyelesaikan persyaratan vendor dan pihak ketiga sehingga aplikasi Anda tidak akan pernah memuat lebih dari satu versi pustaka.
Alih-alih harus menggunakan kembali konsumen, gunakan kode independen.
Pengembang sangat tertarik untuk memiliki fungsionalitas yang selalu hijau. Setelah fungsionalitas dependen yang terpapar telah berubah, tidak perlu menginstal ulang konsumen lagi.
Saya harus mengakui bahwa ini adalah fitur yang sangat kuat dalam dirinya sendiri, yang memerlukan pemeriksaan cermat untuk mencegah hasil yang tidak terduga.
Saat menjalankan, impor kode dari build lain.
Saat mengadopsi model paket NPM, kami mungkin mempertimbangkan aplikasi yang menggunakan Federasi Modul yang mirip dengan API daripada berbagi kode dan memikirkan "perpustakaan."
Dengan cara yang sama seperti mereka juga dapat menerima fungsionalitas dari aplikasi lain, aplikasi web sekarang dapat menyediakan fungsionalitas untuk aplikasi lain.
Pengalaman pengembang yang ditingkatkan sambil mempertahankan pengalaman klien
Apa saja Pengembang JavaScript akan cukup nyaman dengan Federasi Modul karena ini adalah plugin Webpack yang dapat diakses pada Webpack versi 5.
Ini sebenarnya agak kuat dan menarik jika kita memikirkannya.
Dengan memanfaatkan pemuat Webpack pihak ketiga, pertimbangkan semua komponen yang Paket web bundel, termasuk skrip, aset, gaya, gambar, penurunan harga, dan lainnya.
Dengan menggunakan Federasi Modul, semua ini dapat dibagi dan digabungkan.
Micro-frontends beroperasi secara monolitik.
Menambahkan fungsionalitas bersama ke aplikasi Anda cukup mudah; cukup impor bundel seperti biasa atau gunakan pemuatan sinkron.
Atau, pemuatan asinkron dapat digunakan hanya untuk memuat dependensi bila diperlukan dengan memanfaatkan pemuatan lambat.
Kesimpulan
Dalam posting ini, kami telah membahas Federasi Modul sebagai pilihan fantastis untuk mengembangkan aplikasi mikro-frontend Anda.
Membiarkan aplikasi bertukar dan menggunakan fungsionalitas saat runtime mendorong skalabilitas dengan memungkinkan berbagai tim untuk bekerja pada aplikasi independen.
Ketika fungsi umum berubah, Anda tidak perlu mendesain dan menerapkan konsumen Anda karena mendukung fungsionalitas evergreen.
Program Anda akan berfungsi seperti monolit setelah diatur, yang luar biasa.
Dependensi yang dapat dibagikan digunakan untuk mengurangi ukuran aplikasi. Karena banyak pengembang sudah terbiasa dengan lingkungan Webpack, pengalaman pengembang sangat baik.
Tinggalkan Balasan