clean architecture front end
1.0.0
Halo, ini adalah repositori untuk mengirimkan visi saya tentang arsitektur bersih (pertama di bagian depan, lalu kemudian di belakang) dalam versi yang berbeda.
Saya menulis sebuah artikel untuk mendukung contoh-contoh proyek ini: https://www.hexa-web.fr/blog/hexagonal-architecture-front-end untuk memahami arsitektur bersih, Anda juga dapat membaca artikel saya tentang inversi ketergantungan di front-end: https://www.hexa-web.fr/blendpront: https://www.hexa-web.fr/bledpront/https://www.hexa-web.fr/bledpront/version--levon--pront/www.hexa
Untuk contoh -contoh ini, saya memilih untuk menggunakan Next.js berdasarkan React, tetapi inti dari arsitektur ini adalah untuk dapat menggunakannya secara independen dari kerangka kerja dan perpustakaan yang digunakan (dependensi eksternal).
Untuk memiliki contoh sederhana, saya memilih subjek sederhana: daftar TODO!
Untuk melihat tugas yang masih perlu dilakukan pada proyek, buka file /docs/todo.md
Jika Anda memiliki pertanyaan, saran atau apa pun, jangan ragu untuk menghubungi saya! Dan jika repositori ini telah membantu Anda, pertimbangkan untuk membaginya dengan kenalan Anda.
Pertama, instal dependensi:
npm install
# or
yarn install-
Kemudian jalankan server pengembangan:
npm run dev
# or
yarn devBuka http: // localhost: 3000 dengan browser Anda untuk melihat hasilnya.
-
Untuk memulai tes unit:
jest-
Untuk menguji aplikasi secara online: https://front-end-clean-architecture.netlify.app/
Arsitektur heksagonal, atau arsitektur berdasarkan port dan adaptor, adalah pola arsitektur yang digunakan dalam bidang desain perangkat lunak. Ini bertujuan untuk membuat sistem berdasarkan komponen aplikasi yang secara longgar digabungkan dan yang dapat dengan mudah dihubungkan ke lingkungan perangkat lunak mereka melalui port dan adaptor. Komponen -komponen ini bersifat modular dan dapat dipertukarkan, yang memperkuat konsistensi pemrosesan dan memfasilitasi otomatisasi tes.
Ada tiga bagian dalam arsitektur bersih: bagian aplikasi (port dan adaptor utama), domain (kasus penggunaan, model domain, dll.) Dan bagian infrastruktur (port sekunder dan adaptor).
Arsitektur ini didasarkan pada pola port / adaptor dan prinsip inversi ketergantungan.
Dengan mendokumentasikan Anda tentang arsitektur bersih (atau arsitektur heksagonal). Anda akan menemukan nama yang berbeda untuk bagian -bagian ini. Nama -nama yang dipilih di sini adalah pribadi, tujuannya adalah bahwa mereka dapat dimengerti.
Kasus menggunakan menentukan tindakan pengguna Anda. Tujuannya bukan untuk menggunakan kerangka kerja atau perpustakaan apa pun dalam elemen -elemen ini (untuk menjaga logika tidak digabungkan dengan alat -alat ini).
Di bagian depan, mereka dapat diwakili oleh fungsi, berdasarkan kelas yang ditulis dalam JS atau TS. Dengan Bereaksi, dimungkinkan untuk menggunakan Redux untuk bagian ini.
Jika Redux digunakan, tindakannya adalah kasus penggunaan, keadaan adalah salah satu model, dan pemilih digunakan untuk memetakan.
Port utama digunakan untuk menetapkan kontrak antara adaptor utama dan kasus penggunaan. Untuk ini, antarmuka dapat dibuat. Dalam praktiknya, kasus penggunaan juga dianggap sebagai port utama.
Kemudian, implementasi antarmuka ini digunakan untuk berdialog dengan domain: yang pertama adalah apa yang kita sebut adaptor utama. Tujuan mereka adalah untuk memicu pelaksanaan kasus penggunaan. Misalnya di bagian depan, adaptor ini dapat menjadi komponen reaksi yang melakukan pemicu tindakan (redux atau tidak).
Port sekunder digunakan untuk menetapkan kontrak antara adaptor sekunder dan kasus penggunaan. Untuk ini, kami biasanya membuat antarmuka. Antarmuka ini digunakan secara langsung dalam kasus penggunaan.
Kiat: Anda dapat menggunakan injeksi ketergantungan untuk itu, beberapa perpustakaan manajemen negara memungkinkan Anda untuk melakukannya. Misalnya dengan Redux-Thunk dan Redux-Observable, dimungkinkan untuk melewati "ExtraArguments" yang akan langsung tersedia dalam tindakan Redux. Dalam "Vanilla", ada juga inversifyjs.
Implementasi kedua antarmuka (port) disebut adapter sekunder. Mereka dipanggil oleh kasus penggunaan. Misalnya di depan, adaptor ini dapat berupa permintaan HTTP, akses ke data yang ada di penyimpanan lokal, dll.
Dalam bahasa Inggris :
Dalam bahasa Prancis:
