Hari ini kami menerbitkan bagian kedua dari terjemahan artikel, yang berisi serangkaian rekomendasi untuk pengembang Angular. Pada bagian
sebelumnya 11 tips disajikan, dalam hal ini kami akan mempertimbangkan jumlah yang sama.
1. Komponen kecil yang cocok untuk digunakan kembali
Temukan fragmen dalam komponen yang dapat digunakan kembali dan buat komponen baru berdasarkan mereka. Jadikan komponen sebodoh mungkin, karena ini akan memungkinkan mereka untuk digunakan dalam lebih banyak skenario. Komponen "bodoh" adalah komponen yang tidak mengandung logika spesifik apa pun, yang operasinya hanya bergantung pada data input yang diberikan padanya.
Ketika bekerja dengan komponen, aturan umum berikut harus dipatuhi: komponen bersarang terdalam di pohon komponen harus menjadi yang paling "bodoh" juga.
▍ Penjelasan
Menggunakan kembali komponen mengurangi duplikasi kode, yang menyederhanakan dukungan dan perubahan proyek.
Komponen bodoh lebih sederhana dari yang lain, sehingga kecil kemungkinannya akan muncul kesalahan. Menggunakan komponen seperti itu membuat pengembang lebih baik memikirkan API terbuka komponen dan membantu memecahkan masalah.
2. Tentang tugas yang diselesaikan oleh komponen
Kapan pun memungkinkan, hindari keberadaan komponen logika selain yang digunakan untuk memvisualisasikan data.
▍ Penjelasan
Komponen dirancang sebagai alat untuk menyajikan informasi dan untuk mengendalikan bagaimana antarmuka harus bekerja. Setiap logika bisnis harus dihapus dari komponen dan ditempatkan, bila mungkin, dalam metode atau layanan yang terpisah, sehingga memisahkan logika bisnis dari logika penyajian informasi.
Logika bisnis, ketika disajikan sebagai layanan terpisah, biasanya lebih mudah untuk unit test. Dengan pendekatan ini, dapat digunakan kembali oleh berbagai komponen yang membutuhkan kemampuan yang sama.
3. Tentang metode hebat
Jika kode metode ternyata sangat panjang, ini biasanya menunjukkan bahwa modul seperti itu memecahkan terlalu banyak masalah. Metode seperti itu sebagai entitas independen, mungkin, hanya memecahkan satu masalah, tetapi di dalamnya mungkin ada kode yang melakukan beberapa operasi berbeda. Kode tersebut dapat dikeluarkan dalam bentuk metode terpisah, yang masing-masing, sekali lagi, harus menyelesaikan satu masalah, setelah itu Anda harus menggunakan metode ini alih-alih fragmen kode yang sesuai dalam metode asli.
▍ Penjelasan
Metode kode panjang sulit dibaca, dipahami, dan dipelihara. Selain itu, metode tersebut rentan terhadap kesalahan, karena mengubah salah satunya dapat memengaruhi banyak mekanisme lain dari metode ini. Kode panjang berarti refactoring yang lebih rumit, dan operasi ini sangat penting dalam aplikasi apa pun.
Dalam hal ini, kita dapat menyebutkan indikator semacam itu sebagai
kompleksitas siklus program . Ada
aturan TSLint untuk mengidentifikasi kompleksitas siklomatik yang dapat digunakan dalam proyek untuk menghindari kesalahan yang mungkin muncul dalam kode yang terlalu kompleks. Dengan bantuan mereka, Anda dapat mengevaluasi kualitas kode dan mencegah kemungkinan masalah dengan dukungannya.
4. Prinsip KERING
KERING (Jangan Ulangi Diri Sendiri, jangan ulangi) adalah prinsip yang harus diikuti untuk memastikan bahwa di berbagai tempat proyek tidak ada salinan dari fragmen kode yang sama. Fragmen kode seperti itu harus dibuat dalam bentuk entitas independen, metode, misalnya, dan menggunakan panggilan mereka di mana kode berulang digunakan sebelumnya.
▍ Penjelasan
Jika kode yang sama digunakan di berbagai tempat aplikasi, ini mengarah pada fakta bahwa jika Anda perlu membuat perubahan pada kode ini, Anda harus melakukan ini di banyak tempat. Akibatnya, program akan lebih sulit untuk dipelihara, akan rentan terhadap kesalahan yang terkait, misalnya, dengan fakta bahwa tidak semua fragmen dari kode yang sama diedit dengan benar. Ini, di samping itu, meningkatkan waktu yang diperlukan untuk membuat perubahan pada kode dan mengujinya.
Jika Anda menemukan sesuatu yang serupa - format kode berulang sebagai entitas independen dan gunakan sebagai ganti fragmen berulang. Ini akan mengarah pada fakta bahwa untuk membuat perubahan, Anda perlu mengedit hanya di satu tempat, dan selama pengujian, Anda hanya perlu menguji satu bagian kode, dan bukan beberapa. Selain itu, semakin sedikit duplikat kode dalam aplikasi, semakin cepat akan diunduh oleh pengguna.
5. Mekanisme caching
Saat melakukan panggilan ke berbagai API, Anda akan melihat bahwa jawaban dari beberapa di antaranya hampir tidak pernah berubah. Dalam kasus seperti itu, Anda bisa menambahkan alat caching data ke program dan menyimpan dalam cache apa yang dikembalikan API serupa. Saat menjalankan permintaan berikutnya, Anda dapat beralih ke cache, dan jika sudah memiliki apa yang dibutuhkan, Anda dapat menggunakan data ini, dan jika tidak membutuhkannya, jalankan permintaan sebenarnya dan berikan respons di cache.
Jika data yang diterima dari API tertentu berubah pada beberapa interval, Anda dapat menyimpannya untuk waktu tertentu. Akibatnya, dengan membuat permintaan ke API tersebut, dimungkinkan untuk memutuskan dari mana mendapatkan data yang diperlukan.
▍ Penjelasan
Memiliki mekanisme caching memungkinkan Anda menghindari membuat permintaan API yang tidak perlu. Jika panggilan aplikasi ke API dilakukan hanya ketika benar-benar diperlukan, dan data yang telah diterima aplikasi tidak diminta lagi, kinerja solusi meningkat, khususnya karena tidak harus terus-menerus menunggu jawaban dari layanan jaringan tertentu. Selain itu, pendekatan ini memungkinkan untuk menghemat lalu lintas, karena data yang sama tidak diunduh berulang kali.
6. Logika dalam pola
Jika template Anda memiliki setidaknya beberapa logika, bahkan ekspresi sederhana
&& , logika ini harus diekstraksi dan dimasukkan ke dalam komponen yang sesuai.
▍ Penjelasan
Jika template memiliki logika, ini berarti bahwa template seperti itu tidak dapat dikenai pengujian unit, dan dengan demikian, kemungkinan kesalahan ketika mengubah kode template meningkat.
▍To
// <p *ngIf="role==='developer'"> Status: Developer </p> // public ngOnInit (): void { this.role = 'developer'; }
FterSetelah itu
// templat
<p * ngIf = "showDeveloperStatus"> Status: Developer
// public ngOnInit (): void { this.role = 'developer'; this.showDeveloperStatus = true; }
7. Bekerja dengan garis
Jika Anda memiliki variabel tipe string yang dapat memiliki nilai dari kumpulan terbatas, maka alih-alih mendeklarasikannya sebagai string biasa, tentukan daftar nilai yang mungkin saat mendeklarasikannya.
▍ Penjelasan
Deskripsi tipe variabel yang dipikirkan dengan matang memungkinkan penyederhanaan deteksi dan penghapusan kesalahan, karena dengan pendekatan ini mereka terdeteksi pada tahap kompilasi program dan tidak pada saat runtime.
▍To
private myStringValue: string; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Second' }
FterSetelah itu
private myStringValue: 'First' | 'Second'; if (itShouldHaveFirstValue) { myStringValue = 'First'; } else { myStringValue = 'Other' } // Type '"Other"' is not assignable to type '"First" | "Second"' (property) AppComponent.myValue: "First" | "Second"
8. Tentang manajemen status aplikasi
Pertimbangkan untuk menggunakan
@ ngrx / store untuk mengontrol keadaan aplikasi Anda dan
@ ngrx / efek untuk menerapkan efek samping. Perubahan status dijelaskan oleh tindakan dan dilakukan oleh fungsi murni yang disebut reduksi.
▍ Penjelasan
@ ngrx / store mengisolasi logika yang terkait dengan keadaan aplikasi di satu tempat dan membuatnya seragam di seluruh proyek. Di sini, di samping itu, ada mekanisme memoisasi yang berfungsi saat bekerja dengan penyimpanan, yang meningkatkan kinerja aplikasi. Mekanisme @ ngrx / store, dikombinasikan dengan strategi deteksi perubahan Angular, mengarah ke aplikasi yang lebih cepat.
9. Tentang ketidakstabilan status aplikasi
Saat menggunakan @ ngrx / store, pertimbangkan untuk menggunakan
pustaka ngrx-store-freeze untuk membuat status aplikasi tidak berubah. Perpustakaan ini mencegah mutasi negara dengan melemparkan pengecualian. Ini menghindari perubahan yang tidak disengaja dalam keadaan aplikasi yang menyebabkan konsekuensi yang tidak terduga.
▍ Penjelasan
Mengubah status aplikasi dalam komponen mengarah pada fakta bahwa perilaku aplikasi berubah tergantung pada urutan komponen tersebut dimuat. Ini melanggar model mental template redux. Sebagai akibatnya, perubahan dapat didefinisikan ulang jika kondisi repositori berubah dan selanjutnya bekerja dengannya sudah menggunakan status baru. Di sini kita menerapkan prinsip pemisahan tanggung jawab, yang menurutnya komponen berada pada tingkat presentasi dan mereka seharusnya tidak tahu bagaimana mengubah keadaan aplikasi.
10. Alat Pengujian Aplikasi
Gunakan alat khusus untuk menguji aplikasi. Di antara mereka adalah
Jest dan
Karma .
▍ Penjelasan
Jest adalah kerangka kerja aplikasi pengujian unit yang dikembangkan oleh Facebook. Ini mendukung mekanisme pelaksanaan uji paralel, yang mempercepat pekerjaan. Karena fakta bahwa ia dapat memperhitungkan perubahan akun pada basis kode, pada sesi pengujian berikutnya hanya tes yang terkait dengan kode yang diubah tersebut yang dilakukan. Ini meningkatkan kemampuan untuk menganalisis hasil tes. Selain itu, Jest menyediakan metrik cakupan uji dan didukung oleh editor Kode VS dan IDE WebStorm.
Pelari ujian Karma dikembangkan oleh tim AngularJS. Untuk menjalankan tes, ia membutuhkan browser nyata dan DOM. Karma memungkinkan Anda untuk menjalankan tes di berbagai browser. Jest, pada gilirannya, tidak perlu, misalnya, browser Chrome tanpa antarmuka pengguna atau phantom.js, karena hanya platform Node.js yang diperlukan agar kerangka kerja ini berfungsi.
11. Server rendering
Jika Anda belum menggunakan teknologi
Universal Angular , sekaranglah saatnya untuk mencobanya. Hal ini memungkinkan Anda untuk mengatur rendering sisi aplikasi sisi server. Akibatnya, halaman HTML statis yang telah dirender dikirim ke pengguna. Ini membuat aplikasi menjadi sangat cepat, karena kontennya muncul di browser hampir secara instan karena fakta bahwa browser tidak harus mengunduh dan mengurai bundel JS dan membuang waktu memastikan pengoperasian mekanisme Angular.
Selain itu, aplikasi Angular yang diberikan pada server memiliki kelebihan dibandingkan aplikasi reguler dalam hal CEO. Angular Universal membuat halaman statis, dan ini membuat mesin pencari lebih mudah untuk mengindeks halaman tersebut, karena mereka tidak harus mengeksekusi kode JavaScript untuk membentuk halaman.
▍ Penjelasan
Menggunakan Angular Universal dapat secara dramatis meningkatkan kinerja aplikasi. Baru-baru ini, kami memperbarui aplikasi kami, menambahkan kemampuan rendering server untuk itu. Ini telah menyebabkan pengurangan waktu pemuatan situs dari beberapa detik menjadi puluhan milidetik.
Selain itu, berkat pendekatan ini, halaman ditampilkan dengan benar di area pratinjau konten yang digunakan di jejaring sosial. Waktu untuk tampilan halaman penuh makna pertama (First Meaningful Paint) sangat singkat, yang menyelamatkan pengguna dari menunggu yang tidak perlu.
Ringkasan
Pengembangan aplikasi adalah jalur yang melaluinya programmer selalu menemukan peluang untuk meningkatkan apa yang ia ciptakan. Anda, mengikuti jalur ini, dapat memanfaatkan tip yang diberikan di sini untuk mengoptimalkan aplikasi Angular. Kami yakin bahwa aplikasi mereka yang konsisten akan menguntungkan tim pengembangan mana pun, dan bahwa hasil yang dihasilkan akan menarik bagi pengguna, karena, dari sudut pandang mereka, ini akan mengarah pada fakta bahwa mereka akan bekerja dengan aplikasi yang lebih stabil dan produktif.
Pembaca yang budiman! Jika Anda dapat berbagi kiat bermanfaat untuk meningkatkan aplikasi dengan komunitas pengembang Angular, silakan lakukan.
