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

همین عامل نیز باعث شده تا سرعت این نوآوری ها به میزان زیادی افزایش پیدا کرده و شاهد پیشرفت زیادی در این حوزه باشیم. به لطف تعداد زیادی از پروژه های جاوا اسکریپت که امروزه به صورت متن باز در اختیار توسعه دهندگان قرار گرفته اند ما می توانیم نگاهی کامل به تکامل وب در آینده داشته باشیم. از جمله این پروژه های منبع باز می توان به SvelteKit، Solid، ری اکت، Qwik و Astro اشاره کرد.

hydration چیست؟

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

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

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

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

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

این رویکرد دارای یک مزیت بسیار مهم است که این مزیت مهم سادگی فوق العاده آن است. این سادگی را شما می توانید هم در زمان کدنویسی و هم در زمان درک انسانی نسبت به کدهایی که نوشته اید به خوبی درک کنید. علاوه بر این باید بدانید که این رویکرد یک نقطه ضعف بزرگ نیز دارد و آن این است که در زمان رندر کردن اولیه صفحه باید منتظر باشید تا همه چیز بارگذاری شده، در صفحه نمایش نشان داده شود و در ادامه طرح بندی آنها نیز انجام شود تا کاربر بتواند از صفحه استفاده کند.

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

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

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

پس به طور کلی فرآیند hydration را می توان فرایند گرفتن صفحه اولیه و تعاملی کردن تعریف کرد.

محدودیت هایی که برای رندر کردن سمت سرور وجود دارد

زمانی که رندر سمت سرور را مورد استفاده قرار می دهید SSR تلاش می کند تا FCP را بهبود دهد ولی متاسفانه این مسئله باعث تضعیف TTI خواهد شد. بنابراین اصلی ترین هدفی که در این جا وجود دارد ایجاد تعامل بین این دو بخش و در عین حال به حداکثر رساندن پتانسیل هر دو آنها است و این در حالی است که ما امیدواریم در جاوا اسکریپت یک تجربه خوشایند DX را نیز به کاربران ارائه دهیم.

در این تلاش برای بهبود hydration رویکردهای مختلفی پیشنهاد، اتخاذ، رها، اصلاح و ترکیب شده اند. زمانی که شخصی شروع به بررسی جزئیات پیاده سازی آنها می کند از پیچیدگی که در آن وجود دارد شگفت زده می شود. بهبود توازن بین FCP و TTI و همینطور تناسب با DX ممکن است در ابتدا آسان به نظر برسد ولی اصلا اینطور نیست.

پیچیدگی های مربوط به رندر سمت سرور در جاوا اسکریپت

یکی از دلایل اصلی که برای این پیچیدگی در جاوا اسکریپت وجود دارد این است که ما دقیقا در میانه مرتب سازی همه trade-offها قرار گرفته ایم. این یک صحنه بسیار آشکار است ولی با این حال زمانی که به سمت جلو حرکت می کنیم باید منتظر دو نتیجه از معماری فرانت اند باشیم که بلافاصله ظاهر می شوند. در گام اول ما باید برنامه های تحت وب را ایجاد کنیم که حس نسل بعدی را به کاربر منتقل کند. این دقیقا همان روشی است که اپلیکیشن های امروزی در دنیای قدیم استفاده کردند و موفق شدند اپلیکیشن هایی را ایجاد کنند که در نسل بعدی مورد توجه قرار گرفتند.

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

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

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

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

رویکردهایی برای بهبود hydration در جاوا اسکریپت

ترفند اساسی که برای بهبود وضعیت hydration وجود دارد نگاه دقیق تر به مسئله است. با تقسیم کردن view، قابلیت interactivity و وضعیت به قطعات کوچکتر ما می توانیم آنها را بارگذاری و فعال کنیم که این کار به صورت مرحله به مرحله قابل انجام خواهد بود. دقت داشته باشید که این کار هم باعث بهینه سازی FCP و هم باعث بهینه سازی TTI خواهد شد. در ادامه برخی از این رویکردها را بررسی خواهیم کرد.

اجتناب کامل از جاوا اسکریپت

یکی از رویکردهایی که در عمل می تواند عملکرد بسیار خوبی را برای شما داشته باشد تجزیه و تحلیل سایت ها برای پیدا کردن آن دسته از صفحاتی است که اصلا به جاوا اسکریپت نیازی ندارند. دقت داشته باشید که این موضوع کاملا به مفهوم جدیدتر برنامه های چند صفحه ای که به اختصار MPA نامیده می شوند بستگی دارد. این در واقع یک نوع حد وسط بین برنامه ها و اپلیکیشن های تک صفحه ای و navigation کامل در هر صفحه می باشد. ایده اصلی که در این جا وجود دارد یافتن بخش هایی از اپلیکیشن است که می توانند فورا به عنوان دارایی های HTML ارسال شده و در نتیجه بهترین زمان را از نظر سئو و بارگذاری سایت داشته باشند.

به عنوان مثال رویکرد no-JS یا همان اجتناب از جاوا اسکریپت را می توانید به طور مستقیم در SvelteKit مشاهده کنید. البته این برای آن دسته از صفحاتی که نیاز به تعامل واکنشی دارند کار خاصی را انجام نمی دهد. علاوه بر این فریم ورک هایی که وجود دارند همچنان باید به عملیات hydration در صفحاتی که به عنوان SPA عمل می کنند رسیدگی کنند.

معماری Island در جاوا اسکریپت

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

توجه به این نکته که هدف اصلی آن بهبود SPA است در ایجاد این ایده می تواند بسیار مفید و کاربردی باشد. این به آن معناست که تمام محتوای ثابتی که شناسایی می کنید می توانند بدون حرکت بایستند و کار خود را بدون هیچ ضربه عملکردی انجام دهند. با انجام این کار تمام وضعیت سمت کلاینت و همینطور navigation برای شما حفظ خواهد شد.

نکاتی مهم درباره معماری Island در جاوا اسکریپت

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

boundary ها یا مرزهای Lazy loaded

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

علاوه بر این قابلیت lazy loading به تنهایی نیز می تواند به میزان زیادی کمک کننده باشد چرا که هنوز بسیاری از فریم ورک ها جای کار بسیار زیادی دارند.

قابلیت از سرگیری مجدد

قابلیت از سرگیری مجدد یا Resumability ایده ای است که توسط فریم ورک Qwik معرفی شده است. Qwik به طور عمیق تر وارد عناصر اپلیکیشن ها می شود و تلاش می کند تا مرزهای lazy را در طول آنها ایجاد کند. به نوعی شما می توانید آن را به عنوان شکل بسیار پیچیده ای از مرزهای lazy loading مشاهده کنید. Resumability به این معناست که کلاینت می تواند دقیقا از جایی که سرور متوقف شده است کار خود را ادامه دهد و همه چیز را به روشی بسیار دقیق به صورت هماهنگ نگه دارد.

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

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

قابلیت استریم کردن

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

hydration جزئی یا پیش رونده؟

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

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

hydration جزئی در جاوا اسکریپت

برای این که بیشتر با این مفهوم در جاوا اسکریپت آشنا شویم اجازه دهید تا سعی کنیم این اصطلاحات را به صورت تفکیک شده در اختیارتان قرار دهیم. در گام اول اجازه دهید تا بیان کنیم معماری island در واقع به قطعات Astro-style از تعاملات مستقلی که در داخل فریم استاتیک رخ می دهد اشاره دارد.

زمانی که به سمت بالا حرکت می کنیم می توانیم بیان کنیم که کل ایده تجزیه رابط کاربری همان hydration جزئی است و islandهای Astro نیز در واقع نمونه ای از آن به شمار می آیند. با این حال ما نمی توانیم این کار را بدون خطر انجام دهیم چرا که Astro == island == partial در حال حاضر در این جا شناور است. علاوه بر این به نظر می رسد hydration جزئی به صورت ناقص عملیات hydration را نشان می دهد که این مسئله نیز می تواند گمراه کننده به نظر برسد.

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

تکامل معماری فرانت اند در جاوا اسکریپت

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

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