معرفی کوتاهی به فریمورک svelte js

ای بابا! باز هم یک framework دیگه

آره میدونم، فریمورک های متعددی با ویژگی ها مختلف برای جاوا اسکریپت وجود دارند. اما این دفعه می خوام یه فریمورک خوب که نسبت به بقیه رقیبانش کمتر شناخته شده رو بهتون معرفی کنم. موضوع بحث ما در این پست فریمورک svelte js هستش.

ویژگی های svelte js:

• مثل اکثر framework ها، svelte هم برخی ویژگی های جدید رو به زبان جاوا اسکریپت اضافه کرده که جزء خود جاوا اسکریپت نیستند. یعنی مرورگر به تنهایی قادر به اجرای کد های svelte نیست. خوب تا اینجا که شبیه به خیلی از framework های دیگه بود اما یه فرق اساسی داره. فریمورک هایی مثل react و vue و ... مرحله تبدیل کد به جاوا اسکریپت ساده (قابل اجرا توسط مرورگر) رو در مرورگر و در زمان بالا آمدن وبسایت انجام میدن. در حالی که svelte js این کار رو از قبل انجام میده و کد رو در یک فایل کوچیک bundle js قرار میده (که شامل دستورات جاوا اسکریپت خالصه) بنابر این مرورگر هیچ نیازی به ابزاری های دیگه مثل babel و ... نداره و می تونه از کد ها به صورت مستقیم استفاده کنه.
• این framework از virtual-dom استفاده نمی کنه. (نمی دونم خوبی حساب میشه یا بدی)
• نیازی به کتابخانه های state management نیست. خود svelte اینکار رو براتون انجام میده
• فریمورک svlete به شما قابلیت استفاده از component ها رو میده. (مثل react)
• همچنین قابلیت two-way data binding رو هم داره (مثل angular)

برنامه hello name

میدونم یکم عجیبه. معمولا hello world مینویسن ولی اینبار من می خوام برنامه hello name رو بنویسم (یک input وجود داره که اسمتون رو میگیره و نشون میده. (جهت نشان داده قابلیت two-way data binding))

let name= ""
let hello = "hello"


<h1> {hello} {name} </h1>
<input bind:value={name} placeholder="please enter your name"/>

<style>
 /* css stuff here ... */
</style>

خوب همونطور که دیدید خیلی ساده است. کد های جاوا اسکریپت توی script نوشته میشن(من هرکاری کردم نتونستم کاری کنم ویرگول تگ های script رو نشون بده. ولی شما حواستون باشه که اونها رو بزارید). کد های html معمولا میان تگ های script و style هستند (نیازی هم نیست که یک والد واحد داشته باشند). کد های css هم که معمولا آخر های کد در تگ style نوشته میشن.

• برای استفاده از مقادیر متغیر ها در قسمت های مختلف کد های html از { } استفاده میشه.
• از bind:value برای اختصاص مقدار فیلد input به یک متغیر استفاده میشه.

دانلود svlete js

اگه node js و npm رو دارید این دستور رو وارد کنید.

npx degit sveltejs/template my-svelte-project

البته برای من که این دستور کار نمی کنه. اگه برای شما کار کرد که هیچ اما اگه نکرد راحت ترین کار اینه که این فایل zip رو دانلود و استخراجش کنید. بعد هم با اجرای این دستورات برنامه رو اجرا کنید

cd my-svelte-project
npm install
npm run dev  // runs development server

منابع یادگیری

بهترین منبع یادگیری خود وبسایت svlete.dev هستش. توضیحاتش کامله و مثال های خوبی ارائه میده. می تونید از این لینک وارد قسمت آموزش svelte بشید