Bab lan Paragraf[Singidaken][Tampilake]
Ing idea saka microservices wis gained akèh manungsa waé bubar, lan akeh perusahaan nggunakake kanggo mbusak backends gedhe, monolithic.
Mlaku rute sing padha karo frontend isih dadi tantangan kanggo akeh bisnis, sanajan cara sing disebarake kanggo mbangun sisih server aplikasi web luwih dipercaya babagan riset lan eksekusi.
Amarga ketergantungan sing cedhak, monolit sisih klien biasane nggawe angel nggabungake fitur-fitur anyar, nggunakake teknologi anyar, lan ukuran komponen individu.
Tantangan iki lan liyane nyebabake pangembang frontend nyelidiki nggunakake layanan mikro.
Akibaté, strategi arsitektur anyar sing dikenal minangka micro frontend dikembangake kanggo nggawe lapisan ngarep situs web lan aplikasi basis web.
Istilah iki pisanan digunakake ing 2016, lan wiwit iku, wis entuk akeh perhatian kanggo tujuan sing apik.
Artikel iki bakal menehi pangerten umum babagan apa micro frontend lan masalah sing ditangani. iku digunakake, uga Pros lan cons.
Pambuka kanggo arsitektur micro front-end
Cara kontemporer pangembangan front-end sing disebut arsitektur micro-frontend dibagi a aplikasi web dadi cilik, bagean independen.
Kanggo pangguna pungkasan, bagean kasebut katon minangka siji unit sanajan dibangun kanthi mandiri lan banjur digabungake.
Kanthi prabédan manawa frontend mikro ana ing sisih klien, dudu sisih server, solusi online, alasan sing ndasari padha karo layanan mikro.
Nggawe produk basis web sing canggih ndadekake pangertèn sing paling apik nalika nggunakake pendekatan micro frontend.
Frontends mikro, minangka lawan saka monolit ngarep-mburi liyane conventional, mbisakake akeh tim kanggo kolaborasi dhewe ing macem-macem proyèk piranti lunak.
Programer bisa nggawe aplikasi web luwih cepet lan kanthi skalabilitas lan maintainability luwih gedhe nggunakake desain arsitektur iki.
Kanthi gampang, saben frontend mikro mung minangka potongan kode kanggo komponen sing beda ing kaca web.
Fitur kasebut dikontrol dening tim sing kapisah, sing saben duwe spesialisasi ing industri utawa tujuan tartamtu.
Monolithic vs Microservices vs Micro frontend arsitektur
Mikir kanggo pindhah. Apa bakal luwih gampang kanggo sampeyan ngatur kabeh dadi sawetara kothak cilik sing dilabeli kanthi ahli lan mindhah saben siji-sijine utawa ngemas kabeh staf dadi siji kothak gedhe lan ngeterake menyang lokasi anyar?
Solusi sing jelas ana.
Analogi iki mbandhingake rong arsitektur aplikasi web sing béda, monoliths lan microservices (uga dikenal minangka micro frontends).
Arsitektur monolitik
Sampeyan bisa uga bisa ngelingi "dina-dina sing apik" nalika aplikasi lengkap digawe minangka entitas tunggal sing kohesif. Cara kasebut diarani monolit, yaiku istilah lawas kanggo blok watu gedhe.
Iki nggawe pangertèn.
Sistem monolitik nduweni unsur sing saling gumantung. Mulane, yen sampeyan pengin ngowahi utawa nambah fitur anyar, bisa uga kabeh sistem bisa rusak.
Sanajan wis lungse, sok-sok isih ana. Ya, kita ngerti ekspresi sampeyan saiki.
Pembagian konsep basis kode dadi rong komponen sing beda - frontend (sisih klien) lan backend (sisih server) - dadi ora bisa dihindari amarga teknologi anyar sing dikembangake lan produk piranti lunak dadi luwih rumit.
Cara operasi sing paling populer saiki yaiku pamisahan keprihatinan ing antarane lapisan presentasi sing sesambungan karo pangguna pungkasan lan kabeh sing kedadeyan ing latar mburi.
Perlu rong tim teknik piranti lunak, kanthi tim ngarep mbangun komponen visual lan tim mburi mbangun layanan web, logika bisnis, akses data, integrasi, lsp.
Nanging, senadyan pamisahan iki, strategi iki isih tetep monolitik dening alam.
Owah-owahan utama yaiku saiki kita duwe rong blok kode sing cukup gedhe - frontend lan backend - tinimbang siji aplikasi sing gedhe banget. Arsitektur monolitik ora kudu elek; padha duwe sawetara keuntungan, kalebu
- Pangembangan sing prasaja lan cepet kanggo aplikasi cilik kanthi basis kode sumber siji lan desain sing gampang banget;
- Tes lan debugging gampang banget amarga kabeh kode ana ing sak panggonan, dadi luwih gampang kanggo tim kanggo nglacak aliran panjalukan lan ngenali kewan omo;
- Ing wiwitan pangembangan aplikasi, biaya luwih murah amarga ora ana biaya infrastruktur utawa biaya pangembangan nganti fitur anyar ditambahake.
Kelemahane strategi iki dibayangke ing
- Keluwesan panyebaran sing diwatesi - tim kudu ngenteni yen mung sawetara sing nggarap proyek kasebut lan panyebaran anyar dibutuhake saben sampeyan nganyari kode;
- Ngadopsi teknologi anyar pancen angel amarga nindakake iki mbutuhake nulis maneh bagean sing penting, yen ora kabeh proyek.
- Nalika jumlah pangembang mundhak, sistem kode dadi raket, rumit, lan angel diatur lan dimengerteni.
- Masalah organisasi - saben anggota tim kudu nggunakake versi perpustakaan sing padha lan nglaporake owah-owahan yen akeh tim sing nggarap proyek monolitik.
- Keprigelan karo skalabilitas - amarga komponen proyek saling gegandhengan, skala kanthi kapisah nyebabake kesulitan sing nyebabake downtime sing signifikan lan biaya sing luwih dhuwur.
- Logika kompleks proyek kasebut bisa uga angel dimangerteni dening anggota tim anyar, utamane yen insinyur sing asline nggarap proyek kasebut ora kerja maneh.
Pangembangan layanan mikro lan sederek sing cedhak, lan frontend mikro, ngatasi masalah utama karo sistem monolitik.
Arsitektur microservices
Cara arsitektur sing dikenal minangka microservices ngidini nggawe akeh komponen cilik, utawa layanan sing bisa disambung kanthi bebas lan bisa disebarake kanthi mandiri, sing nggawe backend aplikasi.
Saben layanan duwe basis kode dhewe, pipa CI/CD, prosedur DevOps, lan proses kanggo nglakokake.
Sampeyan bisa ndeleng manawa tim backend monolitik dipérang dadi tim sing kapisah kanthi ndeleng gambar ing ndhuwur.
Saben fokus individu ing aspek aplikasi sing beda (kayata layanan produk, layanan telusuran, lan layanan pembayaran).
Komunikasi ing antarane layanan kasebut dumadi liwat protokol sing diadegake sing dikenal minangka API, kayata protokol REST API entheng sing nggunakake pola panjalukan-balesan sinkron.
Pilihan liyane yaiku nggunakake komunikasi asinkron nggunakake piranti lunak kaya Kafka, sing nawakake struktur lan acara komunikasi nerbitake / langganan.
Microservices nggabungake karo frontend liwat backend kanggo layanan frontend (BFF) utawa API Gateway liwat jaringan. BFF nawakake API khusus kanggo saben klien, dene API Gateways menehi akses siji titik kanggo koleksi layanan mikro.
Nanging malah karo komponen backend otonom lan kabeh kaluwihan padha nyedhiyani, frontend isih monolith a.
Mulane, ing kene frontend mikro migunani.
Arsitektur mikro frontends
Kaya karo layanan mikro, ing ngendi komponen sing ana hubungane diatur dening sawetara tim, arsitektur frontend mikro ngetrapake konsep kasebut menyang browser.
Antarmuka pangguna aplikasi web iki ngetutake struktur iki, sing kalebu komponen sing rada otonom.
Tim uga digawe kanggo kabutuhan klien utawa kasus panggunaan tinimbang keahlian utawa teknologi tartamtu.
Akibate, tim melu ing layanan mikro lan proyek micro frontend.
- irisan vertikal - amarga ana pangembang frontend, ahli data, insinyur backend, insinyur QA, lan liya-liyane sing nggarap proyek sing padha, dheweke nggawe fitur saka antarmuka panganggo kanggo database; lan
- salib-fungsi - saben anggota tim nyumbang expertise kanggo grup.
Tim uga bisa milih tumpukan teknologi sing paling cocog karo bisnis tartamtu.
Siji tim bisa nggunakake React kanggo program fragmen. Tim liyane nggawe versi Angular anyar. Vue.js minangka salah sawijining conto.
Frontend mikro digunakake bebarengan karo layanan mikro sing gegandhengan kanggo ngatasi masalah sing biasane ana ing tim pangembangan monolit. Strategi kasebut menehi kaluwihan ing ngisor iki.
- Kebebasan teknologi: Insinyur frontend bisa milih kerangka JavaScript alternatif, lingkungan runtime, lan tumpukan teknologi kabeh gumantung saka kabutuhan perusahaan. Ing ndhuwur arsitektur sing wis lawas, kerangka kerja sing anyar bisa uga ditrapake.
- Tingkat keluwesan sing luwih gedhe bisa ditindakake amarga saben frontend mikro mandhiri lan bisa dikembangake, diuji, disebarake, lan ditingkatake kanthi kapisah. Akibaté, yen salah siji tim nggarap fitur lan wis di-push fix bug, lan tim liyane kudu nambah fitur dhewe, padha ora perlu ngenteni kanggo tim pisanan ngrampungake tugas.
- Tim lan sistem otonom: Saben tim produk, lan mulane saben fitur, bisa digunakake kanthi ora gumantung marang wong liya, sing ngidini bisa terus digunakake sanajan komponen sing cedhak ora kasedhiya.
- Multiple, codebases cilik: Saben frontends mikro bakal duwe dhewe, luwih bisa diatur, codebase cilik. Kurang wong bakal fokus ing komponen UI tartamtu, nyederhanakake review kode, lan nambah organisasi sakabèhé.
- Skala aplikasi sing prasaja: Manfaat liyane saka frontend mikro yaiku kemampuan kanggo skala saben fitur kanthi individu. Minangka gantos kanggo monoliths, ngendi kabeh program kudu scaled saben wektu fitur anyar ditambahake, iki ndadekake kabeh proses luwih efisien ing syarat-syarat loro wektu lan dhuwit.
Kepiye cara kerja micro frontend?
Kaya sing wis dakkandhakake sadurunge, tim diatur kanthi vertikal ing arsitektur mikro frontend, sing tegese dipisahake dening kawruh utawa tujuan domain lan tanggung jawab wiwit wiwitan nganti rampung kanggo produk tartamtu.
Bisa duwe siji utawa loro microservices backend uga frontend cilik. Kanthi luwih rinci, ayo mriksa karakteristik unsur visual iki, interaksi karo komponen UI liyane, lan gabung ing homepage.
A frontend mikro bisa
- kaca wutuh (contone, kaca rincian produk) utawa
- bagean kaca sing bisa digunakake dening tim liyane, kayata header, footer, lan bar telusuran.
Sampeyan bisa mbagi situs web gedhe dadi pirang-pirang jinis kaca lan menehi saben jinis menyang staf tartamtu kanggo digarap.
Nanging, sawetara komponen kerep kedadeyan ing pirang-pirang kaca, kayata header, footer, blok saran, lan sapiturute. Blok saran, contone, bisa dilebokake ing homepage, kaca detail produk, utawa malah kaca checkout.
Intine, tim bisa nggawe potongan sing bisa digunakake tim liyane ing kaca.
Frontend mikro, Nanging, bisa disebarake kanthi kapisah minangka proyek sing beda-beda tinimbang komponen sing bisa digunakake maneh.
Kabeh iki muni Fantastic, nanging kanggo nggawe antarmuka terpadu, kaca lan pecahan kudu piye wae digabungake.
Iki mbutuhake integrasi frontend, sing bisa ditindakake liwat macem-macem strategi, kalebu rute, komposisi, lan komunikasi (ndeleng grafik ing ndhuwur).
nuntun
Nalika layanan saka kaca sing dikontrol dening siji tim dibutuhake kanggo ngakses kaca sing diduweni dening tim liyane, nuntun migunani kanggo integrasi tingkat kaca.
Saben frontend mikro ditangani minangka aplikasi siji-kaca. Tautan HTML prasaja bisa digunakake kanggo menehi rute.
Pangguna bisa meksa browser kanggo ngundhuh markup target saka server lan ngganti kaca saiki karo kaca anyar kanthi ngeklik hyperlink.
Cangkang app minangka minimal HTML, CSS, lan JavaScript sing nguwasani UI. Sanajan data isi sing dijaluk saka server isih ngenteni, pangguna bakal langsung nampa kaca sing ditampilake statis. Cangkang app tengah dadi aplikasi induk kanggo aplikasi siji-halaman sing digawe dening macem-macem tim.
Ora preduli perpustakaan utawa kerangka kerja sing digunakake, meta-framework mbisakake gabungan saka macem-macem kaca dadi siji.
komposisi
Komposisi minangka proses ngatur potongan supaya pas karo spasi sing cocog ing sawijining kaca. Umume kasus, tim sing nyebarake kaca kasebut ora langsung njupuk isi fragmen kasebut.
Nanging, iki nempatake placeholder utawa panandha ing ngendi fragmen kasebut kudu ana ing markup.
Nggunakake proses nulis sing beda, rakitan pungkasan wis rampung. Komposisi bisa dipérang dadi rong kategori dhasar: sisih klien lan sisih server.
Komposisi sisih klien: Browser web digunakake kanggo nggawe lan nyunting markup HTML. Saben frontend mikro nduweni kemampuan kanggo ngganti lan nuduhake markup kanthi kapisah saka kaca liyane.
Komponen Web, umpamane, ngidini sampeyan nindakake jinis konstruksi iki.
Rencanane yaiku kanggo ngowahi saben fragmen dadi komponen web sing bisa diinstal kanthi mandiri minangka file a.js, sawise aplikasi kasebut bisa mbukak lan nerjemahake ing spasi sing wis ditemtokake ing tata letak tema.
Komponen web gumantung ing HTML lan DOM API, sing bisa digunakake kerangka frontend liyane, uga minangka cara standar kanggo ngirim lan nampa data liwat peraga lan acara.
Komposisi sisih server: Kanthi rancangan iki, bêsik UI digabungake ing server, kang asil ing kaca rampung kawangun dikirim menyang klien-sisih, nyepetake loading.
Majelis asring ditindakake dening layanan kapisah sing ana ing antarane browser web lan server web. CDN minangka salah sawijining conto layanan (jaringan pangiriman konten).
Sampeyan bisa milih siji utawa kombinasi saka loro, gumantung saka kabutuhan.
Pola komunikasi mikro frontend
Arsitektur mikro-frontend paling apik yen ora ana interaksi antarane macem-macem komponen. Micro frontends sok-sok kudu ngomong karo siji liyane lan nuduhake informasi. Ing ngisor iki sawetara pola potensial sing bisa nyebabake.
- Pekerja web: Buruh online minangka mekanisme sing ngidini konten web mbukak JavaScript ing latar mburi, kanthi bebas saka skrip liyane, lan tanpa mengaruhi kacepetan kaca. API pekerja unik bakal diwenehake kanggo saben aplikasi mikro. Keuntungan iki yaiku karya sing mbutuhake wektu bisa ditindakake ing utas sing beda, supaya thread UI bisa diterusake tanpa kalem utawa mandheg.
- Emitter acara: Ing kasus iki, akeh komponen komunikasi karo siji liyane dening ngrungokake lan tumindak ing sembarang owah-owahan negara ing komponen sing padha langganan. Frontend mikro liyane sing wis langganan acara tartamtu nanggapi nalika frontend mikro murub acara kasebut. Pemancar acara sing wis dikenalake ing saben mikro-frontend ndadekake iki bisa ditindakake.
- Callbacks lan peraga: Ing bagean iki, sampeyan nemtokake komponen induk lan komponen anak. Komunikasi kasebut diatur dadi struktur kaya wit. Komponen induk nggunakake peraga kanggo ngirim data minangka fungsi mudhun wit komponen menyang komponen anak. Sabanjure, bocah kasebut bisa menehi tandha kanthi efisien marang wong tuwa nalika ana apa-apa ing negarane kanthi nanggapi panggilan balik. React nggunakake mode iki.
Pros saka Micro frontend
Pangembangan ing Tim Otonomi Rapid
Tim independen bisa nggawe saben bagean saka aplikasi web utawa situs web nalika nggunakake metode micro frontend.
Saben tim rampung otonom, tegese tanggung jawab kanggo kabeh siklus pangembangan komponen, saka konsepsi nganti rilis lan pasca produksi.
Kajaba iku, iki nuduhake manawa macem-macem tim bisa kolaborasi kanthi lancar nalika nggarap proyek sing padha.
Mulane, siklus rilis luwih cepet tinimbang karo monolit ngarep.
Basis Kode sing luwih cilik saka Frontend Mikro Individu Ngarahake Kode sing Luwih resik
Ujung ngarep monolitik duwe basis kode sing gedhe lan ora bisa digunakake sing dadi saya semrawut lan angel dikelola kanthi suwe.
Frontend mikro ngatasi masalah iki. Saben kode sumber micro frontend luwih gampang diatur amarga luwih cilik, prasaja, lan luwih kompak.
Solusi web sakabèhé entuk manfaat saka kode sing luwih resik minangka akibat.
Stabilitas app sing luwih apik Amarga Kopling Loose
Solusi web jarang bisa dipérang dadi potongan sing mandiri. Akibate, frontend mikro bisa ngomong siji liyane.
Nanging, saben pranala ing antarane komponen penting sanajan konektivitas longgar.
Gagal siji komponen ora ana pengaruhe ing operasi kabeh komponen liyane, sing nyedhiyakake stabilitas solusi web sing luwih apik.
Nguji Fitur Individu Digawe Luwih Gampang
Keuntungan iki minangka asil saka karakteristik frontend mikro. Adhedhasar desain arsitektur iki, sisih klien solusi web iku modular lan saben modul otonom.
Akibaté, ngevaluasi bagean cilik saka antarmuka panganggo dhewe luwih gampang kanggo tim kanggo nindakake saka nyoba monolith massive.
Ukuran Bundle Suda Nimbulake Muatan Halaman Luwih Cepet
Salah sawijining panyebab utama wektu mbukak telat ing sistem web monolitik sing sugih fitur yaiku ukuran bundel JavaScript. Ing sisih liya, pendekatan micro frontend nggampangake nyuda wektu mbukak kaca.
Browser ora kudu ndownload kode sing ora dibutuhake bola-bali amarga kaca web digawe saka pirang-pirang bundel cilik. Akibaté, kinerja kaca lan wektu mbukak tambah.
Kamardikan Teknologi
Multiple kerangka ngarep bisa digunakake dening pangembang kanggo nggawe solusi online siji karo arsitektur micro-frontend.
Amarga saben komponen otonom, bisa dibangun nggunakake teknologi sing paling cocog karo tugas tim.
Mesthine, programer kudu ati-ati nalika milih kerangka kanggo proyek piranti lunak sing dadi tanggung jawabe, lan konsultasi karo tim liyane isih disaranake.
Nanging, ora ana kemungkinan sampeyan bakal dipeksa nggunakake kerangka warisan sajrone umur aplikasi.
Cons saka Micro Frontend
Pengujian solusi Web Komplek kanthi sakabehe
Nguji macem-macem modul solusi web gampang nalika nggunakake arsitektur micro-frontend. Nanging beda karo ngevaluasi aplikasi web kanthi sakabehe.
Priksa manawa kabeh bagean bisa digunakake kaya sing dikarepake sadurunge nerusake. Iki bisa uga angel amarga frontend mikro beroperasi kanthi mandiri lan duwe proses pangiriman sing kapisah.
Investasi Awal sing larang
Pangembangan frontend mikro biasane mbutuhake biaya finansial sing akeh. Regane larang kanggo ngumpul lan njaga akeh tim ngarep.
Kajaba iku, sampeyan butuh personel manajemen kanggo ngatur proyek, priksa manawa kabeh wis dikoordinasi, lan njamin komunikasi tim sing apik.
Kompleksitas Pembangunan lan Penyebaran
Prosedur pangembangan lan panyebaran bisa dadi luwih rumit amarga desain micro-frontend.
Solusi bisa uga akeh banget komponen dening tim pangembangan independen sing nggarap proyek sing padha, umpamane, sing bisa nyebabake masalah ing tahap penyebaran.
Déwan tengen kabeh modul lan integrasi Gamelan menyang skema sakabèhé uga ora tansah prasaja; karya iki biasane mbutuhake pangerten pepek kabeh dependensi.
Masalah Njaga Koherensi ing Pengalaman Panganggo
Njaga antarmuka pangguna sing konsisten dadi tantangan nalika tim kerja kanthi kapisah ing sawetara bagean piranti lunak.
Solusi web kudu dienggo bareng karo kabeh pangembang proyek. Yen ora, bisa uga ana akeh kontradiksi ing dalan.
kesimpulan
Frontend mikro, desain arsitektur kontemporer, bisa ningkatake kinerja proyek pangembangan web berbasis layanan mikro skala gedhe.
Iku mbisakake programer kanggo dibagi solusi lengkap menyang bagean diskrèt sing bisa digawe dening sawetara tim otonom. Akeh keuntungan sing diterusake saka iki, kalebu muter fitur sing luwih cepet, uji coba modul individu sing luwih gampang, lan upgrade sing luwih lancar.
Nanging ana sawetara kangelan karo frontends mikro uga.
Pengujian lengkap aplikasi, umpamane, bisa uga angel.
Kajaba iku, amarga butuh tim insinyur lan administrator sing akeh, proyek frontend mikro larang banget.
Akibate, sadurunge nggawe keputusan, sampeyan kudu nggatekake kabeh komponen kasus bisnis sampeyan.
Vladimir Čamaj
Piye wae aku ora ngerti apa prinsip komunikasi antarane komponen individu ing frontend dianggo. Aku ora ngerti carane sampeyan pengin nyambungake komponen sing digawe ing frameworks beda. Ora ana apa-apa ing artikel babagan iki. Sistem acara lan pamireng katon kaya neraka ing bumi kanggo kula. Kepiye carane kita kudu mbayangake?