چرا SvelteJS می‌تواند بهترین فریمورک برای توسعه وب باشد

تا بحال برایتان این سوال پیش آمده که چرا SvelteJS می‌تواند بهترین فریمورک برای توسعه وب باشد؟برای فهمیدن این موضوع همراه ما باشید.

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

یک دهه پیش پاسخ به این سوال بسیار ساده بود. تنها کافی بود یک index.html ایجاد می‌کردید، برخی از تگ‌ها را به آن اضافه می‌کردید، به المان‌ها استایل css می‌دادید و با جی کوئری یا جاوااسکریپت کلیک روی بخش‌های مختلف را کنترل می‌کردید!

اما امروزه همه چیز تغییر کرده است. ما با ابزارهای ساخت، مسیریابی سمت کلاینت، فریمورک‌های ویژه با اسکریپت‌های جذاب برای زمان اجرا، استفاده از تمپلیت‌های مختلف و CSS-in-JS سر و کار داریم. اما چگونه موارد مهم را انتخاب کنیم و آنها را به کار بگیریم؟ اگر کسی نمی‌داند DOM چیست، چگونه به او آموزش دهیم که ری‌اکت چگونه از DOM مجازی استفاده می‌کند؟

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

بنابراین آنچه ما نیاز داریم یک حد وسط است. روشی برای شروع کار با مبانی پایه در حالی که از مفاهیم مدرن مانند توسعه کامپوننت محور، CSS مقیاس پذیر یا CSS آبشاری، الگوها، توابع اعلامی و غیره استفاده می‌کنید.

ورود به Svelte

SvelteJS یک فریمورک کاملا جدید است که تازه شروع به جلب توجه کرده است. برخی ممکن است آن را به عنوان محبوب‌ترین چارچوب در جاوااسکریپت بدانند. اما در واقع Svelte ابزاری برای کامپایل اجزای سازنده در مرحله ساخت است که به شما امکان می‌دهد پکیج نرم‌افزاری bundle.js را در صفحه خود بارگیری کنید تا برنامه شما را رندر کند. این بدان معنی است که هیچ DOM مجازی و هیچ فریمورکی برای بارگذاری در زمان اجرا وجود ندارد.

اینها امتیازهای مثبت بسیار خوبی برای توسعه دهندگان باتجربه است، اما چیزی که باعث می‌شود Svelte برای مبتدیان بسیار محبوب باشد، در واقع سینتکس آن است.

اگر قبلا هیچ یک از اجزای Svelte را ندیده‌اید، در اینجا یک مثال اساسی آورده‌ایم:

<p class="pretty">Here's some markup <strong>written by {name}!</strong></p>

<style>
    /* here's some scoped CSS */
    .pretty {
        color: red;
    }
</style>

<script>
    /* ...and a variable we can access in the markup */
    let name = "Ben";
</script>

بگذارید این را کمی بازتر کنیم. اول از همه لازم به ذکر است که همه اینها می‌توانند در داخل یک فایل معمولی html. یا در صورت تمایل در یک فایل svelte. قرار گیرند. همچنین برخی از تگ‌های آشنا را یادآور توسعه بدون فریمورک می‌بینیم. مانند <style> و <script>. متأسفانه نوشتن استایل‌ها و کد جاوااسکریپت در این تگ‌ها برای ساخت مناسب اجزای مورد نظر ضروری است، اما این اجازه می‌دهد تا برجسته سازی سینتکسی بدون پسوندهای اضافی ویرایشگر متن مانند راه‌حل‌های CSS-in-JS کار کند. به علاوه مرحله ساخت Svelte به اندازه کافی هوشمند است که به طور پیش فرض می‌تواند استایل‌های خاص کامپوننت را در بر بگیرد، بنابراین استایل‌هایی را که بین این تگ‌ها وجود دارد قربانی نمی‌شوند.

همچنین مشاهده خواهید کرد که جادویی با متغیر جاوااسکریپت بنام name اتفاق می‌افتد. این یک مفهوم جدید برای Svelte v3 است، جایی که هر متغیری در اسکریپت کامپوننت شما از طریق نشانه گذاری قابل دسترس است. بنابراین هیچ فریمورک یا سینتکس خاصی برای مدیریت state وجود ندارد، پس هیچ $scope انگولار، هیچ this.stateری‌اکت و هیچ داده Vue وجود ندارد. درعوض ما فقط می‌توانیم از lets در همه جا برای به دست آوردن مقادیر حالت اختصاصی استفاده کنیم.

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

<div>
    <Wizardry />
</div>
<script>
    import Wizardry from './wizardry.html'
</script>

برخی از خوانندگان ممکن است این مفهوم را به همان اندازه که من به کار می‌برم، استفاده کنند. اما بقیه به احتمال زیاد در مقابل آن جبهه می‌گیرند و آن را برای مبتدیان نامناسب می‌دانند. آیا این باعث سردرگمی آن‌ها در مورد نحوه عملکرد واقعی DOM نمی‌شود؟

پاسخ این است ... شاید. اما وقتی کسی به تازگی کار خود را آغاز کرده، بد نیست که کمی انتزاع را بپذیرد تا کارهای جالب را با سرعت بیشتری انجام دهد.

همانطور که زبان‌هایی مانند جاوا و جاوااسکریپت مدیریت اشاره‌گر را با جمع آوری زباله انتزاع کرده‌اند، به نظر می‌رسد اکثر ابزارهای توسعه وب مدرن، صرف نظر از موارد پیشرفته‌تر دستکاری DOM را مجزا کرده‌اند. بنابراین به جای اینکه مبتدیان را مجبور به دستکاری DOM کنید، اجازه دهید آنها مستقیما از متغیرها برای نشانه گذاری استفاده کنند. اکنون می‌توانند اصول اولیه state را بدون گرفتار شدن در علف‌های هرز فرا بگیرند.

مسلما این درست است، اما بسیار کمتر از آن چیزی است که شما فکر می‌کنید. یک سینتکس Svelte-y برای نمایش حلقه‌ها و شرط‌ها و برای نمایش عناصر DOM است. این بسیار شبیه روش JSX برای برگرداندن عناصر از روی نقشه است، اما بدون وجود پرانتزهای تو در تو مبتدیان (حتی خود من) به راحتی سردرگم می‌شوند. اینجا یکی از موارد اساسی آورده شده که لیستی از عناصر را از یک آرایه تولید می‌کند:

<ul>
    {#each profiles as profile}
    <li>{profile.name}: {profile.role}</li>
    {/each}
</ul>

<script>
    const profiles = [
        {name: 'Wes Bos', role: 'React extraordinaire'},
        {name: 'Chris Coyier', role: 'Father of CodePen'},
        {name: 'Cassidy Williams', role: 'Letting you know it's pi time'}
    ]
</script>

خیلی جاها انتقاداتی راجع به سینتکس می‌شنوم، اما آنچه دوست دارم این است که به راحتی قابل درک است. ما به جای قرار دادن جاوااسکریپت در HTML خود، فقط کافی است حلقه را بر روی این آرایه ایجاد کرده و برای هر یک از عناصر آن را اعمال کنیم.

نکته عجیب و غریب دیگری وجود دارد که باید به آن اشاره کرد که من مسلما از این موضوع خیلی هیجان زده نیستم و آن انتقال prop ها به کامپوننت‌هاست. بله کاملا کاربردی است و یادگیری آن آسان است، اما سینتکس برای برخی افراد در اولویت است. برای رسیدگی به prop ها نیز می‌توانیم به راحتی آنها را به کامپوننت‌ها در هر کجا که بخواهیم منتقل کنیم.

<!-- somewhere.html -->
<Profile coolGuy="Scott Tolinski" />

و آن متغیر را به عنوان "let" صادر شده دریافت کنیم.

<!-- profile.html -->
<p>{coolGuy}</p>
<script>
    export let coolGuy = '';
</script>

من کاملا درک می‌کنم که برخی از آن‌ها با سو استفاده از "export" مانند این رد می‌شوند، اما حداقل از روشی که مبتدیان باید مفهوم ماژول‌ها را دنبال کنند، پیروی شود. ما آنچه را که باید به آن دسترسی داشته باشیم را صادر می‌کنیم و آنچه می‌خواهیم در مولفه خود نشان دهیم را وارد می‌کنیم.

Svelte در واقع یک نقطه شروع بارگیری را ارائه می‌دهد که به صورت out of box خوب است، اما من الگوی شروع خود را ساختم که فقط از ابزار ساخت Rollup برای بارگیری زنده استفاده می‌کند. در واقع فایل پیکربندی زیر 30 خط کد دارد! برای یک پروژه اساسی Svelte، این‌ها همه فهرست‌ها و فایل‌های مورد نیاز شما هستند:

/public
    index.html
/src
   index.html
app.js
rollup.config.js
package.json

برای اجرای مرحله ساخت در package.json فقط کافی است یک دستور اضافه کنید و همه چیز آماده است. مطمئنا می‌توانید بگویید که اگر مبتدیان آنها را دستکاری نکنند، همه ماژول‌ها و فایل‌های اضافی که فریمورک‌های دیگر به آنها نیاز ندارند مشکلی ایجاد نمی‌کنند. اما به نظر من هرچه موارد اضافی برای تازه‌کارها کمتر در نظر گرفته شود، بهتر است.

تا اینجا نتیجه گرفتیم که Svelte جالب و مبتدی پسند است. اما آیا این یک فریمورک پایدار است؟

این یک سوال کاملا مرتبط با فریمورکی به اندازه Svelte است. تمام مثال‌هایی که نشان دادیم، از سینتکس Svelte نسخه 3 استفاده می‌کنند که از زمان نوشتن این مقاله هنوز در نسخه بتا است و در مقایسه با فریمورک‌هایی مانند ReactJS و VueJS دارای پشتیبانی نسبتا کمتری است. هنوز Svelte یک صفحه کاملا مختصر برای مستندات نسخه 3 ارائه می‌دهد که می‌تواند برای مبتدیان راحت به نظر برسد، بدون اینکه پس از توضیح زیر صفحه تحت تأثیر قرار بگیرند.

بنابراین بیایید برخی از نکات اصلی را برای یادگیری توسعه وب با Svelte مرور کنیم: