Preact: Zamonaviy veb-ishlab chiqish uchun yengil vaznli React alternativi

Veb-ishlab chiqishning doimiy rivojlanayotgan landshaftida yuqori unumdorlikka ega va foydalanuvchiga qulay ilovalar yaratish uchun to'g'ri front-end kutubxonasi yoki freymvorkini tanlash juda muhim. React dominant kuchga aylangan bo'lsa-da, uning hajmi va murakkabligi ba'zan, ayniqsa, unumdorlik birinchi o'rinda turadigan loyihalarda to'siq bo'lishi mumkin. Aynan shu yerda Preact o'zini namoyon qiladi – bu React'ga o'xshash API'ga ega tezkor, yengil muqobil bo'lib, soddalashtirilgan ishlab chiqish tajribasini izlayotgan dasturchilar uchun jozibador yechim taklif etadi.

Preact nima?

Preact - bu foydalanuvchi interfeyslarini yaratish uchun virtual DOM taqdim etuvchi JavaScript kutubxonasi. U React uchun to'g'ridan-to'g'ri o'rinbosar bo'lishni maqsad qilgan bo'lib, React'ning asosiy funksionalligini ancha kichikroq hajmda taklif etadi. React hajmi taxminan 40KB (minifikatsiyalangan va gziplangan) bo'lsa, Preact atigi 3KB ni tashkil etadi, bu esa uni hajmi va unumdorligi muhim bo'lgan ilovalar uchun ideal tanlovga aylantiradi.

Preact'ni React'ning ixchamroq va tezroq qarindoshi deb o'ylang. U xuddi o'sha asosiy afzalliklarni – komponentlarga asoslangan arxitektura, virtual DOM'ni taqqoslash va JSX qo'llab-quvvatlashini – soddalik va samaradorlikka e'tibor qaratgan holda taqdim etadi. Bu uni, ayniqsa, resurs cheklovlari mavjud bo'lgan mobil ilovalar, bir sahifali ilovalar (SPA) va o'rnatilgan tizimlar uchun jozibador qiladi.

Preact'dan foydalanishning asosiy afzalliklari

• Kichikroq hajm: Preact'ning eng muhim afzalligi uning kichik hajmidir. Kichikroq kutubxona tezroq yuklab olish vaqtini, dastlabki yuklanish unumdorligini yaxshilashni va, ayniqsa, sekin tarmoqlar va qurilmalarda yaxshiroq foydalanuvchi tajribasini anglatadi.
• Yuqori unumdorlik: Preact'ning samarali virtual DOM'ni taqqoslash algoritmi va kichik kod bazasi tezroq render qilish va umumiy unumdorlikni yaxshilashga yordam beradi. Bu yanada sezgir va silliq foydalanuvchi interfeysiga olib kelishi mumkin.
• React bilan moslik: Preact'ning API'si asosan React bilan mos keladi, bu esa mavjud React loyihalarini Preact'ga o'tkazishni yoki Preact'ni React komponentlari bilan ishlatishni osonlashtiradi. Bu moslik, shuningdek, React bilan tanish bo'lgan dasturchilar Preact'ni tezda o'rganishi va ishlatishi mumkinligini anglatadi. Biroq, shuni ta'kidlash kerakki, bu 100% moslik emas va ba'zi sozlashlar talab qilinishi mumkin.
• ES modullarini qo'llab-quvvatlash: Preact ES modullari bilan uzluksiz ishlash uchun mo'ljallangan bo'lib, dasturchilarga zamonaviy JavaScript xususiyatlaridan foydalanish va kodni tartibga solishni yaxshilash imkonini beradi.
• Soddalashtirilgan ishlab chiqish: Preact'ning kichikroq API maydoni va soddalikka e'tibor qaratishi uni o'rganish va ishlatishni osonlashtiradi, yangi dasturchilar uchun o'rganish jarayonini qisqartiradi va ishlab chiqish jarayonini soddalashtiradi.
• Ajoyib ekotizim: React'nikidan kichikroq bo'lsa-da, Preact'ning ekotizimi o'sib bormoqda va marshrutlash, holatni boshqarish va UI komponentlari kabi bir qator foydali plaginlar va kutubxonalarni taklif etadi.

Preact'ni qo'llash sohalari

Preact quyidagi stsenariylar uchun ayniqsa mos keladi:

• Mobil ilovalar: Preact'ning kichik hajmi va yuqori unumdorligi uni resurs cheklovlari va foydalanuvchi tajribasi muhim bo'lgan mobil ilovalar yaratish uchun ajoyib tanlovga aylantiradi. Misol uchun, cheklangan tarmoqqa ega hududlardagi foydalanuvchilarga mo'ljallangan yangiliklar ilovasini ko'rib chiqing. Preact React'ga nisbatan sezilarli darajada tezroq dastlabki yuklanish vaqtini ta'minlab, yaxshiroq foydalanuvchi tajribasiga olib kelishi mumkin.
• Bir sahifali ilovalar (SPA): Preact'ning samarali render qilishi va kichik hajmi uni silliq va sezgir foydalanuvchi interfeysini saqlab qolish uchun unumdorlik muhim bo'lgan SPA'lar yaratish uchun ideal qiladi. Bunga misol sifatida tezkor o'zaro ta'sirlar muhim bo'lgan oddiy CRM ilovasini keltirish mumkin.
• O'rnatilgan tizimlar: Preact'ning minimal hajmi va samarali ishlashi uni resurslar cheklangan o'rnatilgan tizimlar uchun mos qiladi. Kichik ekranga ega aqlli uy qurilmasini tasavvur qiling. Preact haddan tashqari resurslarni iste'mol qilmasdan sezgir va samarali UI taqdim etishi mumkin.
• Progressiv veb-ilovalar (PWA): PWA'lar tez yuklanish vaqtlari va oflayn imkoniyatlardan foyda ko'radi. Preact'ning kichik hajmi tezroq yuklanish va yaxshilangan unumdorlikka hissa qo'shib, PWA tajribasini oshiradi. Oflayn rejimda ishlaydigan sayohat qo'llanmasi ilovasini o'ylab ko'ring.
• Resurslari cheklangan veb-saytlar: Unumdorlik va sahifa og'irligi muhim bo'lgan veb-saytlar uchun Preact React'ga nisbatan sezilarli afzalliklarni taklif qilishi mumkin. Bu, ayniqsa, sekin internet ulanishiga ega hududlardagi foydalanuvchilarga mo'ljallangan veb-saytlar uchun to'g'ri keladi.
• Tezkor prototiplar: Preact React'ga qaraganda kamroq xususiyatlarga ega bo'lgani uchun prototipni ishga tushirish osonroq.

Preact va React: Asosiy farqlar

Preact React uchun to'g'ridan-to'g'ri o'rinbosar bo'lishni maqsad qilgan bo'lsa-da, ikki kutubxona o'rtasida ba'zi asosiy farqlar mavjud:

• Hajmi: Yuqorida aytib o'tilganidek, Preact React'dan ancha kichik (3KB ga qarshi 40KB).
• Xususiyatlar: React kengroq xususiyatlarni, jumladan, Context API, Suspense va concurrent mode kabi ilg'or xususiyatlarni taklif etadi. Preact React'ning asosiy funksionalligiga e'tibor qaratadi va bu ilg'or xususiyatlarning ba'zilarini o'tkazib yuboradi.
• Sintetik hodisalar: React turli brauzerlarda hodisalarni normallashtiradigan sintetik hodisalar tizimidan foydalanadi. Preact mahalliy brauzer hodisalaridan foydalanadi, bu esa unumdorlikni oshirishi mumkin, ammo kross-brauzer mosligi muammolarini ehtiyotkorlik bilan hal qilishni talab qilishi mumkin.
• createElement: React virtual DOM tugunlarini yaratish uchun `React.createElement` dan foydalanadi. Preact to'g'ridan-to'g'ri funksiya chaqiruvlariga aylanadigan JSX'ga tayanadi.
• PropType tekshiruvi: React'da komponentlar o'rtasida uzatiladigan ma'lumotlarni tekshirish uchun `PropTypes` mavjud. Preact'da esa o'rnatilgan mexanizm yo'q.

Preact bilan ishlashni boshlash

Preact bilan ishlashni boshlash juda oson. Siz turli xil vositalar va yondashuvlardan foydalanishingiz mumkin, jumladan:

create-preact-app yordamida

Yangi Preact loyihasini boshlashning eng oson yo'li bu create-preact-app'dan foydalanishdir. Bu buyruqlar satri vositasi bo'lib, u ishlab chiqish serveri va tuzish jarayoni bilan asosiy Preact loyihasini sozlaydi.

            npx create-preact-app my-preact-app
            

              
                Copy
              
            
          

Ushbu buyruq `my-preact-app` nomli yangi katalog yaratadi va unda asosiy Preact loyiha tuzilmasi bo'ladi. Keyin siz katalogga o'tib, ishlab chiqish serverini ishga tushirishingiz mumkin:

            cd my-preact-app
npm start
            

              
                Copy
              
            
          

Qo'lda sozlash

Siz Preact loyihasini qo'lda ham sozlashingiz mumkin. Bu asosiy HTML faylini yaratish, Preact va kerakli bog'liqliklarni o'rnatish va Webpack yoki Parcel kabi vositalar yordamida tuzish jarayonini sozlashni o'z ichiga oladi.

Birinchi navbatda, `index.html` faylini yarating:

            <!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>My Preact App</title>
</head>
<body>
  <div id="app"></div>
  <script src="bundle.js"></script>
</body>
</html>
            

              
                Copy
              
            
          

Keyin Preact va htm'ni o'rnating:

            npm install preact htm
            

              
                Copy
              
            
          

Quyidagi tarkibga ega `index.js` faylini yarating:

            import { h, render } from 'preact';
import htm from 'htm';

const html = htm.bind(h);

function App() {
  return html`<div>Hello, Preact!</div>`;
}

render(html`<${App} />`, document.getElementById('app'));
            

              
                Copy
              
            
          

Nihoyat, kodingizni to'plash uchun Webpack yoki Parcel yordamida tuzish jarayonini sozlang.

Misol: Preact'da oddiy hisoblagich komponenti

Bu Preact'dagi oddiy hisoblagich komponentiga misol:

            import { h, useState } from 'preact';

function Counter() {
  const [count, setCount] = useState(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
    </div>
  );
}

export default Counter;
            

              
                Copy
              
            
          

Ushbu komponent hisoblagich holatini boshqarish uchun `useState` hook'idan foydalanadi. `increment` funksiyasi tugma bosilganda holatni yangilaydi. Bu React kodiga o'xshashligini ko'rsatadi.

Preact ekotizimi va hamjamiyati

Preact ekotizimi React'nikidan kichikroq bo'lsa-da, u hali ham turli xil foydali plaginlar va kutubxonalarni taklif etadi. Mana bir nechta diqqatga sazovor misollar:

• preact-router: Preact ilovalari uchun oddiy va yengil router.
• preact-compat: React komponentlarini Preact ilovalarida ishlatish imkonini beruvchi moslik qatlami.
• preact-render-to-string: Preact komponentlarini satrlarga render qilish uchun kutubxona, server tomonida renderlash uchun foydali.
• preact-helmet: Hujjat sarlavhasi metama'lumotlarini, masalan, sarlavha va meta teglarni boshqarish uchun kutubxona.

Preact hamjamiyati faol va qo'llab-quvvatlaydi. Siz Preact GitHub repozitoriysi, Preact Slack kanali va turli onlayn forumlar va hamjamiyatlarda yordam va resurslarni topishingiz mumkin.

Preact'dan foydalanish bo'yicha eng yaxshi amaliyotlar

Preact'dan maksimal darajada foydalanish uchun quyidagi eng yaxshi amaliyotlarni ko'rib chiqing:

• Hajm uchun optimallashtirish: Bog'liqliklarni minimallashtirish va kodingizni hajm bo'yicha optimallashtirish orqali Preact'ning kichik hajmidan foydalaning. Ishlatilmaydigan kodni olib tashlash uchun Webpack'ning tree shaking kabi vositalaridan foydalaning.
• ES modullaridan foydalanish: Kodni tartibga solishni yaxshilash va zamonaviy JavaScript xususiyatlaridan foydalanish uchun ES modullaridan foydalaning.
• Unumdorlikni profillash: Ilovangizning unumdorligini profillash va optimallashtirish uchun joylarni aniqlash uchun brauzer ishlab chiquvchi vositalaridan foydalaning.
• `preact-compat`ni ehtiyotkorlik bilan ko'rib chiqing: `preact-compat` React komponentlaridan foydalanishga imkon bersa-da, unumdorlikni oshirish uchun ularni Preact'da mahalliy ravishda qayta yozishga harakat qiling. Uni faqat mutlaqo zarur bo'lganda ishlating.
• Kechiktirilgan yuklash (Lazy Loading): Dastlabki yuklanish vaqtini yaxshilash va umumiy sahifa og'irligini kamaytirish uchun komponentlar va resurslar uchun kechiktirilgan yuklashni amalga oshiring.
• Server tomonida renderlash (SSR): SEO va dastlabki yuklanish vaqtini yaxshilash uchun server tomonida renderlashni o'rganing. `preact-render-to-string` kabi kutubxonalar bu borada yordam berishi mumkin.

Xulosa

Preact tez, yengil va samarali front-end kutubxonasini izlayotgan dasturchilar uchun React'ga jozibador muqobil taklif etadi. Uning kichik hajmi, React bilan mosligi va soddalashtirilgan ishlab chiqish jarayoni uni mobil ilovalar, SPA'lar, o'rnatilgan tizimlar va unumdorlik muhim bo'lgan veb-saytlar uchun ajoyib tanlovga aylantiradi.

React kuchli va ko'p funksiyali kutubxona bo'lib qolayotgan bo'lsa-da, Preact unumdorlik va soddalikni birinchi o'ringa qo'yadigan dasturchilar uchun qimmatli variantni taqdim etadi. Har bir kutubxonaning kuchli va zaif tomonlarini tushunib, dasturchilar o'zlarining maxsus loyiha talablariga qaysi vosita eng mos kelishi haqida ongli qaror qabul qilishlari mumkin.

Murakkab veb-ilova yoki oddiy mobil ilova yaratayotgan bo'lsangiz ham, Preact'ni React'ga kuchli va yengil muqobil sifatida ko'rib chiqishga arziydi.

Qo'shimcha manbalar

• Preact rasmiy veb-sayti
• Preact GitHub repozitoriysi
• preact-compat GitHub repozitoriysi
• create-preact-app GitHub repozitoriysi