Preact: یک جایگزین سبک وزن برای React در توسعه وب مدرن

در چشم انداز همیشه در حال تحول توسعه وب، انتخاب کتابخانه یا چارچوب مناسب فرانت اند برای ساخت برنامه های کاربردی با کارایی بالا و کاربرپسند بسیار مهم است. در حالی که React به یک نیروی مسلط تبدیل شده است، اندازه و پیچیدگی آن می تواند گاهی اوقات مانع ایجاد کند، به خصوص برای پروژه هایی که عملکرد در آنها از اهمیت بالایی برخوردار است. اینجاست که Preact می درخشد - یک جایگزین سریع و سبک وزن برای React با یک API مشابه، که یک راه حل قانع کننده برای توسعه دهندگانی است که به دنبال یک تجربه توسعه ساده هستند.

Preact چیست؟

Preact یک کتابخانه جاوا اسکریپت است که یک DOM مجازی برای ساخت رابط های کاربری فراهم می کند. هدف آن این است که جایگزینی drop-in برای React باشد و عملکرد اصلی React را با ردپای بسیار کوچکتر ارائه دهد. در حالی که وزن React حدود 40 کیلوبایت است (کوچک و فشرده شده)، Preact تنها 3 کیلوبایت وزن دارد، که آن را به یک انتخاب ایده آل برای برنامه هایی تبدیل می کند که اندازه و عملکرد در آنها بسیار مهم است.

Preact را به عنوان پسر عموی لاغرتر و سریعتر React در نظر بگیرید. این کتابخانه همان مزایای اصلی را ارائه می دهد - معماری مبتنی بر کامپوننت، diffing DOM مجازی و پشتیبانی از JSX - اما با تمرکز بر سادگی و کارایی. این امر آن را به ویژه برای برنامه های تلفن همراه، برنامه های تک صفحه ای (SPA) و سیستم های تعبیه شده که محدودیت منابع در آنها نگران کننده است، جذاب می کند.

مزایای کلیدی استفاده از Preact

• اندازه کوچکتر: مهمترین مزیت Preact اندازه بسیار کوچک آن است. یک کتابخانه کوچکتر به معنای زمان دانلود سریعتر، بهبود عملکرد بارگذاری اولیه و تجربه کاربری بهتر، به ویژه در شبکه ها و دستگاه های کندتر است.
• عملکرد سریعتر: الگوریتم diffing DOM مجازی کارآمد Preact و کدنویسی کوچکتر به رندر سریعتر و بهبود عملکرد کلی کمک می کند. این می تواند منجر به یک رابط کاربری پاسخگوتر و روان تر شود.
• سازگاری با React: API Preact تا حد زیادی با React سازگار است، که انتقال پروژه های React موجود به Preact یا استفاده از Preact با کامپوننت های React را آسان می کند. این سازگاری همچنین به این معنی است که توسعه دهندگان آشنا با React می توانند به سرعت Preact را یاد بگیرند و از آن استفاده کنند. توجه داشته باشید که این سازگاری 100٪ نیست و ممکن است نیاز به برخی تنظیمات باشد.
• پشتیبانی از ماژول های ES: Preact به گونه ای طراحی شده است که به طور یکپارچه با ماژول های ES کار کند، و به توسعه دهندگان اجازه می دهد از ویژگی های مدرن جاوا اسکریپت استفاده کنند و سازماندهی کد را بهبود بخشند.
• توسعه ساده شده: سطح API کوچکتر Preact و تمرکز بر سادگی، یادگیری و استفاده از آن را آسان تر می کند، منحنی یادگیری را برای توسعه دهندگان جدید کاهش می دهد و روند توسعه را ساده می کند.
• اکوسیستم عالی: در حالی که اکوسیستم Preact کوچکتر از React است، در حال رشد است و طیف وسیعی از افزونه ها و کتابخانه های مفید، از جمله مسیریابی، مدیریت وضعیت و کامپوننت های UI را ارائه می دهد.

موارد استفاده برای Preact

Preact به ویژه برای سناریوهای زیر مناسب است:

• برنامه های موبایل: اندازه کوچک و عملکرد سریع Preact آن را به یک انتخاب عالی برای ساخت برنامه های موبایل تبدیل می کند، جایی که محدودیت منابع و تجربه کاربری بسیار مهم است. به عنوان مثال، یک برنامه خبری را در نظر بگیرید که کاربران را در مناطقی با پهنای باند محدود هدف قرار می دهد. Preact می تواند زمان بارگذاری اولیه بسیار سریع تری را در مقایسه با React ارائه دهد، که منجر به تجربه کاربری بهتری می شود.
• برنامه های تک صفحه ای (SPA): رندر کارآمد و ردپای کوچک Preact آن را برای ساخت SPA ها ایده آل می کند، جایی که عملکرد برای حفظ یک رابط کاربری روان و پاسخگو بسیار مهم است. یک مثال می تواند یک برنامه CRM ساده باشد که در آن تعاملات سریع ضروری است.
• سیستم های تعبیه شده: اندازه حداقل و عملکرد کارآمد Preact آن را برای سیستم های تعبیه شده که منابع در آنها محدود است، مناسب می کند. یک دستگاه خانه هوشمند با یک صفحه نمایش کوچک را تصور کنید. Preact می تواند یک UI پاسخگو و کارآمد را بدون مصرف بیش از حد منابع ارائه دهد.
• برنامه های وب پیشرو (PWA): PWA ها از زمان بارگذاری سریع و قابلیت های آفلاین بهره می برند. اندازه کوچک Preact به بارگذاری سریعتر و بهبود عملکرد کمک می کند و تجربه PWA را بهبود می بخشد. یک برنامه راهنمای سفر آفلاین را در نظر بگیرید.
• وب سایت هایی با منابع محدود: برای وب سایت هایی که عملکرد و وزن صفحه در آنها بسیار مهم است، Preact می تواند یک مزیت قابل توجه نسبت به React ارائه دهد. این امر به ویژه برای وب سایت هایی که کاربران را در مناطقی با اتصالات اینترنتی کند هدف قرار می دهند، صادق است.
• نمونه های اولیه سریع: از آنجایی که Preact ویژگی های کمتری نسبت به React دارد، راه اندازی و اجرای یک نمونه اولیه ساده تر است.

Preact در مقابل React: تفاوت های کلیدی

در حالی که Preact هدف دارد که جایگزینی drop-in برای React باشد، تفاوت های کلیدی بین این دو کتابخانه وجود دارد:

• اندازه: همانطور که قبلا ذکر شد، Preact به طور قابل توجهی کوچکتر از React است (3 کیلوبایت در مقابل 40 کیلوبایت).
• ویژگی ها: React طیف گسترده تری از ویژگی ها را ارائه می دهد، از جمله ویژگی های پیشرفته مانند Context API، Suspense و حالت همزمان. Preact بر عملکرد اصلی React تمرکز دارد و برخی از این ویژگی های پیشرفته تر را حذف می کند.
• رویدادهای مصنوعی: React از یک سیستم رویداد مصنوعی استفاده می کند که رویدادها را در مرورگرهای مختلف عادی می کند. Preact از رویدادهای بومی مرورگر استفاده می کند، که می تواند عملکرد را بهبود بخشد اما ممکن است نیاز به رسیدگی دقیق تری به مسائل مربوط به سازگاری بین مرورگرها داشته باشد.
• createElement: React از `React.createElement` برای ایجاد گره های DOM مجازی استفاده می کند. Preact به تبدیل JSX مستقیماً به فراخوانی های تابع متکی است.
• PropType Validation: React دارای `PropTypes` برای اعتبارسنجی داده هایی است که بین کامپوننت ها منتقل می شوند. Preact هیچ مکانیسم داخلی ندارد.

شروع کار با Preact

شروع کار با Preact ساده است. شما می توانید از انواع ابزارها و رویکردها، از جمله موارد زیر استفاده کنید:

استفاده از create-preact-app

آسان ترین راه برای شروع یک پروژه Preact جدید استفاده از create-preact-app است، یک ابزار خط فرمان که یک پروژه Preact پایه را با یک سرور توسعه و فرآیند ساخت راه اندازی می کند.

            npx create-preact-app my-preact-app
            

              
                Copy
              
            
          

این دستور یک دایرکتوری جدید به نام `my-preact-app` با یک ساختار پروژه Preact پایه ایجاد می کند. سپس می توانید به دایرکتوری بروید و سرور توسعه را شروع کنید:

            cd my-preact-app
npm start
            

              
                Copy
              
            
          

راه اندازی دستی

همچنین می توانید یک پروژه Preact را به صورت دستی راه اندازی کنید. این شامل ایجاد یک فایل HTML پایه، نصب Preact و هر گونه وابستگی لازم و پیکربندی یک فرآیند ساخت با استفاده از ابزارهایی مانند Webpack یا Parcel است.

ابتدا یک فایل `index.html` ایجاد کنید:

            <!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
              
            
          

سپس Preact و htm را نصب کنید:

            npm install preact htm
            

              
                Copy
              
            
          

یک فایل `index.js` با محتوای زیر ایجاد کنید:

            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
              
            
          

در نهایت، یک فرآیند ساخت را با استفاده از Webpack یا Parcel برای بسته بندی کد خود پیکربندی کنید.

مثال: یک کامپوننت شمارنده ساده در Preact

در اینجا یک مثال از یک کامپوننت شمارنده ساده در Preact آورده شده است:

            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
              
            
          

این کامپوننت از هوک `useState` برای مدیریت وضعیت شمارنده استفاده می کند. تابع `increment` هنگام کلیک روی دکمه، وضعیت را به روز می کند. این شباهت به کد React را نشان می دهد.

اکوسیستم و انجمن Preact

در حالی که اکوسیستم Preact کوچکتر از React است، همچنان انواع پلاگین ها و کتابخانه های مفید را ارائه می دهد. در اینجا چند نمونه قابل توجه آورده شده است:

• preact-router: یک روتر ساده و سبک وزن برای برنامه های Preact.
• preact-compat: یک لایه سازگاری که به شما امکان می دهد از کامپوننت های React در برنامه های Preact استفاده کنید.
• preact-render-to-string: یک کتابخانه برای رندر کردن کامپوننت های Preact به رشته ها، مفید برای رندر سمت سرور.
• preact-helmet: یک کتابخانه برای مدیریت فراداده هدر سند، مانند عنوان و تگ های متا.

انجمن Preact فعال و حامی است. می توانید راهنمایی و منابع را در مخزن Preact GitHub، کانال Preact Slack و انجمن ها و جوامع مختلف آنلاین پیدا کنید.

بهترین شیوه ها برای استفاده از Preact

برای استفاده حداکثری از Preact، بهترین شیوه های زیر را در نظر بگیرید:

• بهینه سازی برای اندازه: با به حداقل رساندن وابستگی ها و بهینه سازی کد خود برای اندازه، از اندازه کوچک Preact استفاده کنید. از ابزارهایی مانند tree shaking Webpack برای حذف کد استفاده نشده استفاده کنید.
• استفاده از ماژول های ES: از ماژول های ES برای بهبود سازماندهی کد و استفاده از ویژگی های مدرن جاوا اسکریپت استفاده کنید.
• پروفایل عملکرد: از ابزارهای توسعه دهنده مرورگر برای پروفایل کردن عملکرد برنامه خود و شناسایی زمینه ها برای بهینه سازی استفاده کنید.
• `preact-compat` را به ندرت در نظر بگیرید: در حالی که `preact-compat` به شما امکان می دهد از کامپوننت های React استفاده کنید، سعی کنید آنها را به طور بومی در Preact برای افزایش عملکرد بازنویسی کنید. فقط در صورت لزوم از آن استفاده کنید.
• بارگذاری تنبل: بارگذاری تنبل را برای کامپوننت ها و منابع پیاده سازی کنید تا زمان بارگذاری اولیه را بهبود بخشید و وزن کلی صفحه را کاهش دهید.
• رندر سمت سرور (SSR): رندر سمت سرور را برای بهبود SEO و زمان بارگذاری اولیه کاوش کنید. کتابخانه هایی مانند `preact-render-to-string` می توانند در این زمینه کمک کنند.

نتیجه گیری

Preact یک جایگزین قانع کننده برای React برای توسعه دهندگانی ارائه می دهد که به دنبال یک کتابخانه فرانت اند سریع، سبک وزن و کارآمد هستند. اندازه کوچک، سازگاری با React و روند توسعه ساده شده آن را به یک انتخاب عالی برای برنامه های موبایل، SPA ها، سیستم های تعبیه شده و وب سایت هایی تبدیل می کند که عملکرد در آنها بسیار مهم است.

در حالی که React یک کتابخانه قدرتمند و غنی از ویژگی ها باقی مانده است، Preact یک گزینه ارزشمند برای توسعه دهندگانی است که عملکرد و سادگی را در اولویت قرار می دهند. با درک نقاط قوت و ضعف هر کتابخانه، توسعه دهندگان می توانند تصمیمات آگاهانه ای در مورد اینکه کدام ابزار برای نیازهای خاص پروژه آنها مناسب تر است، اتخاذ کنند.

چه در حال ساخت یک برنامه وب پیچیده یا یک برنامه تلفن همراه ساده باشید، Preact ارزش این را دارد که به عنوان یک جایگزین قدرتمند و سبک وزن برای React در نظر گرفته شود.

منابع بیشتر

• وب سایت رسمی Preact
• مخزن Preact GitHub
• مخزن preact-compat GitHub
• مخزن create-preact-app GitHub