Halo, Habr!Hari ini saya ingin menyentuh pada topik kode yang benar dalam bekerja dengan Angular. Rekomendasi ini akan membuat kode Anda lebih efektif dalam praktik, serta memungkinkan saya untuk tidak terlalu menuntut kode junior.
1. Hindari logika dalam pola
Dan hal pertama yang ingin saya sebutkan adalah logika dalam template. Jika Anda memiliki semacam logika di templat Anda, meskipun sederhana &&, penting untuk mengekstraknya ke dalam komponen Anda. Kehadiran logika dalam templat berarti bahwa tidak mungkin untuk mengujinya, dan karena itu lebih rentan terhadap kesalahan saat mengubah kode templat.
<p *ngIf="isShow"> Example </p>
public ngOnInit(): void { this.isShow = true; }
2. garis "aman"
Misalkan Anda memiliki variabel tipe string yang hanya dapat memiliki serangkaian nilai tertentu. Alih-alih mendeklarasikannya sebagai tipe string, Anda dapat mendeklarasikan daftar nilai yang sangat mungkin ini sebagai tipe.
private value: 'One' | 'Two'; if (isShow) { value = 'One'; } else { value = 'Two' }
Dengan mendeklarasikan jenis variabel dengan cara ini, kita dapat menghindari kesalahan saat menulis kode pada waktu kompilasi, bukan pada saat runtime.
3. Aturan metode panjang
Ini demo kode yang mubazir. Penting untuk dipahami bahwa tidak ada yang suka metode panjang.
Metode yang panjang biasanya menunjukkan bahwa mereka melakukan terlalu banyak hal. Ada kemungkinan bahwa metode itu sendiri melakukan satu hal, tetapi di dalamnya ada beberapa operasi lain yang dapat ditempatkan dalam metode lain yang memiliki tujuan logisnya sendiri. Metode yang panjang sulit dibaca, dipahami, dan dipelihara. Mereka juga rentan kesalahan, karena mengubah satu hal dapat mempengaruhi banyak hal lain dalam metode ini. Saya yakin, bukan untuk saya sendiri, metode seperti itu membuat refactoring (yang merupakan kunci dalam aplikasi apa pun) lebih sulit daripada yang seharusnya.
4. Duplikasi kode
Jika Anda memiliki kode yang berulang di berbagai tempat dalam proyek. Ekstrak kode berulang menjadi metode yang terpisah dan gunakan sebagai ganti kode berulang.
Masalah dengan duplikasi kode adalah bahwa jika kita ingin membuat perubahan pada logika kode ini, kita harus melakukannya di beberapa tempat. Ini membuatnya sulit untuk mempertahankan kode, yang pada gilirannya meningkatkan risiko kesalahan muncul. Juga dibutuhkan lebih banyak waktu untuk membuat perubahan pada logika. Dengan kode duplikat yang lebih sedikit, aplikasi akan lebih cepat.
5. trackBy
Mari kita encerkan daftar seluk-beluk bekerja dengan Angular.
Sering digunakan oleh ngFor untuk melakukan iterasi pada array dalam template, seringkali tidak digunakan dalam fungsi seperti trackBy. Gunakan dalam bekerja dengan ngFor. Berkat hal sepele seperti itu, Anda akan menerima pengidentifikasi unik untuk setiap elemen.
<li *ngFor="let item of items; trackBy: trackByFn">{{ item }}</li>
trackByFn(index, item) { return item.id;
Ketika array berubah, Angular menampilkan ulang seluruh pohon DOM. Tetapi jika Anda menggunakan trackBy, maka Angular akan tahu elemen mana yang telah berubah dan hanya akan mengubah DOM untuk elemen tertentu itu.
6. Berlangganan di template
Perhatikan contoh berlangganan ke komponen yang diamati:
<p>{{ text }}</p>
blablaObservable .pipe( map(value => value.item), takeUntil(this._destroyed$) ) .subscribe(item => this.text = item);
Sekarang Anda telah melihat bagaimana tidak melakukannya. Bukannya saya mendesak Anda untuk secara ketat mengikuti rekomendasi saya, hanya saja pengembang sering tidak menyelidiki apa yang terjadi dalam kode mereka. Jadi mengapa itu buruk dan bagaimana melakukannya dengan baik? Faktanya adalah kita menghadapi risiko tidak sengaja berhenti berlangganan dari suatu komponen, yang dapat menyebabkan kebocoran memori. Opsi terbaik adalah menggunakan langganan dalam templat itu sendiri:
<p>{{ text$ | async }}</p>
this.text$ = blablaObservable .pipe( map(value => value.item) );
Berkat async, kami tidak perlu khawatir tentang berhenti berlangganan, karena ia melakukannya secara otomatis, dan ini menyederhanakan kode, menghilangkan kebutuhan untuk mengelola langganan secara manual. Ini juga mengurangi risiko berhenti berlangganan secara tidak sengaja dari komponen yang saya sebutkan di atas.
7. Memuat malas
Jika memungkinkan, gunakan pemuatan modul malas di aplikasi Angular Anda. Pemuatan malas adalah ketika Anda mengunduh sesuatu hanya saat digunakan, misalnya, memuat komponen hanya saat Anda perlu melihatnya. Ini akan mengurangi ukuran aplikasi yang dapat diunduh dan dapat meningkatkan waktu pemuatan aplikasi tanpa memuat modul yang tidak digunakan.
// app.routing.ts
{ path: 'dashboard', loadChildren: 'lazy-load.module#DashboardModule' }
8. Berlangganan di dalam berlangganan
Terkadang Anda mungkin membutuhkan nilai dari lebih dari satu yang dapat diamati untuk menyelesaikan suatu tindakan. Dalam hal ini, hindari berlangganan satu yang dapat diamati di blok berlangganan yang lain yang dapat diamati. Sebagai gantinya, gunakan operator rantai yang sesuai. Pernyataan berantai dijalankan berdasarkan observasi dari pernyataan di depannya. Beberapa operator rantai, seperti withLatestFrom, menggabungkanLatest, dll ...
Kepada:
oneObservable$.pipe( take(1) ) .subscribe(oneValue => { twoObservable$.pipe( take(1) ) .subscribe(twoValue => { console.log([oneValue, twoValue].join(', ')); }); });
Setelah:
oneObservable$.pipe( withLatestFrom(twoObservable$), first() ) .subscribe(([oneValue, twoValue]) => { console.log([oneValue, twoValue].join(', ')); });
9. Caching
Saat mengajukan permintaan ke API, respons dari beberapa di antaranya sering tidak berubah. Dalam kasus ini, Anda bisa menambahkan mekanisme caching dan menyimpan nilai dari API. Ketika permintaan harus diulangi ke API yang sama, periksa apakah ada nilai dalam cache, dan jika demikian, gunakan itu. Kalau tidak, buat panggilan API dan tembolok hasilnya. Jika perlu, Anda dapat memasukkan waktu cache, tempat Anda dapat memeriksa kapan terakhir kali, dan memutuskan apakah akan memanggil API. Memiliki mekanisme caching menghindari permintaan API yang tidak diinginkan. Karena penghindaran permintaan duplikat ini, kecepatan aplikasi ditingkatkan, karena kami tidak perlu menunggu jawaban dan karenanya mengunduh informasi yang sama berulang kali.
10. Menghancurkan menjadi komponen yang dapat digunakan kembali
Bagilah komponen besar menjadi yang lebih kecil. Sederhanakan komponen tersebut dan buat mereka sebodoh mungkin, karena ini akan membuatnya bekerja dalam lebih banyak skenario. Pembuatan komponen seperti itu berarti bahwa komponen itu sendiri tidak memiliki logika khusus dan bekerja hanya berdasarkan input dan output yang disediakan untuk itu. Biasanya, keturunan terakhir di pohon komponen akan menjadi yang paling sederhana. Hal ini dilakukan berdasarkan kemudahan penggunaan komponen tersebut, komponen tersebut cenderung tidak mengalami kesalahan. Komponen yang dapat digunakan kembali juga mengurangi duplikasi kode, yang membuatnya lebih mudah untuk mempertahankan dan membuat perubahan.
Apakah Anda ingin melanjutkan kolom seperti itu?