Get best of the week

10 prinsip proyek ujung depan yang dapat diskalakan

Aplikasi web telah berkembang sejak awal. Kami tahu apa peran penting yang dimainkan JavaScript di web dan kemungkinan tak terbatas yang kami miliki saat memilih kerangka kerja dan teknologi. Setiap kerangka kerja memiliki kelebihan dan kekurangannya sendiri, tetapi hampir semua menggunakan semacam metodologi dasar. Alat-alat seperti create-react-app, next.js, vue-cli dan lainnya sangat berguna untuk pembentukan awal proyek dan strukturnya, tetapi selain itu Anda bebas membuat aplikasi sesuai dengan preferensi dan persyaratan proyek Anda.

Artikel ini berisi daftar prinsip yang akan berguna saat membuat aplikasi web menggunakan React dan Vue.. Mereka akan membantu Anda mengatur arah yang benar dan merampingkan pengembangan. Sebagian besar dari prinsip-prinsip ini berlaku untuk pembuatan perangkat lunak apa pun, tetapi daftar tersebut dirancang khusus untuk aplikasi web.

1. Komponen desain, bukan layar


  • Cobalah untuk merangkum seluruh logika komponen sehingga dapat dengan mudah ditampilkan di mana saja, misalnya, pada layar yang berbeda dan di bagian yang berbeda.
  • Semua operasi CRUD berlaku untuk data yang diperlukan untuk pengontrol / pemasok. Data ini kemudian ditransfer ke komponen yang terkait dengannya. Salah satu pendekatan umum adalah dengan menggunakan redux / vuex: data disimpan dalam penyimpanan dan dianggap benar, dan wadah mengambil informasi yang diperlukan.

2. Pisahkan lapisan presentasi dari logika / manajemen bisnis


Tidak semua komponen memerlukan koneksi ke penyimpanan, API server, atau layanan lain. Saat Anda membuat komponen "tidak mempedulikan sumber data", kemungkinan untuk menggunakannya kembali sangat meningkat.

3. Gunakan metode ekstraksi data standar.


  • Prinsip ini mengilustrasikan rest-hooks yang luar biasa , yang mendorong terciptanya struktur panggilan API yang sederhana dan mudah dipahami.
  • Untuk beberapa proyek, menggunakan panggilan dengan ekstraksi data eksplisit sudah cukup. Tetapi jika Anda bekerja dengan berbagai sumber dan hubungan, maka abstraksi API server akan membantu Anda.

4. Gunakan strategi input pengguna umum


  • Ini termasuk formulir, pemilihan label, validasi dan validasi, kondisi kesalahan.
  • : antd.
  • UI-, .

5.



6. Storybook


Storybook adalah alat yang hebat untuk berinteraksi dengan desainer dan mendiskusikan fungsionalitas. Ini berfungsi sebagai "panduan gaya" untuk aplikasi Anda.

7. Gunakan linter dan formatters


  • Contoh linter: ESLint, stylelint .
  • Sebagian besar alat mulai cepat, seperti buat-reaksi-aplikasi, akan memasang lebih awal linter untuk Anda. Tetapi jika Anda bekerja dengan basis kode lama, maka linter bisa sia-sia.
  • Mereka membantu dalam menemukan bug, tetapi juga dapat digunakan untuk menata kode yang ditulis tim. Ini mengurangi beban kognitif saat mengerjakan fitur yang Anda terima dari kolega Anda.
  • The sonarJS eslint Plugin akan membantu meningkatkan kualitas kode dengan memeriksa struktur logis.
  • prettier — . . .

8.


  • .
  • CSS- CSS-in-JS.
  • .

9.


:


- — commitlint


10. Mendukung changelog


Di awal setiap proyek, biasanya mudah untuk menyimpan semua perubahan di memori. Saat proyek tumbuh, changelog mungkin menjadi "repositori" utama, tempat perubahan penting pada basis kode akan dijelaskan. Bulan dan bahkan bertahun-tahun akan berlalu, dan itu masih relevan bagi Anda.

Daftar ini terus berlanjut


Ya, di sini Anda dapat menambahkan lebih banyak poin, tergantung pada ruang lingkup proyek Anda dan teknologi yang digunakan. Di atas akan cukup untuk secara radikal meningkatkan banyak aplikasi front-end. Hampir setiap prinsip dapat diterapkan secara bertahap dan tergantung pada prioritas yang akan Anda dan tim Anda tentukan. Jadi Anda tidak perlu memikirkan cara menerapkan semuanya sekaligus :)

More articles:


All Articles