سازنده SolidJS نظرات جالبی درباره نوآوری های جاوا اسکریپت دارد، در این مطلب قصد داریم صحبت های کامل سازنده این فریم ورک جاوا اسکریپت را ارائه دهیم.

فریم ورک SolidJS یک فریم ورک محبوب در زبان برنامه نویسی جاوا اسکریپت است که ویژگی های زیادی را به شما ارائه می دهد. در واقع این فریم ورک JSX را با استفاده از برخی موارد اولیه جذاب تر می کند. این فریم ورک دقیقا مانند Svelte کامپایل شده است. لایه های آن روی سرویس های با مرتبه بالا قرار دارند و برای این که اندازه گیری درستی داشته باشد دارای بسیاری از ویژگی های SSR یا server-side rendering می باشد.

Ryan Carniato سازنده این فریم ورک قدرتمند جاوا اسکریپت صحبت هایی در خصوص این که چگونه او و تیم سازنده این فریم ورک جاوا اسکریپت این کار را انجام داده اند داشته است. علاوه بر این او به برخی از سوالات نیز پاسخ داده است که از جمله آنها می توان به موارد زیر اشاره کرد:

چگونه این فریم ورک با پیشرفت های صنعتی در ارتباط است؟ چگونه ویژگی های خلاقانه فرانت اند مانند partial hydration، streaming SSR و Suspense پیاده سازی شده اند؟ و چه چیزی به او انگیزه می دهد تا از محدودیت های موجود در بخش فرانت اند زبان برنامه نویسی جاوا اسکریپت جلوگیری کند؟

در ادامه قصد داریم بخش هایی از این صحبت ها را به طور کامل در اختیار شما قرار دهیم.

نسخه کامپایل شده Solid

Matthew Tyson: سلام رایان، ممنون که امروز وقت گذاشتی به سوالات ما پاسخ بدی. اولین سوال این است که Solid درست مانند Svelte یک فریم ورک کامپایل شده است. دقیقا کجا تصمیم گرفتی که از این ایده Svelte الهام بگیری تا Solid رو به صورت کامپایل شده بسازی؟

Ryan Carniato: نه Svelte تا زمان انتشار V3 در سال 2019 به صورت hardcore کامپایل نشده بود. ما قبلا این سیستم را داشتیم برای اولین بار نیز در سال 2018 از آن استفاده کردیم. Svelte دارای ایده های بسیار جذابی است که شرایط کامپایل کردن کد را بهتر می کند و من آگاهی کاملی نسبت به آنها دارم اما این به آن معنی نیست که از ایده های آنها دقیقا در همان مسیر استفاده کرده ایم.

میزان نوآوری در جاوا اسکریپت

Tyson: به نظر من میزان نوآوری در زبان برنامه نویسی جاوا اسکریپت حیرت آور است. به نظر شما در طول روند این تکامل ما در کدام نقطه قرار داریم؟ آیا نوک قله هستیم یا هنوز فاصله زیادی تا رسیدن به آن نقطه داریم؟

Carniato: به نظر من ما از نظر رندر کردن و اجرای مستقیم وارد محدوده کارهایی که می توانیم انجام دهیم شده ایم و صادقانه بخواهم بگوییم به نظر من هنوز به اندازه کافی خوب نیستیم. به همین علت است که این ناحیه از برنامه نویسی دائما در حال پیشرفت است چون که ما می دانیم می توانیم بهتر از این باشیم و عملکرد بهتری داشته باشیم. علاوه بر این به همین علت است که تحقیقات زیادی در زمینه های دیگر صورت می گیرد تا به عملکرد بهتری دست پیدا کرده یا تجربه کاربری را بهبود دهند.

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

تمرکز تیم Solid روی تجربه توسعه دهندگان

Tyson: شما تمرکز زیادی روی بهبود عملکرد داشته اید و تحقیقات گسترده ای را نیز در این زمینه انجام داده اید. با مشاهده رفتار Solid و بررسی معیارهای مختلف می بینیم که واقعا عملکرد بسیار خوبی دارد اما به نظر من این محصول تجربه بسیار خوبی را نیز به توسعه دهندگان ارائه می دهد. آیا تمرکز تیم شما روی این مسئله است یا صرفا این یک اثر جانبی خوشحال کننده برای توسعه دهندگان می باشد؟

پاسخ Carniato در خصوص تجربه توسعه دهندگان در Solid

من کار خود را با Knockout آغاز کردم چرا که علاقه زیادی به DX یا تجربه توسعه دهنده دارم. با وجود این که ابزاری که ساخته بودیم را دوست داشتم ولی در عین حال تمامی اشکالاتی که توسط توسعه دهندگان بیان می شد را نیز می دیدم. به همین علت به این فکر افتادم که چگونه می توانیم این اشکالات را برطرف کنیم. در تمام طول این مسیر من سعی کردم از هدف خود دور نشوم و تمام تلاشم این بود که عملکرد بهتری را ارائه دهم. یکی از ویژگی های مهمی که باعث قدرتمند بودن Knockout می شد الگوهای داده مقدماتی و قابل تعریف بود که تاثیر زیادی روی تجربه توسعه دهندگان داشت.

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

سوالاتی در خصوص پشتیبانی از SSR در Solid

Tyson: من احساس می کنم روشی که این فریم ورک جاوا اسکریپت از لایه ها و داده های مقدماتی استفاده می کند باعث می شود تا کار کردن با آن بسیار ساده و راحت باشد. علاوه بر این باید توجه داشت که Solid می تواند SSR را نیز ارائه دهد که همچنان یک ناحیه مهم برای توسعه به شمار می آید. من می دانم که این مسئله یک چالش فنی است ولی سوالی که دارم این است که آیا حمایت ایزومورفیک از ابتدای کار بخشی از دیدگاه شما برای ساخت این فریم ورک بوده است؟ تجربه شما در انجام این کار چیست؟

پاسخ سوال در خصوص پشتیبانی از SSR

Carniato: اصلا این طور نیست و من بسیار بیشتر از این که روی سرعت اجرای سمت سرور تمرکز داشته باشم روی سمت کلاینت تمرکز می کردم. در واقع زمانی که فریم ورک ها منتظر داده async هستند( مانند آنچه که در Next، Nuxt و Sapper مشاهده می کنید) سرعت بالای رندر کردن و اجرا در سمت کلاینت به راحتی می تواند آن را شکست دهد. من مواردی مانند پیش نمایش واقعی را ارائه دادم و از این مسئله راضی بودم که چگونه از این پیاده سازی های سمت سرور بهتر عمل می کند. البته نباید فراموش کنیم که این مسئله تنها در شبکه های سریع کاربرد دارد.

با گذر زمان مردم عملکرد این فریم ورک را می بیننند و SSR تبدیل به ویژگی می شود که بیشترین تقاضا را دارد. من تنها روی اپلیکیشن های تعاملی کار کرده ام و به همین علت نیز تجربه ای در این زمینه ندارم. خوشبختانه با استفاده از فریم ورک Marko و eBay که به بهترین شکل ممکن SSR را پیاده سازی کرده اند مشکلی در این زمینه وجود نخواهد داشت. Solid و Marko تقریبا اهداف متفاوتی دارند اما هر دو پروژه از یکدیگر سود می برند.

ادامه پاسخ به سوالات در خصوص پشتیبانی از SSR

Carniato همچنین در این خصوص ادامه می دهد: برای Solid من تمام تلاش خود را انجام دادم تا بهترین تکنیک ها را برای SSR به کار ببرم. این کار نیازمند تجدید نظر در نوع تفکر من داشت اما من آن را پذیرفتم تا بتوانم بهترین راه کامپایل برای رندر کردن مستقیم و به صورت بهینه را پیدا کنم. انجام دادن این کار چندان سخت نبود چرا که من قبلا تجربه Suspense را داشتم و به همین علت نیز تنها آن را روی سرور مجازی پیاده سازی کردم. در همان زمان بود که برای من مشخص شد ری اکت در این سال ها چه اقدامی انجام داده است و در طول 18 سال آینده چه اقداماتی انجام خواهد داد. در تابستان سال گذشته من موفق شدم که این ویژگی را به Solid اضافه کنم و این شگفت انگیز است.

نکاتی درباره Marko

تایسون: من باید کمی بیشتر درباره Marko سرچ و جستجو کنم.

Carniato: بله بیشتر افراد آشنایی کاملی با Marko ندارند ولی زمانی که این ابزار برای اپلیکیشن های چند صفحه ای و رندر کردن سمت سرور منتشر شد تکنیک هایی را در سطح محصولات eBay ارائه می داد که این فوق العاده بود. فریم ورک های دیگری به تازگی اقدام به اضافه کردن ویژگی ها کرده اند که Marko سال ها قبل بسیاری از آنها را دارا بود که می توان از جمله این ویژگی ها به streaming SSR اشاره کرد.

توضیحاتی در خصوص hydration در جاوا اسکریپت و فریم ورک Solid

Tyson: آیا می توانید توضیح دهید که hydration در جاوا اسکریپت و Solid چگونه کار می کند؟ و این که چرا hydration جزئی یک بهبود در Solid و سایر فریم ورک های زبان برنامه نویسی جاوا اسکریپت به شمار می آید؟

Carniato: این در واقع پروسه ای است که در آن کامپوننت ها را برای اولین بار در مرورگر در سمت کلاینت اجرا می کند تا آنها را برای به روزرسانی های بعدی تنظیم کند. ما هیچ چیزی را رندر نمی کنیم ولی همان قوانین عمومی اجرای بالا به پایین را دنبال می کند. بنابراین hydration جزئی تنها درباره این است که همه کد کامپوننت ها را ارسال نکنیم. همین عامل نیز باعث می شود تا زبان برنامه نویسی جاوا اسکریپت به مرورگرها اجازه می دهد تا صفحات را بهبود داده و سرعت تعامل آنها را افزایش دهند.

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

Hydration جزئی ممکن است کمی خارج از بحث باشد چرا که استفاده از آن نیازمند معماری و همین طور کاربردهای متفاوتی می باشد و امروزه تقریبا هیچ یک از فریم ورک های جاوا اسکریپت برای استفاده از آن بهینه نشده اند. در حال حاضر ما برخی از ابزارها مانند Astro را مشاهده کرده ایم که در تلاش هستند تا شرایط را برای استفاده از آن فراهم کنند.

توضیحاتی در خصوص streaming SSR در جاوا اسکریپت و Solid

تایسون: ممنون بابت توضیحات قبلی. امکان داره توضیحات مختصری درباره streaming SSR ارائه بدید:

Carniato: بسیار خب، شما همه سوالات فنی رو پرسیدید.

Streaming SSR براساس این ایده طراحی شده است که ما می توانیم به محض fetch شدن اقدام به رندر کردن کنیم. اگر تا به حال یک اپلیکیشن تک صفحه ای را در وب با استفاده از async loading ساخته باشید احتمالا تمایل دارید که کامپوننت های خود را رندر کرده و اقدام به fetch کردن داده و نمایش یک placeholder کنید. زمانی که داده بارگذاری می شود شما می توانید محتوا را رندر کنید. کل هدف streaming SSR این است که تمامی این مراحل را در سمت سرور انجام دهد.

ادامه توضیحات درباره streaming SSR در جاوا اسکریپت و فریم ورک Solid

زمانی که شما به صفحه مدنظرتان درخواست می دهید صفحه شروع به رندر کردن و fetch کردن داده های همزمان یا async می کند. در واقع این صفحه وب شروع به stream کردن تمامی پاسخ های برگشتی به همراه تمام placeholder ها می کند و به همین علت نیز کاربران در سمت کلاینت منتظر نمی مانند. علاوه بر این به صورت همزمان stream پاسخ را باز نگه می دارد. بنابراین زمانی که بارگذاری داده ها به اتمام می رسد می تواند از طریق stream رندر و ارسال شود.

بنابراین نتیجه نهایی مربوط به بخش های همزمان صفحه می باشد که به سرعت ارسال می شوند بدون این که نیازی به async و placeholder ها باشد و این مسئله تجربه کاربری را بهبود می دهد. شما مشاهده می کنید که محتوا به سرعت بارگذاری شده و در دسترس قرار می گیرد و سرعت انجام این کار نیز بسیار بیشتر از رندر کردن سمت کلاینت است. دلیل این موضوع این است که شما می توانید این پروسه را با درخواست اولیه سرور آغاز کنید به جای این که صبر کنید تا صفحه برای مرورگر ارسال شده و جاوا اسکریپت درخواست و پروسه را آغاز کند. بهترین نکته درباره Streaming SSR در جاوا اسکریپت و فریم ورک Solid این است که شما می توانید کدهای خود را به همان شکل قبل بنویسید. این بهترین سناریویی است که در حال حاضر وجود دارد و به وضوح مشخص است که چرا ری اکت برای معرفی این ویژگی در نسخه 18 خود هیجان زده است.

سوالاتی درباره Suspense در Solid و جاوا اسکریپت

تایسون: ممنون از این که توضیحات کاملی درباره Streaming SSR در جاوا اسکریپت و Solid ارائه دادید. سوال دیگری که از شما دارم این است که اگر امکان دارد توضیحاتی درباره Suspense در جاوا اسکریپت و فریم ورک Solid ارائه دهید. من می دانم فریم ورک React اقدامات بسیار جدی را انجام داده است تا بتواند Suspense را به طور کامل فعال کند. آیا به نظر شما پیاده سازی آن کار سختی است؟

پاسخ Carniato در خصوص Suspense

بله بله من چندین نسخه مختلف را مشاهده کرده ام. من فکر می کنم اکثر افراد متوجه نمی شوند که می گوییم یک فریم ورک مانند Vue یا Preact دارای Suspense می باشند دقیقا به چه معناست. رندر کردن placeholder ها و محتواهای جدید خارج از صفحه تقریبا کار ساده ای است. این انتقال و رندر کردن همزمان است که آن را تبدیل به یک چالش جدی می کند که هیچ یک از آن فریم ورک ها از این قابلیت پشتیبانی نمی کنند.

مدل اولیه ای که من ارائه دادم تقریبا ساده بود ولی نیازمند این بود که افراد در هر جریان کنترلی شرکت کنند که این کار نامناسب بود.

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

نکات تکمیلی درباره Suspense در جاوا اسکریپت  

تایسون: احساس می کنم کمی از فضای کدنویسی دور شده ایم و بیشتر وارد مسائل علمی تخیلی شده ایم. ممنون از این که وقت گذاشتید برای ادامه صحبت ها. من فقط دو سوال دیگر دارم که در ادامه بیان می کنم.

در ری اکت Suspense به ذخیره داده وابسته است که API را برای تعامل با کامپوننت Suspense پیاده سازی می کند. آیا Solid در جاوا اسکریپت با استفاده از متد createResource  کاری مشابه با این انجام می دهد؟

Carniato: بله. تفاوت آنها در واکنش گرا بودن و عدم رندر کردن مجدد است. این مقدار یک حافظه پنهان نیست بلکه یک سیگنال خاص است که چه زمانی داده ها قدیمی هستند. بنابراین در مرحله بعدی که این اطلاعات خوانده می شوند اطمینان حاصل می کنیم که هر یک از Suspense context های مورد نیاز را اعمال کرده ایم تا کار خاصی را انجام دهند.( بله Suspense مخصوص Solid در زبان برنامه نویسی جاوا اسکریپت با استفاده از Context API پیاده سازی شده است).

عامل حفظ انگیزه برای ادامه دادن پروژه Solid

تایسون: شما کار زیادی روی پروژه Solid انجام دادید که مشاهده میزان کارهای صورت گرفته در گیت های ساده است. چه چیزی انگیزه شما در این مسیر را حفظ می کرد؟

Ryan Carniato: شاید پاسخ این سوال خنده دار باشد. اصلا نمی دانم چه چیزی وضعیت من را تغییر داد. یک روز صبح به این موضوع فکر کردم که به اندازه کافی در محل کارم کار نمی کنم چرا که بیشتر وظایف مدیریتی داشتم و در خانه نیز بیشتر با دختر تازه متولد شده ام زمان می گذراندم. در آن لحظه بود که بیشتر با خودم کلنجار رفتم و معیارهای مختلف فریم ورک های جاوا اسکریپت را بررسی کردم. در نهایت متوجه شدم رویکردی که من ارائه می دهم ممکن است نتایج بسیار بهتری را به همراه داشته باشد.

انگیزه Ryan Carniato در توسعه Solid یکی از موفق ترین فریم ورک های جاوا اسکریپت

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

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

موارد مورد علاقه Ryan Carniato برای اضافه کردن به Solid

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

Carniato: فکر کنم مواردی که در ذهنم بود به طور کامل پیاده سازی شده اند. البته موارد مختلفی بین فریم ورک های متفاوت فرق دارد و برخی از اهداف نیز ممکن است اغراق آمیز به نظر برسد. اکثر افراد با پیامدهایی بعد از انتخاب فریم ورک رو به رو می شوند و ممکن است کدهای خود را به شکل نامرتبی ارائه دهند ولی در نهایت همه توسعه دهندگان توجه ویژه ای به مهلت ارائه پروژه دارند. من تلاش کردم تا این فریم ورک جاوا اسکریپت را به بهترین شکل ممکن پیاده سازی کنم که برای تمامی توسعه دهندگان زبان جاوا اسکریپت مفید باشد.