1. Mendistribusikan data secara rasional antara status aplikasi lokal dan global
React adalah pustaka yang bertanggung jawab untuk mengelola antarmuka pengguna berdasarkan status aplikasi saat ini. Tugas programmer adalah mengatur pekerjaan dengan negara secara rasional. Beberapa pengembang lebih suka menyimpan semua data yang mereka miliki di repositori Redux. Ini memungkinkan mereka untuk mengatur pemrosesan terpusat dari semua data aplikasi.
Tetapi ketika memikirkan tentang data apa yang harus disertakan dalam status aplikasi, ada baiknya mempertimbangkan apakah Anda perlu meneruskan tindakan ke sistem manajemen status hanya untuk, misalnya, membuka menu tarik-turun sederhana. Hal yang sama berlaku untuk, katakanlah, data yang dimasukkan oleh pengguna ke dalam formulir umpan balik. Apakah semua bagian aplikasi perlu mengetahui apa yang dimasukkan dalam formulir seperti itu? Ketika datang ke apa yang dimasukkan ke dalam formulir, data tersebut biasanya diproses oleh aplikasi dalam waktu yang cukup singkat. Selain itu, mereka hanya digunakan oleh komponen yang bertanggung jawab untuk menampilkan formulir di layar.
Alih-alih menggunakan toko Redux untuk menyimpan semua aplikasi yang berfungsi, lebih baik menyimpan beberapa data dalam status lokal komponen. Ini akan menghindari pembuatan arsitektur aplikasi yang terlalu rumit.
Saat memikirkan di mana tepatnya Anda perlu menyimpan beberapa data, ada baiknya Anda bertanya pada diri sendiri pertanyaan-pertanyaan berikut :
- Apakah Anda memerlukan akses ke data ini di berbagai bagian aplikasi?
- Apakah Anda membutuhkan kemampuan untuk membentuk sesuatu yang baru berdasarkan data ini?
- Apakah komponen yang berbeda menggunakan data yang sama?
- Apakah berharga bagi Anda untuk dapat memulihkan status aplikasi, yang mencakup data ini, membawanya ke bentuk di mana pada titik waktu tertentu (yaitu, apakah Anda tertarik untuk melakukan debug dengan kemampuan untuk bergerak di sepanjang rute eksekusi kode ke arah yang berlawanan)?
- Apakah Anda berencana untuk menyimpan data ini ke dalam cache (yaitu, gunakan status yang ada jika aplikasi sudah memilikinya, daripada memuatnya kembali)?
- Apakah saya perlu menyimpan data ini saat memuat ulang komponen panas (selama proses ini, status internal komponen dapat hilang)?
Jawaban positif atas pertanyaan di atas menunjukkan bahwa data digunakan di luar komponen. Artinya, masuk akal untuk menyimpannya dalam status global aplikasi. Akan tetapi, perlu dicatat bahwa komponen yang menggunakan status lokal lebih independen dan dapat diprediksi.
2. Pelajari cara menguji aplikasi dan melengkapi proyek Anda dengan pengujian dari awal
Membuat pengujian otomatis sangat penting. Faktanya adalah bahwa pada titik tertentu dalam pengerjaan proyek React, pengujian manual akan memakan banyak waktu dan sumber daya.
Di awal proyek, ketika basis kodenya masih relatif kecil, sangat mudah untuk memutuskan bahwa Anda tidak perlu menulis tes untuk itu. Jika aplikasi memiliki lima hingga sepuluh komponen, membuat pengujian otomatis tampak seperti tugas rutin yang hampir tidak ada gunanya. Namun jika sebuah proyek berkembang hingga lebih dari 50 komponen dan berisi banyak komponen tingkat tinggi, pengujian manual dapat memakan waktu satu hari kerja penuh. Dan bahkan dengan pendekatan ini, kesalahan mungkin tetap ada di dalamnya yang tidak akan diperhatikan oleh siapa pun.
Selain itu, tes menulis membantu meningkatkan struktur kode Anda dengan membaginya menjadi beberapa modul. Ini akan membantu Anda menemukan kesalahan lebih cepat dan melindungi proyek dari kegagalan produksi. Inti dari pengujian otomatis adalah membantu proyek yang sedang berkembang berkembang pada tahap ketika pengujian manual tidak lagi dapat memastikan bahwa kode berfungsi dengan benar.
Benar, jika Anda tidak terbiasa membuat tes, Anda, karena memiliki proyek yang cukup besar, tidak akan dapat langsung menulisnya untuk itu. Itulah mengapa Anda perlu mulai menulis tes dari awal. Jika Anda tidak yakin harus mulai dari mana menguji proyek Anda, mulailah dengan tes integrasi . Intinya, hal terpenting dalam pengujian adalah memastikan bahwa komponen Anda berinteraksi dengan benar satu sama lain.
3. Terapkan alat tambahan yang membantu dalam penskalaan aplikasi
Biasanya, pada awal proses pengembangan proyek React, tidak perlu menggunakan alat bantu dalam jumlah besar. Tetapi, karena kita berbicara tentang proyek yang bisa menjadi sangat besar, perlu dicatat bahwa alat khusus akan sangat memudahkan pekerjaannya. Berikut uraian beberapa di antaranya:
- Menggunakan Prettier dan ESLint membantu pemrogram dalam tim menulis kode yang konsisten. Alat ini dapat membantu mengurangi sintaks dan kesalahan lainnya dalam kode Anda. Penggunaan pustaka tambahan seperti React Router , date-fns , react-hook-form juga menguntungkan proyek .
- TypeScript Redux , , . , .
- - , React , .
- Menggunakan Bit memungkinkan Anda untuk mengatur pekerjaan dengan komponen, disajikan sebagai blok bangunan independen dari aplikasi. Artinya, Anda dapat menguji dan merender komponen secara terpisah. Pendekatan untuk bekerja dengan komponen ini membuatnya lebih mudah untuk dirawat dan digunakan kembali.
- Alih-alih create-react-app, Anda dapat menggunakan alat Next.js yang sesuai untuk membuat aplikasi React baru .
Alat-alat ini akan membantu Anda memelihara basis kode aplikasi React yang besar. Namun saat memilih alat, perlu diingat bahwa masing-masing alat meningkatkan tingkat kerumitan proyek. Sebelum Anda memasukkan apa pun dalam proyek Anda, pelajari semuanya dengan baik dan buat keputusan yang tepat.
4. Perhatikan struktur file proyek
Salah satu tip terbaik yang saya temukan untuk mengembangkan aplikasi React yang dapat diskalakan adalah mengatur file proyek Anda dan menamainya dengan bijak dapat membantu mempercepat pekerjaan. Beberapa pengembang sering sebagai file utama dalam folder yang disimpan di direktori
components, digunakan index.js.
File dari berbagai komponen diberi nama yang sama.
Pendekatan untuk mengatur proyek ini tampaknya cukup masuk akal, karena ketika mengimpor komponen dalam beberapa file, instruksi terkait cukup sederhana:
import Button from '../components/Button';
Tetapi bagaimana jika Anda membuka file dari komponen tersebut di editor?
Everywhere - only index.js
Akan merepotkan untuk menavigasi melalui mereka. Tidak mudah menentukan komponen mana yang dimiliki masing-masing
index.js. Namun, jika Anda mengganti nama file ini agar sesuai dengan nama komponen, petunjuk impor akan terlihat kurang menarik:
import Button from '../components/Button/Button';
Bagaimana berada dalam situasi ini? Misalnya, tim saya menemukan solusi berikut: di folder komponen ada file dengan kode yang namanya sesuai dengan nama komponen, dan di sebelahnya ada file
index.jsyang mengekspor komponen.
File kode komponen dan index.js mengekspor komponen
Kami juga menempatkan file pengujian CSS dan unit di direktori komponen. Dengan pendekatan ini, setiap direktori komponen berisi semua yang relevan dengan komponen yang bersangkutan.
Komponen mandiri
5. Buat perpustakaan komponen
Yang terbaik adalah mulai membangun pustaka komponen sejak awal dalam proyek Anda, daripada menunggu untuk berkembang. Komponen, dalam proses pengerjaannya, dapat dirancang sebagai blok yang berdiri sendiri yang cocok untuk penggunaan berulang. Pustaka komponen dapat dibuat menggunakan Bit, baik dengan menggunakan sumber daya bit.dev , atau dengan menerapkan sistem di rumah.
6. Pisahkan logika komponen dari dirinya sendiri dengan menggunakan kait
Saat proyek berkembang, Anda mungkin memperhatikan bahwa logika beberapa komponen digunakan berulang kali di tempat yang berbeda. Anda dapat menggunakan kait berpemilik untuk mengatur pembagian logika komponen.
Misalnya, kami memiliki aplikasi untuk menghitung poin dalam permainan bola basket.
Aplikasi untuk mencetak gol dalam permainan bola basket
Jika Anda melihat kode untuk aplikasi ini, akan muncul di file
HomeTeam.jsdanAwayTeam.jsmenggunakan logika yang sama untuk bekerja dengan meteran. Dalam situasi seperti ini, ketika kode yang sama digunakan untuk mengelola antarmuka, Anda dapat memisahkan kode tersebut dari komponen dan meletakkannya di file terpisah.
Di sini saya memisahkan kode untuk menyimpan status penghitung dan logika untuk meningkatkan penghitung menjadi file terpisah
util.js. File ini diimpor menjadi komponen.
Hook, pada dasarnya, adalah fungsi biasa yang mengembalikan beberapa nilai. Dengan bantuan mereka, Anda dapat mengatur gaya kode yang dimaksudkan untuk digunakan kembali dalam berbagai komponen.
Hasil
Ingatlah selalu bahwa mengembangkan aplikasi React dalam skala besar adalah tugas kompleks yang memerlukan pengambilan keputusan yang mempertimbangkan kepentingan pengguna dan pengembang aplikasi tersebut. Pilihan rekomendasi yang masuk akal untuk diikuti saat mengerjakan setiap proyek tertentu bergantung pada seberapa baik rekomendasi ini bagi mereka yang menggunakan proyek dan bagi mereka yang mengembangkannya.
Saat memilih alat dan teknik untuk digunakan dalam pengembangan proyek, ada baiknya bereksperimen. Ini akan memungkinkan Anda untuk memilih dengan tepat apa yang akan menguntungkan aplikasi React Anda. Semoga tips yang saya bagikan hari ini bermanfaat bagi Anda.
Alat dan teknik pengembangan apa yang Anda gunakan saat membuat project React yang perlu diskalakan dengan baik?
