🛎️ 👌 ♎️ 6 konsep yang perlu dikuasai arsitek aplikasi Angular 👩🏻‍🔬 🍓 ✍🏿

Angular adalah salah satu kerangka kerja web terbesar yang ada. Ini mencakup banyak fitur bawaan. Dan ini berarti bahwa untuk pengembangan penuh Angular Anda perlu berurusan dengan sejumlah konsep yang adil. Penulis materi, terjemahan yang kami terbitkan hari ini, percaya bahwa ada enam konsep yang perlu dikembangkan oleh pengembang Angular untuk memiliki pengetahuan yang mendalam untuk membuat aplikasi yang dirancang dengan baik. Namun, dia tidak berbicara tentang mempelajari kode sumber untuk implementasi konsep-konsep ini, meskipun dia sendiri kadang-kadang harus melihat ke dalam kode. Ini adalah tentang memahami mekanisme yang relevan dan kemampuan untuk mempraktikkannya.

1. Arsitektur, modul, dan perpustakaan

Dalam dunia pengembangan web, arsitektur modular Angular adalah sesuatu yang istimewa. Mungkin, ini adalah salah satu ide yang lebih buruk daripada yang diadopsi oleh pemula.

Bagian tersulit di sini adalah bahwa pengembangan web sudah menggunakan arsitektur modular. Tentu saja, saya berbicara tentang impor ES6.

Karena modul Angular menambah tingkat tambahan pengelompokan logis ke sistem, penting agar struktur mereka sebaik mungkin sesuai dengan tugas yang diselesaikan dengan bantuan mereka.

Mengetahui cara memisahkan dan menggabungkan fungsionalitas aplikasi menggunakan modul yang dirancang dengan baik adalah bagian mendasar dari pembuatan arsitektur aplikasi Angular.

▍ Berbagai jenis modul Sudut

Ada berbagai jenis modul Sudut yang harus diperhatikan:

Modul Deklarasi / Widget. Modul dengan deklarasi berbagai entitas. Contoh dari modul tersebut adalah himpunan komponen antarmuka pengguna, arahan, pipa.
Modul Layanan. Modul Layanan Misalnya - HttpClientModule.
Modul Routing. Modul Routing
Modul Fitur Domain. Modul yang mengimplementasikan tugas utama aplikasi.
Modul Inti / Bersama. Modul inti adalah modul untuk mendeklarasikan layanan global. Modul bersama adalah modul di mana komponen dinyatakan untuk dibagikan.

Berikut adalah bahan di mana Anda dapat menemukan detail tentang modul Angular.

▍ Perpustakaan atau modul?

Saya akan mengatakan bahwa perbedaan di atas antara modul dapat diperluas ke perpustakaan. Dengan pendekatan ini, ternyata mungkin ada perpustakaan yang hanya berisi layanan, perpustakaan yang mewakili rute, dan sebagainya.

Tetapi apakah modul atau pustaka dibuat tergantung pada jenis proyek, dan apakah proyek diwakili oleh repositori mono atau beberapa repositori.

▍ Pertanyaan untuk diajukan kepada diri sendiri sebelum membuat modul

Berikut adalah beberapa pertanyaan untuk diajukan sebelum menulis modul:

? — , . , . , .
, ? . , , . , , .

2. ,

Secara teori, berbagi tanggung jawab itu sederhana. Tetapi dalam praktiknya sudah lebih sulit. Pengembang, sejak zaman Angular.js, tahu bahwa komponen harus dibuat seringkas mungkin, dan layanan harus dibuat lebih besar. Dalam versi baru Angular, ide-ide ini tidak banyak berubah.

Dan saat ini penting untuk memiliki gagasan tentang apa yang seharusnya menjadi bagian dari komponen, apa yang merupakan bagian dari layanan, dan juga mempertimbangkan fakta bahwa arahan mungkin fitur yang sangat diremehkan dari Angular.

OndKondisi

Jawaban untuk pertanyaan di mana tepatnya menyimpan keadaan komponen tergantung pada di mana data yang sesuai diperlukan. Yaitu, mereka mungkin diperlukan hanya dalam komponen, bersifat lokal dan dikemas, atau mereka mungkin diperlukan di luar komponen.

Jika komponen berbagi status, atau status perlu diakses dari layanan, maka status harus disimpan dalam layanan. Selain itu, jika negara disimpan dalam layanan, alat manajemen negara apa yang digunakan tidak memainkan peran khusus.
Jika keadaan adalah lokal (misalnya, kita berbicara tentang formulir) dan hanya digunakan di dalam komponen, maka keadaan harus disimpan dalam komponen.

▍Bekerja dengan DOM

Mungkin sebagian besar manipulasi DOM harus dilakukan dalam arahan. Bayangkan bahwa salah satu komponen dilengkapi dengan fungsi Drag-and-Drop.

Saya yakin bahwa dalam situasi ini Anda dapat membuat komponen dan mengikat acara yang sesuai darinya, tetapi jika Anda melakukannya, dua fenomena akan bercampur:

Deskripsi penampilan komponen.
Penentuan perilaku komponen.

Arahan adalah fitur Angular yang memungkinkan Anda menggambarkan mekanisme yang dapat digunakan kembali. Di hampir setiap proyek yang saya kerjakan, saya perhatikan kurangnya arahan. Arahan dapat mengambil bagian yang cukup besar dari tanggung jawab komponen.

Berikut ini latihan untuk Anda: cari komponen terbesar dalam proyek Anda saat ini dengan jumlah baris kode. Apakah itu digunakan di dalamnya Rendereratau ElementRef? Logika yang sesuai, kemungkinan besar, dapat ditransfer ke arahan.

3. Ubah deteksi dan rendering

Ketika datang untuk rendering ulang antarmuka pengguna, maka dalam Angular semuanya dilakukan seolah-olah dengan sihir, menggunakan mekanisme internal kerangka kerja.

Tetapi jika Anda perlu mengoptimalkan aplikasi sehingga antarmuka hanya ditampilkan ulang saat diperlukan, Anda harus berurusan dengan "keajaiban" ini. Dan, meningkatkan rendering, Anda harus mengandalkan tidak hanya pada pengetahuan, tetapi juga pada intuisi.

Seorang arsitek aplikasi Angular mungkin harus menyadari bahwa strategi deteksi perubahan digunakan untuk mengoptimalkan kinerja rendering onPush. Namun dalam perjalanan kerja, semuanya tidak selalu berjalan seperti yang diharapkan. Terutama ketika templat tidak menggunakan objek yang bisa diamati dan pipa asinkron.

▍ Meningkatkan deteksi perubahan

Untuk meningkatkan proses deteksi perubahan yang digunakan dalam proyek, masuk akal untuk memulai dengan ide-ide berikut:

Penting untuk menganggap semua data tidak dapat diubah. Perpustakaan manajemen negara berbasis Rx bisa sangat berguna di sini.
Untuk menghasilkan data dalam templat, sebaiknya hanya menggunakan (atau terutama) objek yang dapat diamati. Saat menggunakan keadaan lokal, ada baiknya menerapkan BehaviorSubject.

Jika Anda ingin mengembangkan aplikasi Angular berkinerja tinggi, Anda hanya perlu menangani dengan sangat baik dengan masalah deteksi perubahan. Faktanya adalah bahwa kinerja tinggi bahkan tidak "memperbarui antarmuka saat dibutuhkan". Ini adalah "memperbarui antarmuka hanya jika diperlukan."

▍ Mengatasi Batasan Kinerja Sudut

Mengurangi jumlah rendering ulang antarmuka aplikasi adalah salah satu rahasia yang memungkinkan Anda membuat aplikasi yang cepat dan efisien. Tetapi kadang-kadang kinerja aplikasi harus melampaui batas yang ditentukan oleh perangkat Angular itu sendiri. Di antara aplikasi tersebut dapat dicatat permainan, proyek yang datanya sering diperbarui, halaman yang menampilkan daftar besar dan kompleks, dan sebagainya.

Jika Anda benar-benar perlu memeras maksimal absolut dari kinerja Angular, ini berarti Anda harus menggunakan teknik yang melibatkan menyingkirkan Zone.js dan memperbarui antarmuka secara akurat menggunakan fitur Ivy terbaru. Berikut ini materi tentangnya.

4. Routing

Routing bukan hanya representasi SPA dalam bentuk banyak halaman virtual. Ini juga memuat bundel aplikasi sesuai permintaan menggunakan kemampuan pemuatan malas dari bahan subsistem perutean sudut.

Jika Anda mengerjakan aplikasi besar dan ukuran bundel aplikasi ini melebihi 1 MB, maka Anda mungkin sudah tahu mengapa ini penting. Memang, tidak ada yang akan menemukan prospek mengunduh sejumlah besar data untuk bekerja dengan aplikasi tertentu.

Routing harus digunakan tidak hanya untuk memisahkan rute tingkat atas, tetapi juga untuk mengatur pekerjaan dengan bagian antarmuka yang lebih dangkal dan lebih dalam.

Ini memungkinkan Anda untuk membagi konten bundel dengan rute utama dan membantu membagi aplikasi menjadi bagian-bagian kecil yang tidak perlu ditransfer ke pengguna hingga permintaan eksplisit dibuat untuk mengunduhnya.

▍ Contoh: komponen tab

Misalkan kita sedang mengembangkan antarmuka pengguna yang menggunakan tab. Selain itu, setiap tab tidak tergantung pada yang lain. Ini adalah situasi yang ideal di mana setiap tab dapat diberi rute sendiri dan mengatur pemuatan data yang malas, di mana hanya data dari tab yang dipilih ditransmisikan ke klien.

Ingin contoh lain? Bagaimana dengan jendela pop-up dan modal? Kode mereka benar-benar tidak perlu dimasukkan dalam materi yang termasuk dalam bundel asli proyek. Kode jendela semacam itu masuk akal untuk dimuat hanya ketika dibutuhkan, tetapi tidak lebih awal.

Jika Anda menginginkan sesuatu yang terinspirasi sebelum menerapkan ide-ide tersebut, saya sarankan untuk melihat dokumentasi komponen @ angular / material / tabs , yang mengimplementasikan pola di atas.

5. Formulir

Sebagian besar aplikasi CRUD pada dasarnya terdiri dari banyak bentuk. Sangat mungkin Anda menghabiskan banyak waktu membuat formulir. Karena itu, penting bagi seseorang yang ingin menjadi arsitek Angular untuk menguasai bekerja dengan bentuk-bentuk dengan benar.

Sebagian besar formulir Anda cenderung menggunakan modul ReactiveFormsModule. Dan jika mereka tidak terdiri dari kontrol tunggal, kemudian menggunakannya, ngModelpengikatan data dua arah akan dilaksanakan.

API Angular untuk bekerja dengan formulir cukup mudah dipelajari. Untuk mencapai keunggulan dalam penggunaan API ini, secara umum, cukup mempelajari dokumentasi dengan benar dan mengetahui masalah apa yang mungkin muncul saat bekerja dengan formulir.

Masalah utama yang perlu diketahui adalah bahwa bentuk-bentuk di Angular tidak terikat pada tipe data yang mendasari mereka. Ini mungkin hal yang paling tidak menyenangkan tentang bekerja dengan mekanisme yang dibuat dengan sangat baik. Akibatnya, pengembang perlu memonitor dengan hati-hati bahwa formulir tersebut sesuai dengan struktur data yang digunakan saat bekerja dengannya.

6. RxJS

Dan yang terakhir dalam daftar kami, meskipun tidak sedikit, adalah teknologi RxJS.

Saya yakin bahwa salah satu fitur paling kuat dari Angular adalah integrasi yang mendalam dari kerangka kerja ini dengan Rx dan pemrograman reaktif fungsional.

Untuk benar-benar menguasai Angular, membuka jalan untuk desain aplikasi berkualitas tinggi, Anda harus terlebih dahulu mempelajari Rx, atau setidaknya operator yang paling penting. Sulit untuk menjadi pengembang Angular yang benar-benar canggih tanpa menghabiskan banyak waktu untuk memahami Rx.

Ada dua alasan untuk mempelajari Rx untuk membantu Anda mengembangkan aplikasi Angular: kinerja dan pemrosesan data yang tidak sinkron.

Pemrosesan data yang tidak sinkron adalah tugas yang sangat sulit dalam aplikasi modern dan sangat interaktif. Karena itu, Anda harus melupakan janji, oh setTimeoutdan oh setInterval, dan mulai bekerja dengan gaya Rx.

Alasan serius lain untuk mempelajari Rx adalah untuk mengoptimalkan kinerja aplikasi. Tentu saja, untuk memulainya, cukup menggunakan pipa asinkron, tetapi terkadang ini tidak cukup. Misalnya, Anda dapat mengontrol rendering ulang komponen dengan hanya melewati peristiwa-peristiwa tersebut melalui pipa, yang kejadiannya menyiratkan perlunya rendering ulang.

Rx menyediakan pengembang dengan banyak operator yang dapat membantunya melakukan cache sesuatu, atau membangun sesuatu ke dalam paket. Dan ini, sebagai hasilnya, mengarah pada kinerja aplikasi yang dioptimalkan. Sini materi tentang pola RxJS.

Ringkasan

Di sini saya telah memberikan daftar pendek topik yang perlu ditelusuri untuk seseorang yang ingin menjadi pengembang Angular berkinerja tinggi, atau seseorang yang ingin menjadi arsitek aplikasi Angular.

Anda dapat menambahkan lebih banyak ke daftar ini. Tetapi, antara lain, saya mengusulkan untuk tidak melupakan bahwa untuk benar-benar belajar sesuatu tentang dunia pengembangan web, Anda harus mulai dengan dasar-dasarnya. Ini adalah JavaScript, CSS, pola desain, teknik penulisan kode bersih, alat, dan banyak lagi.

Dan apa yang akan Anda sarankan untuk dipelajari bagi mereka yang ingin belajar bagaimana merancang aplikasi Angular yang berkualitas tinggi?

6 konsep yang perlu dikuasai arsitek aplikasi Angular