Ide di balik ujung-tepi mikro adalah untuk memecah sisi klien monolitik dari proyek web menjadi bagian-bagian kecil yang lebih mudah untuk dikelola. Dengan pendekatan ini, setiap tim yang terlibat dalam proyek memiliki bidang pekerjaannya sendiri, tim hanya bertanggung jawab atas sebagian tertentu dari proyek dan sepenuhnya terlibat secara independen dalam pengembangannya. Jadi, setiap tim bekerja dengan basis kodenya sendiri, terlepas dari yang lain, merilis versi baru subsistemnya, terus-menerus melakukan perbaikan kecil secara bertahap. Integrasi subsistem ini dengan fragmen lain dari aplikasi yang sedang dikerjakan oleh tim lain dilakukan melalui API. Dengan skema kerja ini, bagian antarmuka proyek dirakit dari fragmen independen yang bekerja sama.
Dan Abramov, Mei lalu, menulisdi Twitter-nya bahwa dia tidak memahami microfronts. Dia percaya bahwa masalah yang harus mereka selesaikan telah diselesaikan dengan menggunakan model komponen yang baik. “Mungkin microfronts adalah solusi untuk masalah organisasi, bukan masalah teknis? Misalnya, ketika dua tim pengembang tidak bisa menyepakati apa pun, termasuk infrastruktur proyek, ”ujarnya.
Ada banyak pendekatan untuk pengembangan microfront-end: mulai dari integrasi komponen yang cerdas selama pembuatan proyek hingga pengorganisasian berbagai bagian aplikasi untuk bekerja bersama selama eksekusi kode dengan menggunakan pendekatan perutean tertentu. Dalam artikel ini, saya telah mengumpulkan alat paling terkenal yang ditujukan untuk mengembangkan perangkat ujung mikro.
1. Platform bit
Platform Bit memungkinkan Anda merakit frontend dari komponen independen. Ini membantu Anda merancang dan mengelola komponen. Ini mungkin solusi paling populer di daftar saya dan paling siap untuk pengembangan produksi.
Jika Anda melihat halaman beranda bit.dev , Anda akan melihat bahwa itu dirakit dari komponen independen. Komponen ini dibuat oleh tim yang berbeda dan memiliki basis kode berbeda di belakang komponen ini. Tetapi semuanya terintegrasi satu sama lain, yang pada akhirnya memungkinkan Anda membentuk antarmuka proyek yang holistik.
Homepage bit.dev dibuat menggunakan komponen, pekerjaan yang diatur dengan bantuan Bit
Command Line Tool Bit - perangkat lunak populer yang digunakan untuk mengembangkan, berdasarkan komponen. Dengan Bit, Anda dapat membuat komponen dan merakit antarmuka dari mereka.
Micro-frontend biasanya dipahami sebagai merakit antarmuka selama eksekusi kode proyek. Dan platform Bit ditujukan untuk membentuk frontend selama pembuatan proyek. Hal ini memberikan mereka yang menggunakan platform ini kemampuan yang berguna dari "monolit tradisional" dalam bentuk keamanan dan keandalan, dan keuntungan dari solusi ujung-ujung mikro - kesederhanaan dan skalabilitas solusi.
Dengan Bit, tim yang berbeda dapat membuat dan menerbitkan komponen mereka sendiri secara mandiri, berinteraksi dengan tim lain di level API komponen. Ini memungkinkan Anda untuk mengubah pengembangan web menjadi proses membangun proyek dari modul terpisah.
Selain alat untuk pengembangan berbasis komponen, proyek Bit menawarkan platform berbasis cloud untuk pengembang. Platform ini memungkinkan Anda untuk berkolaborasi pada komponen, mengelola proses pengembangan secara efektif, dan menskalakannya. Pada saat yang sama, tim yang mengerjakan bagian mereka sendiri dari proyek tertentu tetap sepenuhnya independen.
Bit menyediakan proses CI / CD yang unik, sepenuhnya berdasarkan komponen, yang ditujukan untuk mengatur perakitan proyek dengan cepat. Ini berarti bahwa tim yang berbeda dapat, tanpa takut akan konsekuensi negatif untuk proyek tersebut, membuat perubahan pada bagian proyek yang mereka kembangkan. Mereka tidak harus menunggu tim lain atau bersaing untuk mendapatkan perubahan pada cabang master proyek. Pengembang dapat terus menerus dan aman, tanpa takut mengacaukan bagian proyek yang tidak mereka tempati, membuat perubahan pada komponen mereka. Perubahan ini berlaku untuk semua aplikasi yang menggunakan komponen ini.
Sistem integrasi berkelanjutan berbasis komponen 50 kali lebih cepat daripada sistem konvensional
, sehingga proses pengembangan diperkaya dengan kemampuan berikut:
- Basis kode sederhana dengan bagian terpisah yang tidak bergantung satu sama lain.
- Tim otonom.
- API yang ringkas dan terdefinisi dengan baik.
- Proses independen untuk pelepasan komponen jadi.
- Kemungkinan peningkatan komponen secara terus menerus.
Berikut adalah contoh organisasi serupa yang mengerjakan proyek.
Jika tim Anda sedang dalam pengembangan berbasis komponen mencari solusi yang memanfaatkan teknologi microfront-end dan pendekatan modular untuk mengerjakan aplikasi besar, saya sarankan untuk melihat platform Bit . Mungkin saja inilah yang Anda butuhkan.
2. Arsitektur Webpack 5 dan Modul Federasi
Federasi Modul arsitektur JavaScript (MF) diusulkan oleh Zach Jackson. Dia juga memprakarsai pembuatan plugin webpack untuk mengimplementasikan arsitektur ini. Berkat upaya tim webpack, plugin ini muncul di Webpack 5 dan sekarang dalam versi beta.
Ide di balik MF adalah bahwa beberapa majelis terpisah harus membentuk satu aplikasi. Rakitan terpisah ini tidak boleh memiliki ketergantungan satu sama lain, yang memungkinkan Anda untuk mengembangkan dan menerapkannya satu per satu. Ini adalah skema gaya tepi mikro.
Menggunakan MF memungkinkan aplikasi JavaScript mengimpor kode secara dinamis dari aplikasi lain pada waktu proses. Modul membuat file yang mengekspor kemampuannya, yang merupakan titik masuk ke kode yang dapat dimuat oleh aplikasi lain. Ini dilakukan dengan mengkonfigurasi webpack yang sesuai.
Pendekatan ini, antara lain, memecahkan masalah ketergantungan kode dan masalah peningkatan ukuran bundel dengan mengatur berbagi ketergantungan. Misalnya, jika Anda memuat komponen React, maka aplikasi yang sudah mengimpor React tidak akan mengimpor ulang kode perpustakaan. Sistem akan menggunakan kode React yang sudah diimpor dan hanya mengimpor kode komponen. Terakhir, Anda dapat menggunakan React.lazy dan React.suspense untuk memberikan cadangan jika kode yang diimpor gagal karena beberapa alasan. Ini akan membantu memastikan pengalaman pengguna yang benar bahkan jika perakitan yang bergantung pada proyek tidak berfungsi.
Arsitektur Module Federation membuka kemungkinan yang sangat menarik untuk pengembangan microfront-end. Detail tentang arsitektur ini dan contoh penggunaannya dapat ditemukan di sini .
3. Proyek spa tunggal
Pembuat proyek spa tunggal mendefinisikannya sebagai "kerangka kerja JavaScript untuk menggunakan layanan mikro dalam pengembangan front-end". Jika kita menjelaskan secara singkat esensinya, maka kita dapat mengatakan bahwa itu mengimplementasikan gagasan siklus hidup beberapa entitas sebagaimana diterapkan pada setiap aplikasi individu yang membentuk proyek. Setiap aplikasi dapat merespons peristiwa perutean dan perlu mengetahui cara menerapkan, memasang di DOM, dan melepas dari DOM. Perbedaan utama antara SPA biasa (Aplikasi Halaman Tunggal) dan apa yang Anda dapatkan saat menggunakan spa tunggal adalah aplikasi spa tunggal harus dapat hidup berdampingan dengan aplikasi lain yang merupakan bagian dari sebuah proyek. Namun, aplikasi ini tidak memiliki halaman HTML sendiri.
Akibatnya, ternyata jika Anda perlu menggunakan kerangka kerja atau pustaka yang berbeda pada halaman yang sama yang perlu berintegrasi satu sama lain selama eksekusi kode proyek, Anda harus melihat spa tunggal. Berikut adalah video yang memberikan informasi dasar tentang proyek tersebut. Beberapa contoh dapat ditemukan di sini .
4. Pemuat modul SystemJS
Pemuat modul SystemJS bukan kerangka kerja untuk pengembangan ujung mikro, tetapi proyek ini memecahkan masalah manajemen lintas-browser modul independen, yang merupakan kunci untuk mengimplementasikan arsitektur ujung mikro (pendekatan ini sebenarnya digunakan dalam spa tunggal).
SystemJS dapat dianggap sebagai orkestrator modul JS. Ini memungkinkan Anda untuk menggunakan berbagai fitur modul seperti itu, seperti impor dinamis dan peta impor, tanpa bergantung pada mekanisme browser standar. Dan semua ini - dengan tingkat kinerja yang mendekati yang disediakan oleh kapabilitas bawaan browser. Di antara fitur-fitur menarik dari SystemJS, kita dapat mencatat keberadaan polyfill untuk browser yang sudah ketinggalan zaman, mengimpor modul menggunakan nama (dengan mencocokkan nama modul dan jalur ke sana), memuat beberapa modul dengan satu permintaan (menggunakan API untuk mewakili beberapa modul sebagai satu file).
SystemJS juga memungkinkan Anda untuk bekerja dengan "modul registri", sehingga pengembang dapat mengetahui modul mana yang tersedia di browser pada titik waktu tertentu. Sini Memulai dengan tutorial SystemJS.
5. Kerangka piral
Kerangka Piral dirancang untuk memfasilitasi pengembangan aplikasi portal menggunakan teknologi ujung depan mikro. Piral memungkinkan Anda membangun aplikasi front-end modular yang dapat diperpanjang saat runtime menggunakan arsitektur microfront-end dan menggunakan modul independen yang disebut pilet. Tiket dapat dikembangkan secara independen dari bagian lain dari sistem, termasuk kode dan sumber daya lain yang diperlukan. Berikut adalah video yang mendemonstrasikan bagaimana bekerja dengan Piral.
Jika Anda ingin menggunakan Piral, Anda hanya perlu memiliki editor kode, terminal, browser, dan Node.js. Instance Piral (application wrapper) dan piles (modul) bisa dijalankan dan di-debug di emulator pada mesin pengembangan lokal.
Bekerja dengan Piral
6. Buka proyek Komponen
Proyek Open Components bertujuan untuk "membawa teknologi tanpa server ke dunia front-end." Lebih tepatnya, proyek ini dibuat sebagai kerangka kerja untuk mengembangkan microfront-end, yang memberi pengembang semua yang dia butuhkan, menciptakan ekosistem yang mencakup alat untuk bekerja dengan komponen, registri komponen, templat, dan bahkan alat baris perintah. Proyek Open Components memiliki dua bagian:
- components () — , , , , HTML, JavaScript CSS. , , - , Node.js- , . HTML-, -.
- consumers () — - (, -, , ), - -.
7. Qiankun
Proyek Qiankun digambarkan sebagai "implementasi ujung-depan mikro berdasarkan spa tunggal , tetapi siap untuk penggunaan produksi." Proyek ini bertujuan untuk menyelesaikan beberapa masalah dasar yang terkait dengan perakitan aplikasi besar dari subsistem kecil (sub-aplikasi). Tugas-tugas ini termasuk menerbitkan sumber daya statis, menggabungkan subsistem, memastikan independensi subsistem satu sama lain selama pengembangan dan penerapannya, memastikan isolasi subsistem selama eksekusi kode, ketergantungan pemrosesan, dan memastikan kinerja solusi yang tinggi.
Proyek Qiankun
8. Kerangka Luigi
Luigi adalah kerangka kerja JavaScript yang berfokus pada bisnis untuk pengembangan ujung mikro yang memungkinkan Anda membuat antarmuka pengguna yang menggunakan komponen lokal dan eksternal. Luigi adalah kerangka pengembangan aplikasi web yang independen dari kerangka kerja dan perpustakaan tertentu. Kerangka kerja ini memberi pengembang sarana untuk memastikan bahwa masing-masing bagian aplikasi bekerja bersama.
Luigi
Kerangka Luigi terdiri dari dua subsistem. Ini adalah aplikasi utama dan pustaka klien. Interaksi di antara mereka didasarkan pada API postMessage.
Ini adalah kotak pasir tempat Anda dapat bereksperimen dengan Luigi. Dan inilah repositori proyek. Omong-omong, SAP sedang mengerjakannya.
9. Kerangka FrintJS
FrintJS adalah "kerangka kerja JavaScript modular untuk mengembangkan aplikasi reaktif yang dapat diskalakan." Ini memungkinkan Anda memuat aplikasi yang dikompilasi oleh berbagai bundler, membantu menyusun aplikasi, dan menjaga mekanisme seperti perutean dan penanganan ketergantungan berfungsi dengan baik. Kerangka kerja ini, selain React (pekerjaan dengan pustaka ini didokumentasikan dan diuji dengan baik), mendukung, melalui paket tambahan, React Native dan Vue.
FrintJS
→ Ini adalah sandbox interaktif FrintJS
10. Mosaik 9
Mosaic adalah sekumpulan layanan dan pustaka yang disatukan oleh spesifikasi yang menentukan bagaimana komponen berinteraksi saat mengatur situs web skala besar yang dibangun menggunakan arsitektur layanan mikro. Mosaic menggunakan apa yang disebut "fragmen", yang dikelola oleh layanan terpisah dan digabungkan saat runtime sesuai dengan urutan yang ditentukan dalam template.
Arsitektur Mosaic
Proyek Mosaic diwakili oleh berbagai paket yang ditujukan untuk memecahkan berbagai masalah. Diantaranya - perutean, pembentukan tata letak halaman, penyimpanan templat, presentasi antarmuka.
11. Kerangka PuzzleJS
PuzzleJS adalah "kerangka kerja ujung mikro untuk mengembangkan situs web yang skalabel dan cepat." Ini memungkinkan Anda untuk membuat proyek yang disebut "gateway" dan "antarmuka" (etalase) yang berkomunikasi satu sama lain. Pencipta PuzzleJS mengambil inspirasi, dalam hal arsitektur ujung mikro, dari proyek BigPipe Facebook .
PuzzleJS
PuzzleJS memungkinkan Anda membuat "portal" dan "antarmuka" independen dengan menyesuaikan interaksinya menggunakan file konfigurasi. Ini memungkinkan Anda untuk mengonversi template HTML ke fungsi JavaScript pada waktu kompilasi. Operasi ini tidak bergantung pada permintaan beban data. Akibatnya, fungsi tersebut, dalam menanggapi permintaan, mulai mentransfer data dengan sangat cepat, yang meningkatkan indikator kinerja halaman web seperti waktu ke byte pertama. Kerangka kerja ini, karena penggunaan rendering materi di sisi server, bagus dalam hal SEO. Selain itu, jika API yang diperlukan untuk pengoperasian fragmen halaman tertentu berhenti merespons permintaan, ini tidak mengganggu pekerjaan fragmen lain. Berikut adalah contoh dunia nyata dalam menggunakan PuzzleJS.
Hasil
Kerangka kerja lain yang dapat digunakan untuk pengembangan ujung mikro termasuk Podium .
Seperti yang Anda lihat, jika Anda memutuskan untuk membuat proyek berdasarkan arsitektur microfront-end, maka Anda pasti memiliki banyak pilihan.
Bagaimana perasaan Anda tentang microfront?
