چرا SvelteJs ممکن است بهترین چهارچوب برای توسعه وب باشد؟

توسعه‌دهندگان مجربی که سابقه چند‌ساله در زمینه ساخت وب‌سایت‌ها دارند، کار خود را با یک پرسش ساده آغاز کرده‌اند، من علاقه‌مند به یادگیری توسعه وب هستم، اما نقطه شروع را نمی‌دانم. یک دهه قبل، پاسخ ساده‌ای برای این پرسش وجود داشت. کافی بود یک فایل index.html ایجاد می‌کردید، برخی تگ‌ها را به صفحه اضافه می‌کردید، عناصر درون صفحه را با CSS سبک‌بندی می‌کردید و با جاوااسکریپت یا جی‌کوئری کلیک روی بخش‌های مختلف سایت را کنترل می‌کردید. شاید تعجب کنید، اما صفحات اولیه دنیای وب بر مبنای یک چنین معماری ساده‌ای کار می‌کردند. با گذشت زمان، همه چیز تغییر کرد. توسعه‌دهندگان با ابزارهای پیشرفته ساخت، مسیریابی سمت کلاینت، چهارچوب‌های ویژه برای تعامل با اسکریپت‌های جذاب زمان اجرا، به‌کارگیری الگوهای مختلف و CSS-in-JS روبرو شدند. پیچیدگی‌های دنیای توسعه به اندازه‌ای زیاد شده‌اند که حتا توسعه‌دهندگان حرفه‌ای نیز این پرسش را مطرح می‌کنند که چگونه موارد مهم را انتخاب کنیم و به شکل موثر از آن‌ها استفاده کنیم، اگر توسعه‌دهنده تازه‌کاری اطلاعی درباره DOM ندارد، چگونه به او آموزش دهیم که نحوه تعامل ری‌اکت با DOM مجازی چیست؟ دنیای نرم‌افزار و به ویژه توسعه وب سرشار از پرسش‌های این چنینی هستند، به‌طوری که در نهایت مدرسان و حتا دانش‌پژوهان به این جمع‌بندی رسیدند که «ابتدا کدها را بنویس، در آینده عملکرد آن‌‌ها را درک خواهی کرد.» برخی توسعه‌دهندگان مجرب به تازه‌واردان دنیای توسعه وب پیشنهاد می‌کنند که برای شروع کار وقت را از دست ندهند و به سراغ ری‌اکت یا Vue بروند، در حالی که برخی دیگر بانگ بر می‌آورند که مبتدیان باید ابتدا اصول اولیه را آموزش ببینند. هر دو دیدگاه مزایا و معایب خاص خود را دارد. به‌طور مثال، در حالت اول، افراد تازه‌کار با ابزارها و مولفه‌های مختلف آشنا می‌شوند، اما این احتمال وجود دارد که هر زمان با نکات مجهولی روبرو شدند که قادر به درک آن‌ها نیستند به سادگی از کنار آن‌ها عبور کنند. در حالت دوم، مبتدیان به شکل درستی با اصول اولیه آشنا می‌شوند و یاد می‌گیرند که به‌طور مثال،  DOM در پشت صحنه چه کاری انجام می‌دهد. در این روش افراد در بلندمدت و به شکل تدریجی با پیچیدگی‌های موجود در یک چهارچوب آشنا می‌شوند. بزرگ‌ترین عیب روش دوم زمان‌بر بودن آن است و به همین دلیل بیشتر مدرسان آموزشی تمایلی ندارند روی یک مبحث بیش از اندازه وقت صرف کنند. بنابراین ما به حد وسطی نیاز داریم که بتواند مبانی پایه را به گونه‌ای آموزش دهد که همزمان با آن روی مفاهیم جدیدتر نظیر توسعه مولفه‌محور، سی‌اس‌اس گسترش‌پذیر یا آبشاری، الگوها، توابع اعلامی و موارد این چنینی متمرکز باشد. ما به چهارچوبی نیاز داریم که ضمن سادگی، قابلیت‌های قدرتمندی در اختیار توسعه‌دهندگان قرار دهد که پس از تسلط بر آن بتوانند به شکل حرفه‌ای از آن استفاده کنند و درآمدزایی داشته باشند. از مهم‌ترین ویژگی‌های svelte باید به موارد زیر اشاره کرد:

•  یک چهارچوب مبتنی بر مولفه بدون افزونه اضافه است. 
•  مدیریت state را فارغ از مشکلات رایج انجام می‌دهد.
•  از یک ظاهر جذاب بدون نیاز به CSS-in-JS استفاده می‌کند. 
•  تنها به یک اسکریپت ساده برای شروع نیاز دارد. 
•  در پروژه اصلی به هیچ فایل اضافی نیازی نیست. 

Svelte یک گزینه قدرتمند، اما کمتر شناخته شده

‌SvelteJS یک چهارچوب تقریبا تازه ‌وارد به دنیای توسعه وب است که با ارائه قابلیت‌های کارآمد مورد توجه توسعه‌دهندگان قرار گرفته است. برخی بر این باور هستند که 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 در هر مکانی برای به دست آوردن مقادیر حالت اختصاصی استفاده کنیم. نکته جالب توجهی دیگری در ارتباط با این مولفه‌ها وجود دارد که می‌توان شبیه به یک مولفه سنتی آن‌ها را وارد (import) کرد. در این حالت تنها کاری که باید انجام دهید این است که .html را به درون کدها وارد کنید. در ادامه Svelte به‌طور هوشمندانه آن‌را باز کرده و محتوای درون فایل را پردازش می‌کند. ترکیب نحوی انجام این‌کار به شرح زیر است. 

<div>

    <Wizardry />

</div>

<script>

    import Wizardry from ‘./wizardry.html’

</script>

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

از آن‌جایی که State پویا است، تنها برای ایجاد تعامل‌پذیری استفاده می‌شود و از این‌رو در مواردی نظیر پروژه‌های ایستا ری‌اکت کاربردی ندارد. در دنیای Svelte یک ترکیب نحوی 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، تنها کاری که انجام می‌دهیم این است که حلقه‌ای روی آرایه ایجاد می‌کنیم که روی هر یک از عناصر حلقه اعمال می‌شود. نکته مهمی که در ارتباط با Svelte باید به آن اشاره کرد، انتقال propها به مولفه‌ها است. رویکرد فوق کاملا کاربردی و یادگیری آن ساده است، اما برای برخی از توسعه‌دهندگان ترکیب نحوی اولویت دارد. برای مدیریت propها می‌توانیم به سادگی propها را به مولفه موردنظر در هر مکانی که در نظر داریم انتقال دهیم. قطعه کد زیر این موضوع را نشان می‌دهد. 

<!-- somewhere.html -->

<Profile coolGuy=”Scott Tolinski” />

و آن‌ متغیر را به عنوان let صادر شده (export) دریافت کنیم.

<!-- profile.html -->

<p>{coolGuy}</p>

<script>

    export let coolGuy = ‘’;

</script>

Svelte نقطه شروع خوبی برای کار در اختیار توسعه‌دهندگان قرار می‌دهد. این نقطه شروع یک برنامه آماده همراه با ابزار آنلاینی است که خروجی لحظه‌ای دستورات را نشان می‌دهد. با این‌حال، اگر تمایل دارید که الگوی خود را ایجاد کنید ابزار Rollup برای بارگیری زنده در دسترس‌ کاربران قرار دارد. فایل پیکربندی rollup.config.js در نشانی:

 https://github.com/Holben888/svelte-starter-template/blob/

master/rollup.config.js 

کمتر از 30 خط کد دارد و اجازه می‌دهد الگوی خاص خود را ایجاد کنید. توسعه‌دهندگان برای یک پروژه زیربنایی Svelteها به ملزومات زیر نیاز دارند:

/public

    index.html

/src

   index.html

app.js

rollup.config.js

package.json

معایب Svelte چیست؟

هر چهارچوبی در کنار مزایایی که ارائه می‌کند معایبی نیز دارد. از مهم‌ترین معایب Svelte به موارد زیر می‌توان اشاره کرد:

هیچ نوع داده‌ای در Svelete تعریف نشده است. بنابراین، توسعه‌دهندگانی که عادت کرده‌اند از تفاوت‌های میان انواع داده‌ها نظیر رشته‌ها، اعداد و آرایه‌ها در کدنویسی استفاده کنند با این موضوع احساس راحتی نمی‌کنند. با این‌حال، کتابخانه‌هایی برای رفع این مشکل نوشته شده‌اند که از آن جمله می‌توان به svelte-typescript-rollup، svelte-typescript-parcel و svelte-preprocess  اشاره کرد. 

با توجه به این‌که Svelte یک کامپایلر است، اجازه می‌دهد تا پروژه‌ها حتا با خطاهای import و export کامپایل شوند. در شرایطی که سایر چهارچوب‌ها در همان مرحله کدنویسی این موضوع را به کاربر اطلاع می‌دهند. توسعه‌دهندگان باید با ابزارهایی نظیر Webpack برای کار با وابستگی‌های مرتبط با صفحات وب آشنا باشند. در مقایسه با سایر چهارچوب‌ها، کتابخانه‌های کمتری برای Svelte ارائه شده‌اند. البته این احتمال وجود دارد که در آینده اوضاع بهتر شود.

چگونه باید از Svelte استفاده کرد؟

برای استفاده از Svelte باید Node.js در محیط کاری نصب شده باشد، زیرا تمامی ابزارها بر مبنای Node هستند. اگر تمایلی ندارید تا Svelte را نصب کنید، وب‌سایت این چهارچوب ابزار جالبی به‌نام REPL به نشانی https://svelte.dev/repl/hello-world?version=3.31.2 ارائه کرده است. ابزار فوق برای آزمایش برنامه‌های کوچک Svelte و آزمایش برخی ویژگی‌ها خوب است. Node دستور npx را اجرا می‌کند که روشی مفید برای اجرای دستورهای Node است. بر همین اساس دستور زیر را اجرا می‌کنیم:

npx degit sveltejs/template firstapp

ترکیب نحوی فوق، دستور degit را دانلود و اجرا می‌کند تا جدیدترین کدهای قالب پروژه Svelte به پوشه جدید firstapp که ایجاد می‌شود وارد شود. اطمینان حاصل کنید که Git روی سامانه نصب و به متغیر PATH اضافه شده باشد، زیرا در غیر این صورت دستور degit کار نمی‌کند. اکنون به پوشه firstapp بروید و دستور npm install را اجرا کنید تا وابستگی اضافی قالب دانلود شوند. در این حالت هسته اصلی Svelte و برخی افزونه‌ها در پوشه فوق وارد می‌شوند. علاوه بر npm-run-all یک ابزار خط فرمان نیز وجود دارد که برای اجرای چند اسکریپت npm به شکل موازی یا سریال استفاده می‌شوند. پس از انجام کارهای فوق آماده هستید تا سایت Svelte را در حالت توسعه با اجرای دستور npm run dev آغاز کنید. دستور فوق یک برنامه در localhost و پورت 5000 به شکل پیش‌فرض اجرا می‌کند (شکل 1).

شکل 1

اگر آدرس فوق را در مرورگرتان وارد کنید، تصویری همانند شکل 2 را مشاهد می‌کنید.

شکل 2

اکنون آماده هستید تا کدنویسی را درون ویراستار مدنظر خود انجام دهید. پوشه src شامل تمام مواردی است که برای تغییر برنامه نیاز است و آن فایل main.js است. فایل فوق نقطه ورود برنامه است (شکل 3). 

 شکل 3

کلام آخر

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