Deyarli 5 yildan buyon React.js texnologiyasi bilan ishlagandan so'ng, men frontend dunyosida "yanada soddaroq" narsani qidirishni boshladim. React juda ajoyib ekotizimga ega, lekin vaqt o'tgani sari loyihalarda "dependency hell" va "overengineering" bilan juda katta qiyinliklar keltirib chiqarashi va juda ko'p vaqtni olib qo'yishi menga yoqmaydi. Shu o'rinda asosiy stackni "React" dan "Vue.js" va "Svelte" ga o'tkazishga qaror qildim. Nega aynan "Vue" va "Svelte" ga o'tishimga sabab bo'lgan muammolar va ularning afzalliklari haqida misollar bilan tushuntirib beraman.
Maslahat
Meni Vue va Svelte o'tkazgan asosiy sabablardan yana biri - ular developer experienceni ustun qo'yishladi. Kodlaringiz kamroq bo'ladi, bu bo'lsa o'zidan-o'zi muammolaringiz kamroq bo'lishini ta'minlaydi. Agar siz ham "dependency hell" va "overengineering" dan charchagan bo'lsangiz, ushbu texnologiyalarni sinab ko'rishni maslahat beraman
librarylar konfliktiReact o'zini "UI Library" sifatida juda yaxshi himoya qiladi, lekin real loyihalarda har doim qo'shimcha kutubxonalar kerak bo'ladi. Misol uchun:
Buyerda asosiy muammo package.json faylining kattalashib ketishi emas, balki kutubxonalar versiyalari bir-biri bilan "konflikt" keltirib chiqishida.
Masalan:
$ npm install...npm ERR! Could not resolve dependency:react-router-dom@6.3.0 requires react@18.1.0, but you have react@17.0.2$ # "Okay, let's upgrade React to 18.1"$ npm install react@^18.1...npm ERR! Could not resolve dependency:react@18.1.0 requires react-dom@18.1.0, but you have react-dom@17.0.2$ f#ckYokida node_modules papkasi 500MB+ hajmga yetib, dependency'larni yuklab olish 5 daqiqadan ko'proq vaqt olishi.
Vue ekotizimi "batteries-included" (barchasi bir joyda) g'oyasi asosida ishlab chiqilgan. Loyihani qurishda kerakli bo'ladigan deyarli barcha kutubxona va funksiyalar vue o'zida tayyor qilingan va vuening rasmiy kutubxonalari ishlab chiqarilgan.
Vue Router va Pinia rasmiy kutubxona hisoblanib, react ekotizimidagi deyarli barcha kutubxonalardan yengilroq va ishlatish uchun oson hisoblanadi;
vue-validate kabi 3-tomon (third party) kutubxonalar ham reactga nisbatan ishlatish oson va kamroq konflikt yuzaga keltirib chiqaradi.
Svelte compiler-based yondashuvga egaligi bilan "dependency hell" ni deyarli butunlay yo'q qiladi, chunki application ortiqcha hech qanday runtime kutubxonalarga bog'liq emas. Siz faqat html based componentlar yozasiz, qolganini svelte kompilyatori optimallashtiradi.
React ustida qurilgan loyihalarda ko'pincha keragidan ortiq abstraksiyalar paydo bo'ladi. Misol uchun:
useEffect, useCallback va useMemo orqali optimallashtirish kerak;<App /> komponentni o'rash kerak.import { useState, useCallback } from "react";function Counter() { const [count, setCount] = useState(0); const increment = useCallback(() => setCount((c) => c + 1), []); return <button onClick={increment}>{count}</button>;}Bu oddiy counter komponent ham optimallik uchun useCallbackni talab qiladi. Nima uchun?
I have no idea
Vue bizga ref va reactive primitive'lari bilan qulaylikni beradi:
<script setup lang="ts">import { ref } from "vue";const count = ref<number>(0);</script><template> <button @click="count++">{{ count }}</button></template>Vue uchun hech qanday memoization kerak emas, ko'p vaqtingizni performance uchun ketkazishni hojati yo'q!
Svelte bizga javascript sintaksisini to'g'rida-to'g'ri ishlatish imkoniyatini beradi:
<script lang="ts"> let count = 0;</script><button on:click={() => count++}>{count}</button>Bu yerda virtual DOM yo'q - har bir click DOMni to'g'ridan-to'g'ri yangilaydi (lekin optimallashtirilgan tarzda).
Reactning virtual DOM-i yaxshi, lekin katta loyihalarda sekinlashishi mumkin. Vue ham virtual DOM'dan foydalanadi, lekin optimallashtirilgan variantda. Svelte esa kompilyatsiya vaqtida kodni optimallashtiradi va faqat zarur bo'lgan qismlarni render qiladi.
Agarda loyiha kichikroq bo'lsa, kelajakda "scale" qilish talabi bo'lmasa, buyerda Svelte eng ideal variant. Nega?:
Aksincha, agar loyiha katta bo'ladigan bo'lsa, loyihada ko'p dasturchilar ishtirok etsa, yoki murakkab biznes logikalar mavjud bo'lsa, Vue eng to'g'ri tanlob bo'ladi. Nega?:
NOTE
Ushbu web saytimni
svelteyordamida qaytadan qurib chiqishni maqsad qildim
(hali react texnologiya bilan to'liq tugatilmagan bo'lsa ham :))Kodlar ushbu branchga yozib boriladi:
rebuild/svelte