Ada banyak alasan mengapa popularitas Vue meningkat. Ini termasuk kesederhanaan kerangka kerja, kemudahan integrasinya ke dalam proyek yang ada, kenyamanan bekerja dengannya, dan tidak terlalu ketatnya pembatasan yang diberlakukan pada aplikasi Vue. Semua ini juga membantu Vue bersaing dengan Angular dan React. Bahkan, dalam banyak hal, Vue merasa setara dengan framework dan library populer lainnya.
Saya memutuskan untuk mencari tahu apa yang mereka tulis tentang kekurangan Vue. Saat mencari bahan yang relevan, saya perhatikan di mana pun mereka mengatakan bahwa Vue tidak cukup baik untuk mengembangkan proyek skala besar. Mengenal Vue, saya yakin dapat mengatakan bahwa ini tidak benar. Dalam posting ini, saya ingin memberi perhatian Anda 4 pedoman terperinci untuk mengembangkan proyek Vue skala besar.
1. Gunakan slot Vue untuk membuat kode Anda lebih jelas
Saat menyiapkan hubungan komponen, model induk-anak paling sering digunakan. Tetapi dalam beberapa situasi, model seperti itu mungkin jauh dari yang paling berhasil. Bayangkan Anda memiliki komponen induk tunggal yang menampung sejumlah besar komponen anak. Ini berarti Anda harus menggunakan sejumlah besar parameter input (props) dan menghasilkan banyak event untuk membangun interaksi komponen. Dalam kondisi seperti itu, kode akan menjadi sangat cepat berantakan. Ini adalah situasi yang dihadapi oleh pengembang proyek skala besar. Tetapi Vue memiliki mekanisme yang dirancang khusus untuk menangani masalah semacam ini.
Kami berbicara tentang slot. Mereka digunakan untuk memberikan cara alternatif untuk merepresentasikan hubungan orangtua-anak. Slot, yaitu elemen
<slot>, memberikan kemampuan kepada pengembang untuk mengatur ulang kode. Berikut contoh sederhana penggunaan slot:
<div class="demo-content">
<slot></slot>
</div>
Ketika komponen tersebut dirender, tagnya
<slot></slot>akan diganti dengan konten dari tag <demo-content>:
<demo-content>
<h2><font color="#3AC1EF">Hi!</font></h2>
<class-name name="Welcome to Vue!"></class-name>
</demo-content>
Ada banyak jenis slot yang dapat digunakan dalam proyek Vue. Hal terpenting yang perlu Anda ketahui tentang slot adalah penggunaannya dapat berdampak besar pada proyek yang sedang berkembang. Mereka menjaga kode proyek Anda dalam kondisi yang baik dan membantu Anda membuat kode yang bersih.
2. Buat komponen independen dan gunakan kembali
Saat mendesain komponen, ikuti prinsip PERTAMA dengan membuat komponen Focused, Independent, Reusable, Small, dan Testable.
Faktanya, rahasia untuk merancang sistem "besar" secara efektif bukanlah mencoba membangun sistem tersebut sejak awal. Sebaliknya, Anda perlu merakit sistem ini dari potongan-potongan kecil yang memecahkan masalah yang sangat terspesialisasi. Ini membuatnya lebih mudah untuk menilai bagaimana bagian-bagian yang lebih kecil dari sistem cocok dengan tujuan mereka yang "lebih besar".
Eddie Osmani
Anda dapat menggunakan sistem khusus seperti Bit untuk membuat dan mengelola komponen . Inilah beberapa hal tentang itu.
3. Jaga agar toko Vuex Anda terorganisir dengan baik
Vuex adalah pola dan pustaka manajemen status aplikasi Vue. Dengan Vuex, Anda dapat mengatur penyimpanan data terpusat untuk semua komponen aplikasi. Saya telah melihat komentar tentang Vuex yang mengatakan bahwa Vuex membatasi kemampuan pengembang untuk menyusun proyek dan mencegah mereka melakukan apa yang perlu mereka lakukan. Saya tidak setuju dengan pernyataan seperti itu. Vuex sebenarnya membantu pengembang yang mengikuti serangkaian prinsip untuk menyusun proyek mereka, membuatnya lebih terorganisir.
Sebelum saya berbicara tentang prinsip-prinsip ini, saya ingin berbicara tentang 4 komponen utama repositori Vuex yang perlu diketahui oleh siapa pun yang ingin menggunakan repositori semacam itu. Jika Anda sudah familiar dengan komponen ini, itu berarti Anda dapat dengan mudah menyusun penyimpanan Vuex Anda dan meningkatkan organisasi proyek. Berikut uraian singkatnya:
- Serikat: Digunakan untuk menyimpan data aplikasi.
- Getters: digunakan untuk mengatur akses ke objek negara di luar penyimpanan.
- Mutasi: diperlukan untuk mengubah objek negara.
- Tindakan: Digunakan untuk menerapkan mutasi.
Dengan asumsi Anda sudah familiar dengan komponen-komponen ini, mari kita bicarakan prinsip-prinsip di atas:
- Status lapisan aplikasi perlu dikelola secara terpusat dengan menyimpannya di repositori.
- Perubahan keadaan harus selalu dilakukan dengan menggunakan mutasi.
- Logika asynchronous harus dienkapsulasi; itu hanya harus bertindak atas keadaan melalui tindakan.
Jika Anda dapat mengikuti 3 prinsip ini, itu berarti Anda akan dapat menyusun proyek dengan baik. Jika, dalam proses pertumbuhan proyek, Anda memutuskan bahwa kode komponen Vuex yang sesuai perlu ditempatkan di file yang berbeda, Anda dapat dengan mudah melakukannya. Di bawah ini adalah contoh struktur proyek menggunakan Vuex:
├── index.html
├── main.js
├── api
├── components
└── store
├── index.js
├── actions.js
├── mutations.js
└── modules
▍ Organisasi penyimpanan modular Vuex
Pada artikel ini kita berbicara tentang proyek skala besar. Proyek-proyek ini diharapkan menggunakan file yang sangat besar dan kompleks. Pemrogram yang membuat proyek semacam itu membutuhkan mekanisme manajemen penyimpanan yang mencerminkan kebutuhan mereka. Pada saat yang sama, struktur penyimpanan seharusnya tidak terlalu rumit. Oleh karena itu, Anda disarankan untuk mengatur toko Vuex Anda secara modular, menyesuaikannya sesuai dengan visi Anda tentang struktur terbaik untuk toko tersebut. Tidak ada cara pasti untuk membagi penyimpanan menjadi modul. Beberapa pengembang mengambil pendekatan berbasis kemampuan desain, dan beberapa mengambil pendekatan model data. Keputusan akhir untuk membagi penyimpanan menjadi modul dibuat oleh pemrogram yang bertanggung jawab atas proyek tersebut.Penyimpanan yang terstruktur secara wajar memiliki dampak positif pada kegunaan proyek dalam jangka panjang.
Berikut adalah contoh pendekatan modular untuk menyusun penyimpanan:
store/
├── index.js
└── modules/
├── module1.store.js
├── module2.store.js
├── module3.store.js
├── module4.store.js
└── module5.store.js
▍Menggunakan metode pembantu
Di atas, saya berbicara tentang 4 komponen yang digunakan di repositori Vuex. Pertimbangkan situasi ketika Anda perlu mengakses status dan bekerja dengan getter, ketika Anda perlu memanggil tindakan dan mutasi dalam komponen. Dalam kasus seperti itu, Anda tidak perlu membuat banyak metode atau properti yang dihitung. Anda hanya dapat menggunakan metode pembantu (
mapState, mapGetters, mapMutationsdan mapActions), penggunaan yang akan menghindari terlalu meningkatkan volume kode. Mari kita bicara tentang menggunakan metode pembantu ini.
▍mapState
Jika sebuah komponen perlu mengakses beberapa properti penyimpanan atau beberapa getter, ini berarti kita dapat menggunakan metode helper
mapStateuntuk menghasilkan fungsi pengambil. Ini menyelamatkan kita dari keharusan menulis kode dalam jumlah yang relatif besar.
import { mapState } from 'vuex'
export default {
computed: mapState({
count: state => state.count,
countAlias: 'count',
countPlusLocalState (state) {
return state.count + this.localCount
}
})
}
▍mapGetters
Metode helper
mapGettersdigunakan untuk mengonfigurasi pemetaan getter penyimpanan ke properti komputasi lokal.
import { mapGetters } from 'vuex'
export default {
computed: {
...mapGetters([
'count1',
'getter1',
])
}
}
▍mapMutations
Metode helper
mapMutationsdigunakan dalam komponen untuk menerapkan mutasi. Ini mendefinisikan korespondensi antara metode komponen dan panggilan store.commit. Selain itu, metode ini dapat digunakan untuk mentransfer beberapa data ke penyimpanan.
import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations({
cal: 'calculate' // `this.cal()` `this.$store.commit('calculate')`
})
}
}
▍mapActions
Metode pembantu
mapActionsdigunakan dalam komponen untuk mengirimkan tindakan. Ini mendefinisikan korespondensi antara metode komponen dan panggilan store.dispatch.
import { mapActions } from 'vuex'
export default {
methods: {
...mapActions({
cal: 'calculate' // `this.cal()` `this.$store.dispatch('calculate')`
})
}
}
4. Jangan lupa tentang pengujian unit
Pengujian adalah aspek penting lainnya dari proyek apa pun. Pengembang harus menguji apa yang mereka buat, terlepas dari pentingnya dan ukuran proyek. Hal ini terutama berlaku dalam proyek skala besar yang memiliki ratusan atau bahkan ribuan fungsi kecil. Tugas kita adalah menguji masing-masing. Tes unit membantu memecahkan masalah ini. Mereka memungkinkan pemrogram untuk menguji modul kode individu. Tes semacam itu tidak hanya memungkinkan Anda untuk mengidentifikasi dan menghilangkan kesalahan. Mereka juga meningkatkan tingkat kepercayaan pemrogram atau tim pemrogram dalam kebenaran tindakan mereka ketika ada perubahan pada kode yang ada. Ketika, seiring waktu, proyek tumbuh, pengembang, berkat penggunaan pengujian unit, dapat dengan aman menambahkan fitur baru ke dalamnya dan pada saat yang sama tidak takut itubahwa inovasi akan mengganggu kerja mekanisme yang ada. Untuk melakukan ini, Anda hanya perlu mengikuti latihan menulis tes unit dari awal proyek.
Jika kita berbicara tentang pengujian unit yang digunakan dalam proyek berdasarkan Vue, maka kita dapat mengatakan bahwa pengujian semacam itu hampir identik dengan yang digunakan dalam proyek berdasarkan kerangka kerja dan pustaka lain. Yaitu, Jest , Karma atau Mocha bekerja dengan baik dengan Vue . Namun, apa pun framework yang Anda pilih untuk membuat pengujian, ada beberapa panduan umum yang perlu diingat saat mengembangkan pengujian unit:
- Jika tes gagal, itu akan menampilkan pesan kesalahan yang jelas.
- Direkomendasikan untuk menggunakan pustaka pernyataan yang baik saat membuat pengujian. (Misalnya, mekanisme untuk menghasilkan klaim dibangun ke dalam Jest, dan dengan Mocha, perpustakaan Chai digunakan).
- Tes unit harus mencakup semua komponen Vue.
Jika Anda mengikuti rekomendasi ini dari awal proyek, itu, seiring pertumbuhan proyek, akan sangat mengurangi waktu yang dihabiskan untuk men-debug kode dan pengujian manualnya.
Proyek Vue, selain pengujian unit, dapat dikenakan pengujian end-to-end dan integrasi. Situasi di sini, seperti dalam kasus pengujian unit, juga sangat mirip dengan situasi dengan framework dan library lain. Oleh karena itu, disarankan untuk disertakan dalam proyek dan tes serupa. Biasanya, bagian perutean proyek tidak diuji dengan pengujian unit. Pengujian ujung-ke-ujung digunakan di sini. Menguji toko Vue adalah tantangan terbesar. Direkomendasikan untuk menggunakan pengujian integrasi untuk mengujinya, karena dianggap membuang-buang waktu untuk menguji status, tindakan, atau pengambil secara terpisah.
Hasil
Setelah meninjau kemampuan teknis Vue.js di posting ini, saya telah memperkuat keyakinan saya bahwa kerangka kerja ini cocok untuk mengembangkan proyek skala besar. Dengan bantuannya, seperti framework dan pustaka lainnya, Anda dapat membuat proyek semacam itu dan mengelolanya, menjaganya dalam kondisi baik.
Apakah menurut Anda Vue cocok untuk mengembangkan proyek berskala besar?
