وقتی صحبت از تکنیک‌های بهینه کردن سایت و کاهش زمان پاسخ‌دهی آن می‌شود، مسائلی چون فشرده‌سازی، بهینه کردن تصاویر و فایلهای استفاده شده یا حتی استفاده از تکنیک‌های کش (HTTP caching) بیشتر در ذهن جاری می‌گردد. اگر از سایت‌های وردپرسی استفاده می‌کنید، افزونه‌هایی چون Nitropack و افزونه Wp-rocket بیشتر مطرح می‌شوند. گر چه این موارد همگی مهم هستند و مطالب فراوانی نیز در مورد هر یک بیان شده است، اما برخی مسائل بهینه‌سازی سایت نیز هستند که کمتر مورد توجه قرار گرفته‌اند، در حالیکه این موارد می‌توانند بر روی سرعت سایت شما بسیار تاثیرگذار باشند. این موارد در اثر کدهای جاوا اسکریپت بوجود می‌آیند. یعنی کدنویسی نامناسب در جاوا اسکریپت می‌تواند بر روی سرعت سایت شما اثر منفی داشته باشد. لذا در این مقاله به سه مورد از آنها اشاره می‌کنیم. به ‌صورت فهرست‌وار این موارد عبارتند از: Long tasks (وظایف طولانی)، Large bundle sizes (حجم زیاد فایل) و Hydration issues (مشکلات ناشی از ترکیب کد جاوا اسکریپت). در ادامه مقاله معمولاً سعی می‌کنیم از نام انگلیسی این مشکلات استفاده کنیم تا در برداشت مفهوم مقاله اشتباهی صورت نگیرد.

جاوااسکریپت یک زبان برنامه‌نویسی است که به همراه دو زبان HTML و CSS معمولاً به عنوان زبان‌های پایه وب شناخته می‌شوند. این زبان که توسط برندان ایچ (Brendan Eich) خلق شد، شما را قادر می‌سازد که ویژگی‌های جذاب‌تر و پیشرفته‌تری را به صفحات وب‌سایت خود اضافه کنید. در‌واقع بدون این زبان، وب‌سایت‌ها باید تنها به نمایش المان‌های ساده که کاربر سایت هم نمی‌تواند هیچ گونه تعاملی با آن‌ها داشته باشد، بسنده کنند. البته از کاربردهای جاوااسکریپت در سمت سرور که به پیدایش تکنولوژی چون نود جی اس (Node.js) منجر شده است نیز نباید غافل شویم. برای فهم بهتر موضوع به بررسی فواید و معایب این زبان نیز می‌پردازیم تا به پاسخ این پرسش دست یابیم که جاوااسکریپت چیست و چگونه رفتار می‌کند؟.

امروزه کتابخانه‌ها و فریم‌ورک‌های فرانت‌اند به یک بخش ضروری از فرآیند توسعه‌وب در دنیای مدرن تبدیل شده‌اند. فریم‌ورک ری‌اکت، در بین فریم‌ورک‌‌های جاوااسکریپت یکی از محبوب‌‌ترین گزینه‌‌ها می‌باشد. در اینجا می‌ خواهیم برای کسانی که با توسعه‌وب آشنا نیستند یا به تازگی در این عرصه وارد شده و سعی در درک آن دارند، ری‌اکت و ویژگی‌‌های آن را بررسی کنیم. در پاسخ به این پرسش که "ری‌اکت چیست؟" باید گفت که: ری‌اکت جی‌اس یک کتابخانه جاوااسکریپت منبع‌باز است که توسط فیس بوک با دقت ساخته شده است و هدف آن ساده کردن فرآیند پیچیده ساخت رابط های کاربری تعاملی است. یک رابط کاربری ساخته شده با ری‌اکت را به عنوان مجموعه‌ای از اجزا و کامپوننت‌ها تصور کنید که هر کدام مسئول نمایش یک قطعه کوچک از کد HTML هستند.

در این آموزش به بررسی نحوه کار با ویو جی‌اس (Vue.js)، یک فریم‌ورک پیشرو جاوااسکریپت، برای ساخت رابط کاربری سایت در کنار نود جی‌اس (Node.js)، محیط اجرایی جاوااسکریپتی ساخته‌شده بر پایه موتور وی هشت کروم، خواهیم پرداخت. ما اصول اولیه راه‌اندازی یک پروژه ویو جی‌اس و نود جی‌اس را پوشش خواهیم داد و در ساخت یک برنامه وب ساده قدم خواهیم زد. برای به دست آوردن بیشترین بهره از این آموزش، شما باید درک اولیه‌ای از جاوااسکریپت، اچ‌تی‌ام‌ال و سی‌اس‌اس داشته باشید. قبل از شروع این آموزش، اطمینان حاصل کنید که نود جی‌اس و ابزار مدیریت پکیج نود (npm) بر روی سیستم شما نصب شده باشد. در اینجا به صورت گام به گام مراحل نصب ابزارهای لازم و اقدامات ضروری برای آن را شرح خواهیم داد. پس بهتر است بدون معطلی شروع کنیم!