👋 سلام! به دنیای هیجان انگیز توسعه وب خوش آمدید! امروز، ما قصد داریم یک مفهوم جذاب را بررسی کنیم که روش ساخت اپلیکیشن های وب را متحول می کند. پس دست و پنجه نرم کنید و بیایید داخل شیرجه بزنیم!
Svelte یکی از محبوب ترین فریم ورک های فرانت اند است که توسعه دهندگان آن را دوست داشتند و توسط روزنامه نگار ریچ هریس ساخته شد. با این حال، رویکرد آن به واکنش پذیری و موضع در Virtual DOM (VDOM) در مقایسه با رقبای React و Vue همیشه موضوع بحث بوده است.
در حالی که رویکرد Svelte منطقی است، شرایطی وجود دارد که عدم وجود VDOM می تواند محدود کننده باشد. اینجاست که یک آزمایش فکری جدید وارد می شود: ترکیبی از Svelte و VDOM.
اما قبل از اینکه به آزمایش فکری بپردازیم، اجازه دهید نگاهی دقیق‌تر به VDOM و رویکرد بدون VDOM Svelte بیندازیم.
VDOM چیست؟
یک DOM مجازی یک کپی از DOM واقعی است که در حافظه وجود دارد، نه روی صفحه. هنگام ایجاد تغییرات در DOM واقعی، ممکن است کند و ناکارآمد باشد. از طرف دیگر، تغییر DOM مجازی بسیار سریعتر و آسانتر است. با استفاده از یک DOM مجازی، می توانید ابتدا تغییراتی در نسخه مجازی ایجاد کنید و سپس آن را با DOM واقعی مقایسه کنید تا تفاوت ها را پیدا کنید. به این تفاوت‌ها وصله‌ها گفته می‌شود که می‌توان آنها را روی DOM واقعی اعمال کرد تا از رنگ‌آمیزی‌ها و جریان‌های مجدد غیرضروری جلوگیری شود.
چارچوب هایی مانند React و Vue از DOM های مجازی استفاده می کنند تا وب سایت ها را پاسخگوتر و کارآمدتر کنند. آنها ایجاد و به روز رسانی DOM مجازی را برای شما انجام می دهند. با این حال، Svelte رویکرد متفاوتی دارد و از DOM مجازی استفاده نمی کند. در عوض، Svelte کد شما را در جاوا اسکریپت وانیلی بسیار بهینه‌سازی شده کامپایل می‌کند و DOM را مستقیماً بدون سربار DOM مجازی به‌روزرسانی می‌کند.
Svelte’s no VDOM Architecture
Svelte، یکی از محبوب ترین فریم ورک های فرانت اند، با رقبای خود React و Vue متفاوت است زیرا از DOM مجازی استفاده نمی کند. در حالی که DOM مجازی به‌روزرسانی‌های سریعتر و روان‌تری را امکان‌پذیر می‌کند، نیاز به دو نسخه از DOM و مقایسه‌های پیچیده دارد. Svelte با کامپایل کردن کد در ماژول های کوچک جاوا اسکریپت که مستقیماً DOM واقعی را به روز می کند، یک رویکرد منحصر به فرد را اتخاذ می کند. این کد را در زمان کامپایل تجزیه و تحلیل می کند تا دقیقا بداند چه چیزی باید تغییر کند و وب سایت شما را سریعتر و کوچکتر می کند. نحو خاص Svelte کد را واکنشی می کند و به طور خودکار به تغییرات داده یا حالت پاسخ می دهد.
مزایای بدون VDOM
یکی از مزایای اصلی معماری بدون DOM مجازی Svelte سرعت است. با حذف نیاز به ایجاد و به‌روزرسانی دو نسخه از DOM و مقایسه تفاوت‌ها، Svelte می‌تواند سریعتر و ساده‌تر از استفاده از DOM مجازی باشد. همچنین منجر به اندازه کوچکتر بسته نرم افزاری می شود، زیرا فریم ورک ها یا کتابخانه های کمتری یا بدون نیاز به بارگیری نیاز دارند، که به نوبه خود زمان بارگذاری و مصرف پهنای باند برنامه های کاربردی وب را بهبود می بخشد.
معماری بدون DOM مجازی Svelte همچنین به توسعه دهندگان کنترل و انعطاف بیشتری در مورد نحوه به روز رسانی DOM واقعی می دهد. آنها می‌توانند از دستکاری مستقیم، اتصال داده‌ها، قالب‌بندی یا هر تکنیکی که متناسب با نیازشان است استفاده کنند.
معایب بدون VDOM
با این حال، فقدان معماری DOM مجازی به معنای مسئولیت و پیچیدگی بیشتر برای توسعه دهندگان است. این شامل مدیریت و بهینه‌سازی به‌روزرسانی‌های DOM واقعی، رسیدگی به مشکلات عملکرد، مدیریت حافظه، مدیریت رویداد و سازگاری بین مرورگرها است. این می تواند منجر به انتزاع و راحتی کمتری برای توسعه دهندگان شود، زیرا ممکن است نیاز به نوشتن کد بیشتر یا استفاده از ابزارهای بیشتر برای دستیابی به نتایج مشابه بدون مزایای چارچوب یا کتابخانه داشته باشند.
نقطه ضعف دیگر این است که هنگام به روز رسانی مستقیم DOM واقعی، توسعه دهندگان باید داده ها و UI را به صورت دستی همگام کنند تا از ناهماهنگی جلوگیری شود. اگرچه این برای هر رویکردی که DOM واقعی را مستقیماً به روز می کند، نه فقط Svelte، صدق می کند.
چرا در Svelte به VDOM نیاز داریم؟
همانطور که قبلا در مورد استفاده از VDOM در Svelte صحبت کردیم، مزایا و معایب وجود دارد. با این حال، داشتن گزینه ای برای فعال کردن VDOM در Svelte می تواند مزایایی را برای توسعه دهندگان و متخصصانی که به ویژگی های پیشرفته تر یا عملکرد بهتر در سناریوهای خاص نیاز دارند، ارائه دهد.
به عنوان مثال، فعال کردن VDOM در Svelte می‌تواند به توسعه‌دهندگان این امکان را بدهد که از کتابخانه‌های مبتنی بر VDOM مانند React Framer Motion برای انیمیشن‌های پیشرفته یا دیگر کتابخانه‌های مبتنی بر VDOM برای سایر ویژگی‌هایی که Svelte ممکن است به صورت بومی پشتیبانی نمی‌کند، استفاده کنند. این می تواند انعطاف پذیری و گزینه های بیشتری را برای توسعه دهندگان برای ساخت برنامه های پیچیده تر با Svelte فراهم کند.
علاوه بر این، فعال کردن VDOM در Svelte می تواند عملکرد را در سناریوهای خاصی بهبود بخشد، مانند زمانی که با فیدهای بزرگ یا SPA با چندین عملیات DOM سروکار دارید. این می تواند به Svelte کمک کند تا از نظر عملکرد و مقیاس پذیری با سایر چارچوب های مبتنی بر VDOM رقابتی باقی بماند.
با این حال، فعال کردن VDOM در Svelte مجموعه ای از معاوضه های خاص خود را نیز دارد، مانند افزایش پیچیدگی و تناقضات احتمالی بین DOM مجازی و واقعی. توسعه دهندگان باید مزایا و معایب فعال کردن VDOM در Svelte را بسنجید و تصمیم بگیرند که آیا ارزش این پیچیدگی و مشکلات احتمالی را دارد یا خیر.
VDOM فرضی در Svelte
بسیاری از توسعه دهندگان Svelte در طول مسیر توسعه خود با این مشکلات مواجه شده اند. در حالی که عملکرد Svelte استثنایی است، کاستی هایی وجود دارد که با استفاده طولانی مدت آشکارتر می شود.
چه می شود اگر Svelte یک DOM مجازی داشت که می توانست به صورت اختیاری توسط توسعه دهندگان در سطح کامپوننت فعال شود؟
مثلا:
<svelte:option vdom />
<script lang="ts">
export let count: number = 0;
</script>
<button>
{#if count > 0}
Clicked {count} times
{:else}
Click me!
{/if}
</button>
در مثال بالا، تگ svelte:option شامل یک ویژگی vdom است که یک مقدار بولی می گیرد و VDOM را به طور خاص برای آن جزء فعال می کند.
مثالی که تاکنون دیده‌ایم، برای پیاده‌سازی در مخزن مخزن نیز نسبتاً ساده است. برای استفاده از کتابخانه‌های VDOM مانند Million.js یا Hyper DOM با Svelte، توابع کمکی مورد استفاده Svelte برای دستکاری‌های DOM باید به‌روزرسانی شوند. با فعال بودن VDOM، یک DOM مجازی به جای یک DOM معمولی ایجاد می شود. هر زمان که یک جزء تغییر کند، DOM مجازی می تواند با استفاده از کتابخانه های VDOM به روز شود و سپس نصب شود. این رویکرد به توسعه دهندگان این امکان را می دهد که از لمس DOM واقعی خودداری کنند، که می تواند منجر به افزایش عملکرد قابل توجهی شود، به ویژه در مواردی که چندین عملیات DOM مورد نیاز است.
اجرای نمونه
بیشتر دستکاری‌های DOM از یک فایل انجام می‌شود – svelte/src/runtime/internal/dom.ts، ما فقط می‌توانیم این 757 loc (در زمان نوشتن) را برای استفاده از برخی کتابخانه‌های VDOM یا پیاده‌سازی سفارشی VDOM پورت کنیم. مثلا،
در زیر کد فایل svelte dom.ts آمده است
export function append(target: Node, node: Node) {
target.appendChild(node);
}
ما می توانیم این را به چیزی شبیه به این تغییر دهیم
export function append(target: Node, vnode:(props) => VNode) {
const block = block(vnode)
mount(block, target)
}
در مثال بالا، دستکاری مستقیم DOM را با APIهای پیاده سازی DOM مجازی Million.js تغییر دادیم.
به طور مشابه، ما می توانیم تمام توابع را برای VDOM پورت کنیم و آن را به صورت مشروط فعال کنیم. این بود که ما ویژگی جدید را در svelte پیاده سازی کردیم.
آیا آن است؟
Svelte یک چارچوب قدرتمند و کارآمد است که در سال های اخیر محبوبیت زیادی پیدا کرده است. اخیراً، تیم Svelte برنامه‌های خود را برای نسخه‌های 4 و 5 بعدی اعلام کرده است. در حالی که هیچ تغییر مهمی وجود نخواهد داشت، چارچوب به تکامل و بهبود ادامه خواهد داد.
VDOM اختیاری فقط یک ویژگی تخیلی است که svelte را حتی عالی تر و باحال تر می کند. حتی ما می توانیم از واردات پویا (واردات تنبل) VDOM استفاده کنیم تا بتوانیم اندازه اولیه بسته نرم افزاری جاوا اسکریپت را کاهش دهیم.
اگر این در Svelte فرود بیاید چه اتفاقی می افتد؟
موفقیت Svelte به این معنی نیست که سایر چارچوب ها از بین خواهند رفت. در واقع، چشم انداز فریم ورک فرانت اند دائماً در حال تغییر است و فریمورک های جدید دائماً در حال ظهور هستند. هر فریم ورک دارای نقاط قوت و ضعف خاص خود است و توسعه دهندگان باید ابزار مناسبی را برای نیازهای خاص خود انتخاب کنند.
به عنوان مثال، React یک چارچوب بسیار محبوب است که دارای یک جامعه بزرگ و اکوسیستم وسیعی از کتابخانه ها و ابزار است. از طرف دیگر، Vue به راحتی در استفاده خود شناخته شده است و در سراسر جهان محبوبیت پیدا کرده است. Angular یک چارچوب قوی و جامع است که برای ساخت برنامه های کاربردی در مقیاس بزرگ ایده آل است. Ember، Solid، Astro، Qwik، Marko، Lit و بسیاری دیگر همگی نقاط قوت و فروش منحصر به فرد خود را دارند.
در نهایت، انتخاب چارچوب به عوامل مختلفی از جمله الزامات پروژه، تخصص تیم و ترجیحات شخصی بستگی دارد. اگرچه Svelte ممکن است فریم ورک فرانت اند نهایی نباشد، رویکرد منحصر به فرد و ویژگی های نوآورانه آن مطمئناً آن را به یک انتخاب محبوب در میان توسعه دهندگان تبدیل کرده است.
نتیجه
در نهایت، ما در حال بیدار شدن از آزمایش فکری هستیم، Svelte ممکن است خوب باشد یا نباشد، اما چارچوب خوبی برای شروع سفر توسعه وب است. ترکیبی از svelte و vdom ممکن است در حال حاضر چیزی نباشد، اما ممکن است چیزی در آینده باشد. ممکن است چارچوب دیگری بر اساس svelte با vdom ایجاد شود.
اگر این پست را آموزنده و مفید یافتید، حتماً مطالب بیشتری مانند این را دنبال کنید تا مهارت‌های توسعه وب خود را افزایش دهید و با آخرین روندها و فناوری‌ها در این زمینه به‌روز باشید.
