مانند React در سطح … اما کاملاً متفاوت است

Solid JS یک تازه وارد در صحنه چارچوب جاوا اسکریپت است. و با این حال در نظرسنجی وضعیت جاوا اسکریپت امسال از نظر محبوبیت در رتبه اول قرار دارد. چه چیزی آن را بسیار جذاب می کند و آیا ارزش یادگیری دارد؟

وقتی کد SolidJS را می خوانید، به نظر می رسد مقدار زیادی مانند React کامپوننت تابعی است که کد JSX را برمی گرداند. اگر اصلاً با React آشنایی دارید، می توانید کد SolidJS را بخوانید و ایده خوبی از آنچه در حال وقوع است به دست آورید. در واقع کد زیر در React و Solid معتبر است:

function MyComponent(props) {
return <div>Hello {props.name}</div>;
}
<MyComponent name="Solid" />;

و این چیز خوبی است. در حال حاضر به اندازه کافی چارچوب های مختلف وجود دارد که هر کدام دستور خود را فشار می دهند. و React است عملا استاندارد بنابراین خوب است که در قلمرو آشنا باشید.

جز اینکه اینطور نیست. از آنجا که قلاب ها – که ستون فقرات منطق تجاری React هستند – حتی در Solid JS وجود ندارند.

جامد قلاب useState ندارد. در عوض، بر “سیگنال ها” متکی است. سیگنال چیست؟ در Solid، سیگنال ها به صورت زیر مقداردهی می شوند:

const [count, setCount] = createSignal(0);

با توجه به نحو آشنا، تصور اینکه createSignal فقط یک تغییر در “useState” React است، آسان است. و به یک معنا، هر دو برای حل یک مشکل مفید هستند: ردیابی وضعیت برنامه در سراسر اجرای توابع جزء. بنابراین تفاوت بین سیگنال های SolidJS و قلاب های useState React چیست؟

اولین اشاره به یک سرنخ این است که اولین عنصری که توسط createSignal برگردانده می شود (بنابراین “count” در مثال بالا) یک تابع است. در وب‌سایت Solid JS آمده است: «سیگنال‌ها ساطع‌کننده‌های رویداد هستند که فهرستی از اشتراک‌ها را در خود دارند». این در عمل به چه معناست؟

مستندات همچنین بیان می کند که توابع جزء “یک بار فراخوانی می شوند و سپس وجود ندارند”. آنها “برای سازماندهی کد شما وجود دارند و نه چیزهای دیگر”. بنابراین با وجود شباهت‌هایی که در نحوه نوشتن کد وجود دارد، به نظر می‌رسد که مکانیسم‌های زیربنایی بسیار متفاوت هستند.

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

از طرف دیگر، Solid ردیابی می کند که کدام قسمت از UI به چه چیزی بستگی دارد. و آن را به روز می کند و هیچ چیز دیگری.

و این احساس بسیار آشنا دارد

Svelte ادعا می کند که چارچوب در حال محو شدن است. به جای مقایسه تغییرات حالت در یک DOM مجازی (همانطور که React و دیگران انجام می دهند)، دستور JavaScript را برای ردیابی وابستگی ها بارگذاری می کند. از این نظر، اول از همه یک کامپایلر است. و از آنجایی که می داند کدام قسمت از رابط به کدام متغیر بستگی دارد، از نظر جراحی در به روز رسانی آن دقیق است.

و کاری که Solid JS انجام می دهد بسیار شبیه به این است: بخش هایی از رابط که تغییر می کنند به شنوندگان رویداد متصل می شوند. عوارض جانبی (معادل useEffect) خود را به این شنوندگان رویداد متصل می کنند.

پس چرا به جای روی آوردن به برخی (نسبتا) جدید، فقط از Svelte یا React استفاده نکنید؟

برای من (و این ممکن است فقط یک موضوع سلیقه ای باشد)، Svelte بیش از حد شبیه جادو است. شبیه جاوا اسکریپت به نظر می رسد، اما کامپایلر در بالای آن، روی هنرهای تاریک وابستگی لایه بندی می کند.

از طرف دیگر، Solid منطقی تر از Svelte است. این فقط هوشمندانه شنوندگان رویداد است، نه جادوی کامپایلر. شنوندگان رویداد، من می دانم، می فهمم و اعتماد دارم. کامپایلرها کارهای عجیبی را با کد من انجام می دهند… نه چندان.

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

و به یک معنا این سخت ترین چیز در مورد Solid JS است.

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

در هر دو مورد، در نحوه پیاده‌سازی واکنش‌پذیری و مدیریت رندر HTML، Solid نسبت به «والدین» خود یعنی Svelte و React عاقل‌تر است.

همه اینها برای تولید کد موثر و سریع ترکیب می شوند. Solid JS امتیاز بسیار بالایی در معیار چارچوب جاوا اسکریپت می گیرد. در نظرسنجی وضعیت جاوا اسکریپت بسیار مورد توجه قرار گرفته است. و وزن آن تنها 7 کیلوبایت است.

پس چرا من هنوز از Solid JS استفاده نمی کنم؟

خوب، بخشی از مشکل این است که Solid JS React نیست، و بسیاری از پروژه‌هایی که من درگیر آن‌ها هستم، دارای یک پایگاه کد React بزرگ هستند. افرادی که روی آنها کار می کنند React را می شناسند و Solid را نمی شناسند.

اما من این احساس را دارم که اینجا و آنجا، جایی که React باعث مشکلات عملکردی می‌شود، در پروژه‌هایی که می‌توانم به تنهایی کار کنم، کمی Solid JS را اینجا و آنجا می‌پاشم.

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

و Solid JS به نظر می رسد که ممکن است بهترین های هر دو جهان را به روشی ساده، معقول و … محکم گرد هم آورد.

مطالب بیشتر در PlainEnglish.io. برای ما ثبت نام کنید خبرنامه هفتگی رایگان. ما را دنبال در توییتر و لینکدین. ما را بررسی کنید اختلاف جامعه و به ما بپیوندید مجموعه استعدادها.