آیا باید از React به Svelte مهاجرت کرد؟

React و Svelte دو فریمورک فرانت-اند جاوااسکریپت هستند که در دنیای توسعه دهندگان بسیار رایج اند. هر دو ابزار یک رویکرد سازنده برای توسعه برنامه‌های مختلف وب در اختیار توسعه دهندگان قرار می‌دهند. در این مقاله، ما به قدرت Svelte خواهیم پرداخت و اینکه آیا ارزش دارد که مورد توجه قرار بگیرد.

DOM مجازی در مقابل کامپایلر

React از یک DOM مجازی برای تفسیر کد برنامه در زمان اجرا استفاده می‌کند. این مقدار مشخصی از کد سربار را به همراه دارد که برای نظارت و به روزرسانی DOM در موتور جاوااسکریپت مرورگر اجرا می‌شود. DOM مجازی هرگونه تغییر را نظارت می‌کند و بهترین روش ممکن را برای ایجاد این تغییرات در DOM واقعی به کار می‌گیرد.

اما Svelte دارای کامپایلری است که وقتی برنامه‌ای ایجاد می‌کنید، آن را به کد جاوااسکریپت ترجمه می‌کند. این اطمینان می‌دهد که وقتی برنامه شما در DOM در حال اجرا است، هیچ کد فریمورکی در مرورگر تزریق نمی‌شود. در زمان ساخت، Svelte اجرا شده و کامپوننت‌ها را به یک کد ضروری بسیار کارآمد ترجمه کرده که DOM را به روز می‌کند. به این ترتیب می‌توانید کدهای بسیار کارآمدی بنویسید.

سهولت استفاده

یادگیری React زمانی می‌تواند دلهره آور باشد که شما مجبور باشید چیزهایی مانند JSX و CSS-in-JS را یاد بگیرید تا اساسی‌ترین برنامه‌ها را بسازید.

در مقایسه با React ،درک مفاهیم و راحتی شروع به کار Svelte ساده‌تر است؛ زیرا قسمت عمده آن HTML، CSS و JS ساده است و از نزدیک با مدل‌های کلاسیک توسعه وب HTML ، CSS و JavaScript همراه می‌باشد. این کار یادگیری Svelte را بسیار راحت‌تر از React می‌کند. از آنجا که فقط چند افزونه به HTML و JavaScript وارد می‌کند، مفاهیم کمتری برای یادگیری وجود دارد که لازم نیست با React یاد بگیرید.

این نمونه‌ای از یک کامپوننت svelte. است.

آنچه در اینجا داریم HTML ، CSS و JavaScript است:

<style>
  h1 {
    color: green;
  }
</style>

<script>
  let name = 'Nefe';
</script>

<h1>Hello, {name}!</h1>

تجربه بهتر توسعه

در حالی که کد کمتر همیشه به معنای کد بهتر و کاربردی نیست، اما یک نقطه قوت برای Svelte این است که شما کد کمتری را باید در مقایسه با React بنویسید. در اینجا نمونه‌ای از برنامه اصلی ساخته شده با Svelte آورده شده است:

<script>
  let a = 1;
  let b = 2;
</script>

<input type="number" bind:value={a}>
<input type="number" bind:value={b}>

<p>{a} + {b} = {a + b}</p>

در زیر یک قطعه کد از همان برنامه ساخته شده با React وجود دارد. مشاهده می‌کنید کهSvelte  تنها 9 خط کد است، در حالی که React دارای 21 خط کد می‌باشد که این تفاوت چشمگیری است. نکته جالب در مورد برنامه Svelteاین است که به هیچ وجه کاربرد کمتری ندارد.

import React, { useState } from 'react';

export default () => {
  const [a, setA] = useState(1);
  const [b, setB] = useState(2);

  function handleChangeA(event) {
    setA(+event.target.value);
  }
  function handleChangeB(event) {
    setB(+event.target.value);
  }

  return (
    <div>
      <input type="number" value={a} onChange={handleChangeA}/>
      <input type="number" value={b} onChange={handleChangeB}/>
      <p>{a} + {b} = {a + b}</p>
    </div>
  );
};

Svelte به صورت خودکار کامپوننت‌های کاملی را برای شما اکسپورت می‌کند. با Svelte دیگر نیازی به نگرانی در مورد فراموش کردن کامپوننت‌ها ندارید، زیرا آنها به طور پیش فرض اکسپورت می‌شوند و برای ایمپورت توسط سایر کامپوننت‌ها آماده هستند.

Svelte با افکت‌ها و انیمیشن‌های داخلی همراه است. برای ایجاد انیمیشن‌هایی که در React ایجاد می‌کنید نیازی به استفاده از کتابخانه شخص ثالث نیست.

svelte/motion، svelte/transfer، svelte/animated و svelte/easing ماژول‌های قدرتمندی برای ایجاد انیمیشن‌های شگفت انگیز به صورت out-of-the-box در اختیار ما قرار می‌دهند.

با Svelte دیگر نگران نوشتن کلاس‌ها یا استایل‌های منحصر به فرد نیستید. همچنین استایل‌ها در تگ‌های مخصوص خود دارای کامپوننت‌های محدود هستند و این به شما امکان می‌دهد یک استایل را انعطاف پذیر کنید.

این برای شما بسیار سازنده است و سردرگمی کمتری هم دارد و کار شما را راحت‌تر می‌کند. همچنین بدان معنی است که شما نیازی به یادگیری نحوه استفاده از کتابخانه‌هایی مانند Styled-Components و Emotion ندارید. در نتیجه می‌توانید کد را سریعتر بنویسید و اجرا کنید.

کارایی و عملکرد

Svelte در مرحله کامپایل کار می‌کند. هنگامی که یک برنامه Svelte را اجرا می‌کنید، کد شما را در vanilla javascript به صورت بسیار بهینه سازی شده کامپایل می‌کند. این بدان معنی است که هیچ کد فریمورکی در زمان اجرا اضافه نمی‌شود. این امر عملکرد کلی برنامه را بهبود می‌بخشد، زیرا مرورگر کار کمتری برای انجام دارد.

Svelte بدون اتکا به یک واسطه یا هرگونه تکنیک پیچیده DOM را به روز می‌کند. کامپایلر Svelte تغییرات متغیرهای شما را پیگیری کرده و متناسب با آن HTML را به روز می‌کند.

این فرایند از طریق کد شما بررسی می‌شود و کامپوننت‌های وابسته به متغیرهای شما را بررسی کرده و با تغییر آنها، کامپوننت‌های سازنده را به روز می‌کند. به این ترتیب،Svelte بدون نیاز به API شخص ثالث عمل می‌کند. از طرف دیگر، با فراخوانی this.state یا استفاده از قلاب useState، باید به React گفته شود تا تغییرات را مشاهده کند.

<script>
  let count = 0;
  $: doubled = count * 2;
  function handleClick() {
    count += 1;
  }
</script>

<button on:click="{handleClick}">Click me!</button>

<p>{count} doubled is {doubled}</p>

در اینجا ما یک متغیر count و یک doubled داریم. Doubled به مقدار count وابسته است. اگر بخواهیم در React مقدار doubled را به روز کنیم، می‌گوییم (count)setDoubled.

با این حال، شناسه جاوااسکریپت :$ به Svelte می‌گوید که doubled متغیری است که به count وابسته است و Svelte می‌داند هر زمان که count تغییر می‌کند، به طور خودکار doubled را به روزرسانی کند.

فایل bundle.js در Svelte حجمی به مراتب کمتر از React دارد. این تفاوت بسیار زیادی را از لحاظ عملکرد ایجاد می‌کند، به ویژه در دستگاه‌های کم مصرف یا برنامه‌هایی که پردازش آنها وابسته به CPU است. Svelte همچنین هنگام نصب اندازه بسته نرم‌افزاری کوچکتری دارد.

جمع بندی

اکوسیستم Svelte به سرعت در حال توسعه است. با معرفی Sapper که یک نسخه Svelte از Next.js است و از Svelte Native برای ساخت برنامه‌های تلفن همراه بومی بهره می‌گیرد، در حال رشد است تا به یک رقیب قوی‌تر در حوزه فناوری فرانت-اند تبدیل شود. حتما آن را بررسی و امتحان کنید و در پروژه‌های واقعی به کار بگیرید تا بتوانید برنامه‌های سریع Svelte بسازید.

مروری مختصر بر تولید برنامه‌های React

عیب یابی از برنامه‌های React ممکن است دشوار باشد، به خصوص هنگامی که کاربران با مشکلاتی روبه رو می‌شوند که تولید مجدد آنها دشوار است. اگر شما علاقه مند به نظارت Redux هستید، به منظور ردیابی خودکار خطاهای جاوااسکریپت و درخواست‌های شبکه و زمان بارگیری کامپوننت، LogRocket را امتحان کنید.

LogRocket مانند یک DVR برای برنامه‌های وب است که به معنای واقعی کلمه هر آنچه در برنامه React شما اتفاق می‌افتد را ضبط می‌کند. به جای حدس زدن اینکه چرا مشکلات رخ داده است، می‌توانید در هنگام بروز یک مشکل، درخواست را در هر وضعیتی جمع آوری کرده و گزارش دهید. LogRocket همچنین عملکرد برنامه شما، گزارش گیری با معیارهایی مانند بار CPU، استفاده از حافظه و موارد دیگر را کنترل می‌کند.

منبع